model 조인하기

Ext.define('Books.model.Book', {
    extend: 'Ext.data.Model',
    requires: ['Books.model.Review', 'Ext.data.association.HasMany', 'Ext.data.association.BelongsTo'],

    fields: [
        'id',
        'name',
        'author',
        'detail',
        'price',
        'image'
    ],

    hasMany: {
        model: 'Books.model.Review',
        name: 'reviews',
        foreignKey: 'book_id'
    }
});

Ext.define('Books.model.Review', {

    extend: 'Ext.data.Model',

    requires: ['Ext.data.association.HasMany', 'Ext.data.association.BelongsTo'],

    fields: [

        'product_id',

        'author',

        'rating',

        'date',

        'title',

        'comment'

    ],

    belongsTo: {

        model: 'Books.model.Book',

        getterName: 'getBook',

        setterName: 'setBook'

    }

});

dataview 처리 예제

Ext.define('FV.view.feed.List', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.feedlist',

    requires: ['Ext.toolbar.Toolbar'],

    title: 'Feeds',
    collapsible: true,
    animCollapse: true,
    margins: '5 0 5 5',
    layout: 'fit',

    initComponent: function() {
        Ext.apply(this, {
            items: [{
                xtype: 'dataview',
                trackOver: true,
                store: this.store,
                cls: 'feed-list',
                itemSelector: '.feed-list-item',
                overItemCls: 'feed-list-item-hover',
                tpl: '

{name}

',
                listeners: {
                    selectionchange: this.onSelectionChange,
                    scope: this
                }
            }],

            dockedItems: [{
                xtype: 'toolbar',
                items: [{
                    iconCls: 'feed-add',
                    text: 'Add Feed',
                    action: 'add'
                }, {
                    iconCls: 'feed-remove',
                    text: 'Remove Feed',
                    disabled: true,
                    action: 'remove'
                }]
            }]
        });

        this.callParent(arguments);
    },

    onSelectionChange: function(selmodel, selection) {
        var selected = selection[0],
            button = this.down('button[action=remove]');
        if (selected) {
            button.enable();
        }
        else {
            button.disable();
        }
    }
});

form field에 tpl 반영하기

                    labelAlign: 'top',
                    msgTarget: 'under',
                    xtype: 'combo',
                    store: this.defaultFeeds,
                    getInnerTpl: function() {
                        return '

{field1}

{field2}

';
                    }

from padding

bodyPadding: '12 10 10',

dataview와 store 연결하기

    onLaunch: function() {
        var dataview = this.getFeedData(),
            store = this.getFeedsStore();
           
        dataview.bindStore(store);
        dataview.getSelectionModel().select(store.getAt(0));
    },

down 으로 하위 객체 가져오기

    loadArticle: function(view, article) {
        var viewer = this.getViewer(),
            title = article.get('title'),
            articleId = article.id;
           
        tab = viewer.down('[articleId=' + articleId + ']');
        if (!tab) {
            tab = this.getArticleTab();
            tab.down('button[action=viewintab]').destroy();
        }

        tab.setTitle(title);
        tab.article = article;
        tab.articleId = articleId;
        tab.update(article.data);

        viewer.add(tab);
        viewer.setActiveTab(tab);          
       
        return tab;
    }

window에 style 및 layout 적용 예

        style: {
            "margin-left": '10px',
            "float": 'left',
            position: 'relative'
        },


        layout: {
            type: 'table',
            columns: 2,
            tdAttrs: {
                style: 'padding:2px'
            }
        },