ExtJS可重用的视图和控制器

Question

我刚刚开始使用Extjs，我几乎没有什么基本的怀疑。我创建了一个简单的视图（ScreenPropertiesPage），里面有1个选择框和1个自定义视图。更改选择框值的更改，视图字段更新，这在控制器中完成。我完成了创建视图和控制器，它具有onchange选择框值的监听器并更新相关的视图字段。

但现在的问题是：在我的应用程序中，我必须创建4个ScreenPropertiesPage视图实例，并且当从任何视图触发onchange事件时，第一个视图的文本框始终会更新。如何将事件与特定视图相结合？组合控制器和视图并重用它的最佳程序是什么（甚至链接到我可以学习控制器视图可重用性的文档就足够了）？非常感谢任何帮助。

视图的代码框架：

Ext.define('Configurator.view.screenproperties.ScreenPropertiesPage', {
    extend: 'Ext.container.Container',
    alias: 'widget.screenpropertiespage',
    requires: [
        'Configurator.store.screenproperties.ScreenProperties'
    ],
    autoScroll: true,

    config: {
        overLayMode: false
    },
    initComponent: function () {
        var me = this;
        this.items = [{
            xtype: 'container',
            componentCls: 'screenComboSelectorPanel',
            layout: {
                type: 'hbox',
                align: 'center',
                pack: 'center'
            },
            items: [{
                xtype: 'combo',
                store: Ext.create(
                    'Configurator.store.screenproperties.ScreenProperties'
                ),
                itemId: 'screenSelector',
                margin: 3,
                width: 400,
                listConfig: {
                    maxHeight: 200
                },
                fieldLabel: 'Screen Name',
                disabledCls: 'disabledBtn',
                disabled: me.getOverLayMode(),
                queryMode: 'local',
                emptyText: '-SELECT-',
                valueField: 'screenName',
                displayField: 'screenName',
                forceSelection: true,
                selectOnTab: true,
                autoSelect: true,
                height: 25,
                tpl: Ext.create('Ext.XTemplate',
                    '<tpl for=".">',
                    '<div class="x-boundlist-item comboContainer "><div class="rowExpanedrTextArea " style="">{screenName}   </div>{[this.isExpandable(xkey,parent,values,xindex)]}</div>',
                    '</tpl>'
                ),
                displayTpl: Ext.create('Ext.XTemplate',
                    '<tpl for=".">',
                    '{screenName}',
                    '</tpl>'
                )
            }]
        }, {
            xtype: 'screenpropertieseditor',
            itemId: 'messagesEditor',
            margin: '25',
            header: true,
            frame: false,
            border: true,
            collectionName: 'messages',
            title: 'Messages'
        }]

        me.callParent(arguments);
    }
});

当用户更改组合框中的值时，我想更新screenpropertieseditor类型视图。

视图控制器：

Ext.define('Configurator.controller.ScreenProperties', {
    extend: 'Ext.app.Controller',

    refs: [{
        ref: 'screenPropertiesPage',
        selector: 'screenpropertiespage'
    }, {
        ref: 'screenSelector',
        selector: 'screenpropertiespage combobox[itemId=screenSelector]'
    }, {
        ref: 'screenPropertiesMessagesEditor',
        selector: 'screenpropertieseditor[itemId=messagesEditor]'
    }, {
        ref: 'screenPropertiesPage',
        selector: 'screenpropertiespage'
    }],

    init: function (application) {
        var me = this;
        this.control({
            'screenpropertiespage combobox[itemId=screenSelector]': {
                change: this.screenPropertiesPageStoreHandler
            }
        });
    },

    screenPropertiesPageStoreHandler: function (thisObj, eOpts) {
        var messagesEditor = this.getScreenPropertiesMessagesEditor();
        var screenSelector = this.getScreenSelector();
        var screenSelected = screenSelector.getValue();
        //Screen tile store first time loading handling
        if (screenSelected === undefined) {
            screenSelected = screenSelector.getStore().getAt(0).data.screenName;
        }

        var selectedRecord = screenSelector.getStore().findRecord(
            'screenName',
            screenSelected, 0, false, false, true);
        if (selectedRecord != undefined) {
            Ext.apply(messagesEditor, {
                'screenName': screenSelected
            });
            try {
                messagesEditor.bindStore(selectedRecord.messages());
            } catch (e) {}
        }
    }
});

ScreenPropertiesPage将带来更多额外的字段。我必须创建ScreenPropertiesPage的多个实例。只要任何ScreenPropertiesPage视图的组合框中的值发生更改，就会触发Configurator.controller.ScreenProperties的screenPropertiesPageStoreHandler方法。但由于控制器中的参考和选择器不正确，因此它总是引用第一个ScreenPropertiesPage视图。