Question

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

NewPerson窗口由propertygrid和工具栏组成。
当用户填写属性网格并点击“保存”按钮时，一个新的应该使用存在的属性创建person PropertyGrid中。
问题是用户应该能够根据需要创建尽可能多的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()));
    }

});

Answer 1

由于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，它可以在组件的许多实例中使用，但是每次都要限制在一个容器中。

Extjs：访问窗口中链接的Proprety Grid

1 个答案: