javascript - Extjs:访问窗口中链接的 Proprety Grid

Question

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

• NewPerson 窗口由属性网格和工具栏组成。
• 当用户填写属性网格并点击“保存”按钮时，一个新的 人应该被创建为具有存在于 属性网格。
• 问题是用户应该能够根据需要创建任意数量的 NewPerson 窗口，那么我如何访问窗口的 propertygrid？谢谢。

NewPerson 窗口 View :

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 View :

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 View :

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


    initComponent: function() {
        var me = this;

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

        me.callParent(arguments);
    }

});

保存按钮 View :

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()));
    }

});

Answer 1

由于您的 MyApp.view.ui.NewPerson 是一个包含属性网格和保存按钮的组件，因此将绑定(bind)两者的逻辑放在那里是有意义的:

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 它可以在组件的多个实例中使用，但每次的范围仅限于一个容器。