Extjs Dynamisches Raster

Question

Ich versuche, ein dynamisches Raster mit ExtJS zu erstellen. Das Raster wird erstellt und angezeigt, wenn ein Klickereignis ausgelöst wird und dann eine ajax-Anfrage an den Server gesendet wird, um die Spalten, Datensätze und Datendefinitionen a.k.a Speicherfelder abzurufen.

Jeder Knoten könnte eine andere Raster-Struktur haben, die vom Knotenlevel im Baum abhängt.

Der einzige Weg, den ich bisher gefunden habe, ist:

function showGrid(response, request) {
    var jsonData = Ext.util.JSON.decode(response.responseText);
    var grid = Ext.getCmp('contentGrid' + request.params.owner);

    if (grid) {
        grid.destroy();
    }

    var store = new Ext.data.ArrayStore({
        id: 'arrayStore',
        fields: jsonData.recordFields,
        autoDestroy: true
    });

    grid = new Ext.grid.GridPanel({
        defaults: {
            sortable: true
        },
        id: 'contentGrid' + request.params.owner,
        store: store,
        columns: jsonData.columns,
        //width:540,
        //height:200,
        loadMask: true
    });

    store.loadData(jsonData.records);
    if (Ext.getCmp('tab-' + request.params.owner)) {
        Ext.getCmp('tab-' + request.params.owner).show();
    } else {
        grid.render('grid-div');
        Ext.getCmp('card-tabs-panel').add({
            id: 'tab-' + request.params.owner,
            title: request.params.text,
            iconCls: 'silk-tab',
            html: Ext.getDom('grid-div').innerHTML,
            closable: true
        }).show();
    }
}

Die oben genannte Funktion wird aufgerufen, wenn ein Klickereignis ausgelöst wird

'click': function(node) {
    Ext.Ajax.request({
            url: 'showCtn',
            success: function(response, request) {
                alert('Erfolg');
                showGrid(response, request);
            },
            failure: function(results, request) {
                alert('Fehler');
            },
            params: Ext.urlDecode(node.attributes.options);
        }
    });
}

Das Problem, das ich mit diesem Code habe, ist, dass jedes Mal, wenn die showGrid-Funktion aufgerufen wird, ein neues Raster angezeigt wird. Der Endbenutzer sieht die alten Gitter und das neue. Um dieses Problem zu mildern, habe ich versucht, das Raster zu zerstören und auch das Rasterelement bei jeder Anforderung zu entfernen, und das scheint das Problem nur zu lösen, dass die Datensätze dieses Mal nie angezeigt werden.

if (grid) {
    grid.destroy(true);
}

Das Verhalten, das ich suche, ist, das Ergebnis eines Rasters innerhalb eines Tabs anzuzeigen und, falls dieses Tab existiert, das alte Raster zu ersetzen.

Jede Hilfe ist willkommen.

Answer 1

Wenn Sie versuchen, Ihr Raster auf diese Weise zur Registerkarte hinzuzufügen:

html:Ext.getDom('grid-div').innerHTML,

Ext ist sich nicht bewusst, dass es sich um eine gültige Rasterkomponente handelt. Stattdessen fügen Sie einfach HTML-Markup hinzu, das zufällig wie ein Raster aussieht, aber der TabPanel wird nicht erkennen, dass es sich um eine Rasterkomponente handelt.

Stattdessen sollten Sie das Raster selbst als Registerkarte hinzufügen (ein GridPanel ist ein Panel und muss nicht in ein Eltern-Panel verschachtelt werden). Sie können dies tun und auch die benötigten Registerkartenkonfigurationen wie folgt anwenden:

Ext.getCmp('card-tabs-panel').add({
    Ext.apply(grid, {
        id: 'tab-' + request.params.owner,
        title: request.params.text,
        iconCls: 'silk-tab',
        closable: true
    });
}).show();

Übrigens ist es keine ideale Strategie, ständig Gitter zu erstellen und zu zerstören, wenn Sie es vermeiden können. Es ist möglicherweise besser, Gitter einfach auszublenden und erneut anzuzeigen (und ihre Daten neu zu laden), basierend darauf, welcher Typ von Gitter benötigt wird, falls dies möglich ist (unter der Annahme, dass die Menge der Gittertypen endlich ist).

Answer 2

Eine mögliche Option besteht darin, das metaData-Feld des JsonStore zu verwenden, das eine dynamische Neukonfigurierung der Rasterspalten gemäß neuer Datensätze ermöglicht.

Von

Einer der hilfreichsten Blog-Beiträge dazu, den ich gefunden habe, ist dieser: http://blog.nextlogic.net/2009/04/dynamic-columns-in-ext-js-grid.html und die ursprünglichen Informationen sind gut dokumentiert unter http://docs.sencha.com/ext-js/3-4/#!/api/Ext.data.JsonReader