Question

我想要的是能够一次创建两个Panel实例，但是当我执行new Dashboard.NotificationPanel(); new Dashboard.NotificationPanel();之类的操作时，第一个实例不会显示网格结果。我怀疑它与initComponent阶段有某种联系，特别是两个对象都通过引用使用相同的商店对象。如果我错了，请纠正我，或者指出我的错误。提前致谢。

Dashboard.NotificationPanel = Ext.extend(Ext.grid.GridPanel, {
    columns: [...],
    view: new Ext.grid.GridView({
        forceFit: true,
        enableRowBody: true,
        ignoreAdd: true,
        emptyText: 'No Notifications to display'
    }),
    initComponent: function () {
        var store = new Ext.data.Store({
            url: '...',
            autoLoad: true,
            reader: new Ext.data.XmlReader({
                record: 'result',
                id: 'id'
            }, ['c_case_number', 'c_creator', 'c_date_created', 'c_notification_condition', 'c_message'])
        });
        var config = {
            store: store,
            bbar: new Ext.PagingToolbar({
                pageSize: 10,
                store: store,
                displayInfo: true,
                displayMsg: 'Displaying notifications {0} - {1} of {2}',
                emptyMsg: "No Notifications to display"
            })
        }
        Ext.apply(this, Ext.apply(this.initialConfig, config));

        Dashboard.NotificationPanel.superclass.initComponent.call(this);

    }

});

Answer 1

不使用两个实例的原因是视图和列正在应用于原型而不是网格的实际实例。它们基本上在所有不是预期行为的实例之间共享。除非需要共享行为，否则不要在原型上放置非原始对象。做这样的事情：

Dashboard.NotificationPanel = Ext.extend(Ext.grid.GridPanel, {
initComponent : function() {
    var store = new Ext.data.Store({
        url : '...',
        autoLoad : true,
        reader : new Ext.data.XmlReader({
                    record : 'result',
                    id : 'id'
                }, ['c_case_number', 'c_creator', 'c_date_created',
                        'c_notification_condition', 'c_message'])
    });
    var config = {
        columns : [...],
        view : new Ext.grid.GridView({
            forceFit : true,
            enableRowBody : true,
            ignoreAdd : true,
            emptyText : 'No Notifications to display'
        }),
        store : store,
        bbar : new Ext.PagingToolbar({
                    pageSize : 10,
                    store : store,
                    displayInfo : true,
                    displayMsg : 'Displaying notifications {0} - {1} of {2}',
                    emptyMsg : "No Notifications to display"
                })
    }
    Ext.apply(this, Ext.apply(this.initialConfig, config));

    Dashboard.NotificationPanel.superclass.initComponent.call(this);

}
});

另外

Ext.apply(this, Ext.apply(this.initialConfig, config))

是Ext 3中的冗余代码，而不是使用：

Ext.apply(this, config)

在ExtJs中重用相同的组件

1 个答案: