Повторное использование одного компонента в ExtJs

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)