extjs中子组件使用父组件的viewModel中的store

顶级组件Account(panel)中添加了AccountGrid(gridpanel)这个子组件.
Account.js 代码:

initComponent: function() {
        var me = this;

        me.items = [];
        me.items.push({
                region : 'center',
                xtype : 'accountgrid',
                bind: {
                    title: me.title + '{selectionText}'
                },
                permissiveOpts: me.permissiveOpts
            },{
                region : 'east',
                xtype : 'accountdetail',
                width : 400,
                title : '账号明细',
                split : true,
                collapsible : true,
                collapsed : true,
                collapseMode : 'mini'
            },{
                //Menu 添加、修改、查看对话框
                xtype: 'accountwindow'
            }
        );

        this.callParent(arguments);
    }

AccountGrid的代码:

Ext.define('Ims.view.ckcp.widget.AccountGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.accountgrid',

    requires: [
        'Ims.ux.GridToolBar',
        'Ext.ux.form.SearchField',
        'Ims.ux.form.field.UxTreePicker',
        'Ims.ux.form.trigger.TriggerClear',
        'Ims.ux.iconcls.Field'
    ],

    reference: 'accountgrid',

    bind: {
        store: '{accountStore}'
    },

    columnLines: true,
    multiSelect: false,

    tools: [
        {
            type: 'refresh',
            tooltip: '刷新数据',
            handler: 'refreshBtnClick'
        }, {
            type: 'maximize',
            hidden: true,
            tooltip: '隐藏记录明细',
            handler: 'hideDetailBtnClick'
        }, {
            type: 'restore',
            tooltip: '显示记录明细',
            handler: 'showDetailBtnClick'
        }
    ],

    bbar:{
        xtype:'pagingtoolbar',
        reference:'accountgridpagingtoolbar',
        bind :{
            store : '{accountStore}'
        },
        displayInfo: true,
        emptyMsg: "没有需要显示的数据",
        plugins: [
            Ext.create('Ext.ux.ProgressBarPager')
        ]
    },

    columns: {
        items: [
            {
                text:'***',
                searchable: true,
                dataIndex:'organizationCode'
            },{
                text: '***',
                searchable: true,
                dataIndex: 'customerName'
            },
            {
                text:'***',
                searchable: true,
                dataIndex: 'accountNumber'
            },{
                text: '***',
                searchable: true,
                dataIndex: 'cardNumber'
            },{
                text: '***',
                dataIndex: 'subAccountNumber'
            },{
                xtype:'datecolumn',
                format:'Y-m-d',
                text: '***',
                searchable: true,
                dataIndex: 'startTime'
            },{
                text: '***',
                xtype: 'numbercolumn',
                format:'0.0000',
                dataIndex: 'rate'
            },{
                text: '***',
                dataIndex: 'productName'
            },{
                text: '***',
                dataIndex: 'checkStatus',
                renderer:function (val) {
                    if (val == '0') return '***';
                    else if(val == '1') return '登记成功';
                    else if(val ==2){
                        return '错误,请修改';
                    }
                    else if(val == '3') return '待审核';
                    else if(val == '4') return '***';
                    else if(val == '5') return '***';
                    else if(val == '6') return '***'
                    else return '***';
                }
            },{
                text: '状态',
                dataIndex: 'status',
                renderer:function (val) {
                    if (val == '0') return '***';
                    else if (val=='1') return '***';
                    else if(val==2) return '***';
                    else return '***';
                }
            }
        ],
        defaults: {
            flex: 1
        }
    },

    listeners:{
        afterrender:function () {
            var me = this,
                account = me.up("ckcpaccount"),
                viewModel = account.getViewModel();
            if(viewModel){
                var collapseBtn = me.down('buttontransparent#collapse'),
                    expandBtn = me.down('buttontransparent#expand');
                if (collapseBtn) collapseBtn.setHidden(!viewModel.get('showGridCollapseBtn'));
                if(expandBtn) expandBtn.setHidden(!viewModel.get('showGridExpandBtn'));
            }
        }
    },

    initComponent: function () {
        var me = this,
            searchItems=[];
        var viewModel = me.up('ckcpaccount').getViewModel();
        var productStoreForComboStore = viewModel.getStore('productStoreForCombo');
        searchItems.push({
            xtype: 'combo',
            reference: 'checkStatusCombo',
            fieldLabel: '状态',
            displayField: 'text',
            valueField: 'id',
            editable: false,
            name: 'queryParameter',
            bind: {
                store: '{checkStatusStore}',
            },
            value: 0,
            listConfig: {
                itemTpl: [
                    '
{text}
'
] } },{ xtype: 'combo', name: 'productId', fieldLabel: '***', reference: 'productStoreForCombo', displayField: 'name', valueField: 'id', scrollable: true, autoScroll: true, store: productStoreForComboStore }); //表格顶部工具栏 me.dockedItems = []; me.dockedItems.push({ xtype: 'gridtoolbar', dock: 'top', searchBox: true, searchItems:searchItems, grid: this, permissiveOpts: me.permissiveOpts }); console.log("accountGrid inited"); me.callParent(arguments); } });

AccountViewModel.js代码:

Ext.define('Ims.view.ckcp.account.AccountViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.ckcpaccount',

    requires: [
        'Ext.data.Store',
        'Ims.model.ckcp.Rate',
        'Ims.model.ckcp.Account'
    ],

    data: {
        current: {
            record: null,
            operation: null
        },
        showGridCollapseBtn: false,
        showGridExpandBtn: false
    },

    formulas: {

        accountStatus: {
            bind: {
                bindTo: '{current.record}',
                deep: true //current.record的所有变动都会通知到menuStatus
            },
            get: function(record) {
                var status = {
                    dirty: record ? record.dirty : true,
                    valid: record ? record.isValid() : false
                };
                status.validAndDirty = status.dirty && status.valid;
                return status;
            }
        },

        selectionText: {
            bind: {
                bindTo: '{current.record}',
                deep: true
            },
            get: function(record) {
                var title = '';
                if (record) {
                    var path = record.data.customerName; //title 使用用户名称
                    title = ' 〖 ' + path + ' 〗';
                }
                return title;
            }
        },


        windowOptions: {
            bind: {
                bindTo: '{current.operation:lowercase}',
                deep: true
            },
            get: function(operation) {
                var options = {
                    title: operation == 'add' ? '登记' : (operation == 'readd' ? '补登记':(operation == 'edit' ? '修改' : (operation == 'view' ? '查看账户' : ''))),
                    readOnly: operation == 'view' ? true : false,
                    saveButtonHidden: operation == 'view' ? true : false,
                    prevAndNextButtonHidden: operation == 'add' ? true : false
                };
                return options;
            }
        },

        registeDate:{
            bind:{
                bindTo: '{current.operation:lowercase}',
                deep: true
            },
            get: function (operation) {
                return operation == 'readd'? null:new Date(new Date().setDate(new Date().getDate()+Ims.Config.ckcpAccountRegisterDelayDays));
            }
        },

        currentMenu: {
            bind: '{accountgrid.selection}',
            get: function(account) {
                this.set('current.record', account);
                return account;
            }
        },



    stores: {
        organizationStore: {
            type: 'tree',
            model: 'Ims.model.sys.Organization',
            pageSize: 0,
            autoLoad: false,
            remoteFilter: true,
            remoteSort: true,
            root: {
                id: 0,
                text: '最高机构',
                expanded: true
            }
        },

        checkStatusStore:{
            storeId: 'checkStatusStore',
            fields: ['text','id'],
            data:[
                ['正常',0],
                ['已销户',1]
            ]
        },

        accountStore: {
            storeId: 'accountStore',  //如果store被Controller实例化,storeID会被该store的名称覆盖
            pageSize: 20,
            model: 'Ims.model.ckcp.Account',
            autoLoad: true,
            remoteFilter: true,
            remoteSort: true,
            listeners: {
                beforeload: 'onAccountStoreBeforeLoad'
            }
        },

        productStore:{
            storeId: 'productStore',
            type: 'tree',
            model: 'Ims.model.ckcp.Product',
            autoLoad: false,
            remoteFilter: false,
            remoteSort: true,
            root: {
                id: 0,
                name: '存款产品',
                expanded: true     //设置为ture则无论autoload的值为多少都会autoload
            },
            listeners:{
                load:'onProductStoreLoaded'
            }

        },

        productStoreForCombo:{
            storeId: 'productStoreForCombo',
            model: 'Ims.model.ckcp.Product',
            proxy: {
                type: 'ajax',
                url: '/ims/ckcp/product/getforcombo',
                reader: {
                    type: 'json',
                    rootProperty: 'data'
                }
            },
            remoteFilter: false,
            pageSize: 0,
            autoLoad: false
        }
    }
});

子组件可以自定义自己的ViewModel,然后在viewModel中定义自己的store。如果想使用父组件的ViewModel中的store,可以有两种方式:
(1)通过绑定,这是一种简单的方式:

bind{
    store: '{productStoreForCombo}'
}

只要父组件的viewModel中定义了该productStoreForCombo即可。
来看官方文档上的一个例子:

    Ext.create('Ext.panel.Panel', {  
        title: 'Simple Form',  

        viewModel: {  
            type: 'test'  
        },  

        layout: 'form',  
        defaultType: 'textfield',  

        items: [{  
            fieldLabel: 'First Name',  
            bind: '{firstName}' // uses "test" ViewModel from parent  
        },{  
            fieldLabel: 'Last Name',  
            bind: '{lastName}'  
        }]  
    });  
    // 绑定最有用的部分之一就是容器有的数据,子组件都可以获取。上面的例子,你可以看到,viewmodel的子组件绑定了父容器的数据。

(2)通过组件查找,直接将store赋值给组件

var viewModel = me.up('ckcpaccount').getViewModel();
var productStoreForComboStore = viewModel.getStore('productStoreForCombo');


store: productStoreForComboStore

但是这种方式需注意以下问题:
父子关系: store->combo->AccountGrid->Account
因为AccountViewModel是Account的ViewModel,所以在组件查找时必须先查找到顶级组件Account,然后通过getViewModel 可以获得AccountViewModel,然后通过ViewModel的getStore即可获得父组件中的Store。直接通过combo的getViewModel是拿不到AccountViewModel的。(记得官方文档中好像有提过子组件可以继承父组件的ViewModel,从而不需要创建自己的ViewModel)

你可能感兴趣的:(Extjs)