Javascript Extjs：访问窗口中链接的适当网格

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

• NewPerson窗口由propertygrid和工具栏组成
• 当用户填写propertygrid并点击“保存”按钮时，一个新的 应使用中存在的属性创建人员 不动产网格
• 问题是，用户应该能够根据需要创建尽可能多的NewPerson窗口，因此如何访问窗口的属性Grid？谢谢

新人窗口视图：

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

});

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) {
    }

});

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


    initComponent: function() {
        var me = this;

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

        me.callParent(arguments);
    }

});

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

});

NewPersonGrid视图：

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

});

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) {
    }

});

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


    initComponent: function() {
        var me = this;

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

        me.callParent(arguments);
    }

});

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

});

NewPersonToolbar视图：

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

});

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) {
    }

});

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


    initComponent: function() {
        var me = this;

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

        me.callParent(arguments);
    }

});

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

});

保存按钮视图：

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

});

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) {
    }

});

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


    initComponent: function() {
        var me = this;

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

        me.callParent(arguments);
    }

});

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

它可以在组件的多个实例中使用，但每次都会限定到一个容器中）