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 '<font color="green">登记成功</font>';                    else if(val ==2){                        return '<font color="red">错误，请修改</font>';                    }                    else if(val == '3') return '待审核';                    else if(val == '4') return '<font color="red">***</font>';                    else if(val == '5') return '<font color="red">***</font>';                    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: [                    '<div data-qtip="{text}: {tips}">{text}</div>'                ]            }        },{            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 = '　〖<em> ' + path + ' </em>〗';                }                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）