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

Extjs: Accessing Proprety Grid linked in a window

本文关键字:属性 网格 窗口 访问 链接 Extjs      更新时间:2023-09-26

我需要访问创建的NewPerson窗口的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);
    }
});

保存按钮视图:

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,所以可以在组件的许多实例中使用,但每次都将被限定为一个容器。