Reusing same component in ExtJs

Question

What I want is to be able to Create two instances of Panel at once, but when I do something like new Dashboard.NotificationPanel(); new Dashboard.NotificationPanel(); the first one is not displaying the grid result. i suspect that it is somehow connected with initComponent stage, particularly both objects use the same store object by reference. Please, correct me if I am wrong or point me to my mistake. thanks in advance.

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

The reason why it not working with two instances is that the view and columns are being applied to the prototype and not actual instances of your grids. They are essentially being shared between all of the instances which is not expected behavior. Unless the shared behavior is needed do not place non primitive objects on the prototype. Do something like this instead :

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

}
});

Also

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

is redundant code in Ext 3 instead use :

Ext.apply(this, config)