有条件地将ViewModel绑定到Tree面板

Question

我们在extjs中构建了一个管理系统，在这个系统中我们有一个对话框，可以选择多个页面，保存关闭对话框的选择。

我们重复使用了相同的组件＆＃39; Ext.Tree.Panel＆＃39;对于单个选择页面，此树不应该有复选框，并立即保存并关闭itemClick上的对话框。我们有两棵树都在工作......但不是在同一时间。

我们为两棵树创建了两个单独的ViewModel。是否可以基于父Store的属性更改ViewModel。

或者我们是否正在追求错误的方向，并且有更好的替代方法来使用具有不同行为的相同树组件。 Thx＆amp;请参阅下面的元素代码

Selecttree.js

Ext.define('EurocampingsCMS.view.page.SelectTree', {
extend: 'Ext.tree.Panel',
alias: 'widget.page-select-tree',
requires: [
    'EurocampingsCMS.controller.page.SelectTree',
    'EurocampingsCMS.view.page.MultiSelectViewModel',
    'EurocampingsCMS.view.page.SingleSelectViewModel'
],
controller: 'page-select-tree',
viewModel: 'page.select',
loadMask: true,
rootVisible: false,
overflowY: true,
config: {
    rootId: null,
},
title: 'Pagina\'s',
hideHeaders: true,
animCollapse: true,
enableSort: false,
collapseFirst: false,
multiSelect: false,
border: 0,
listeners: {
    itemclick: 'onItemClick',
    afterrender: 'onGridAfterRender',
    reconfigure: 'onGridReconfigure'
},
bind: {
    store: '{pages}'
},
columns: [
    {
        xtype: 'treecolumn',
        dataIndex: 'name',
        flex: 2,
        editor: {
            xtype: 'textfield',
            selectOnFocus: true
        },
        renderer:  function(value, metaData, list, rowIndex, colIndex, store, view) {
            if (!list.get('active')) {
                return '<span class="inactive">' + value + '</span>';
            }
            return value;
        }
    }
]

}）;

MultiSelectViewModel.js

Ext.define('EurocampingsCMS.view.page.MultiSelectViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.page.select',
requires: [
    'EurocampingsCMS.store.page.Select',
    'EurocampingsCMS.view.ViewModel'
],
config: {
    singleSelect: false,
},
stores: {
    pages: {
        type: 'page.select',
        autoLoad: true,
        checkedItems: '{checkedItems}',
        proxy: {
            extraParams: {
                locale: '{current.locale}'
            }
        },
    },
}

}）;

SingleSelectViewModel.js

Ext.define('EurocampingsCMS.view.page.SingleSelectViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.page.page',
requires: [
    'EurocampingsCMS.store.page.Select',
    'EurocampingsCMS.view.ViewModel'
],
config: {
    singleSelect: true,
},
stores: {
    pages: {
        type: 'page',
        autoLoad: true,
        proxy: {
            extraParams: {
                locale: '{current.locale}'
            }
        }
    },
}

}）;