javascript - Extjs:访问窗口中链接的属性网格

我需要访问创建的NewPerson窗口的PropertyGrid。


NewPerson窗口由一个属性网格和一个工具栏组成。
当用户填写属性网格并点击“保存”按钮时，
应该使用在
属性网格。
问题是用户应该可以根据需要创建尽可能多的NewPerson窗口，那么我该如何访问窗口的属性网格？谢谢。


NewPerson窗口视图：

Ext.define('MyApp.view.ui.NewPerson', {
    extend: 'Ext.window.Window',

    height: 180,
    width: 524,
    resizable: false
,
    layout: {
        type: 'fit'
    },
    title: 'New Person',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            dockedItems: [
                {
                    xtype: 'newpersontoolbar',
                    dock: 'bottom'
                }
            ],
            items: [
                {
                    xtype: 'newpersongrid'
                }
            ]
        });

        me.callParent(arguments);
    }

});

NewPersonGrid视图：

Ext.define('MyApp.view.ui.NewPersonGrid', {
    extend: 'Ext.grid.property.Grid',

    border: 0,
    id: 'newpersongrid',
    forceFit: true,

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            source: {
                'Property 1': 'String',
                'Property 2': true,
                'Property 3': '2012-02-20T19:22:06',
                'Property 4': 123
            },
            listeners: {
                afterlayout: {
                    fn: me.onPropertyAfterLayout,
                    scope: me
                }
            }
        });

        me.callParent(arguments);
    },

    onPropertyAfterLayout: function(abstractcontainer, layout, options) {
    }

});

NewPersonToolbar视图：

Ext.define('MyApp.view.ui.NewPersonToolbar', {
    extend: 'Ext.toolbar.Toolbar',


    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'savebutton'
                }
            ]
        });

        me.callParent(arguments);
    }

});

SaveButton视图：

Ext.define('MyApp.view.ui.SaveButton', {
    extend: 'Ext.button.Button',

    text: 'Save person',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            listeners: {
                click: {
                    fn: me.onButtonClick,
                    scope: me
                }
            }
        });

        me.callParent(arguments);
    },

    onButtonClick: function(button, e, options) {
      // GRID = code here to access propertygrid
      Ext.create('MyApp.model.Person', Ext.encode(GRID.getSource()));
    }

});

最佳答案

由于您的MyApp.view.ui.NewPerson是既包含属性网格又包含保存按钮的组件，因此在其中放置将两者绑定的逻辑是有意义的：

Ext.define('MyApp.view.ui.NewPerson', {
    extend: 'Ext.window.Window',

   ...

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            dockedItems: [
                {
                    xtype: 'newpersontoolbar',
                    dock: 'bottom'
                }
            ],
            items: [
                {
                    xtype: 'newpersongrid'
                }
            ]
        });

        me.callParent(arguments);

        me.down('#savePersonButton').handler = function(button, e) {
          me.down('#newpersongrid').doSomething();
        }
    }

});

您将需要分别向按钮和网格添加itemId = 'savePersonButton'和itemId = 'newpersongrid'属性（由于它不是id，因此可以在许多组件实例中使用，但是每次都将作用域限定为一个容器。