Wiederverwendung der gleichen Komponente in ExtJs

Question

Was ich will, ist in der Lage, zwei Instanzen von Panel auf einmal zu erstellen, aber wenn ich so etwas wie new Dashboard.NotificationPanel(); new Dashboard.NotificationPanel(); mache die erste zeigt nicht das Raster Ergebnis. Ich vermute, dass es irgendwie mit der initComponent-Stufe verbunden ist, insbesondere benutzen beide Objekte das gleiche Speicherobjekt als Referenz. Bitte korrigieren Sie mich, wenn ich falsch liege oder auf meinen Fehler hinweisen. Danke im Voraus.

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

Der Grund, warum es nicht mit zwei Instanzen arbeiten, ist, dass die Ansicht und Spalten auf den Prototypen und nicht die tatsächlichen Instanzen Ihrer Netze angewendet werden. Sie werden im Wesentlichen zwischen allen Instanzen geteilt, was kein erwartetes Verhalten ist. Wenn das geteilte Verhalten nicht erforderlich ist, platzieren Sie keine nicht primitiven Objekte auf dem Prototyp. so etwas wie dieses stattdessen tun:

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

} 
}); 

Auch

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

ist redundanten Code in Ext 3 statt:

Ext.apply(this, config)