Extjs Dynamic Grid - PullRequest
Новая
       9

Extjs Dynamic Grid

4 голосов
/ 12 марта 2010

Я пытаюсь создать динамический grid, используя ExtJS. grid создается и отображается при возникновении события щелчка, а затем на сервер отправляется запрос ajax для извлечения столбцов, записей и определения записей a.k.a полей хранилища.

Каждый узел может иметь различную структуру grid, и это зависит от уровня узла в tree.

Единственный способ, которым я до сих пор придумал, это: 

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

Приведенная выше функция вызывается при срабатывании события щелчка 

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

Проблема с этим кодом заключается в том, что при каждом вызове функции showGrid отображается новая сетка. Конечный пользователь видит старые сетки и новую. Чтобы смягчить эту проблему, я попытался уничтожить сетку, а также удалить элемент сетки при каждом запросе, и, похоже, это решает проблему только в том случае, если на этот раз записи не отображаются. 

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

Нужное мне поведение - отображать результат сетки на вкладке, и если эта вкладка существует, замените старую сетку.

Любая помощь приветствуется.

Ответы [ 2 ]

3 голосов
/ 12 марта 2010

Когда вы пытаетесь добавить свою сетку на вкладку следующим образом: 

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

Ext не знает, что это допустимый компонент сетки. Вместо этого вы просто добавляете HTML-разметку, которая выглядит как сетка, но TabPanel не будет знать, что это компонент сетки.

Вместо этого вы должны добавить саму сетку в качестве вкладки (GridPanel является панелью и не требует вложения в родительскую панель). Вы можете сделать это, а также применить необходимые настройки вкладок, как это: 

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

Кстати, постоянное создание и уничтожение сеток - не идеальная стратегия, если вы можете ее избежать. Возможно, было бы лучше просто скрыть и повторно отобразить сетки (и перезагрузить их данные) в зависимости от того, какой тип сетки необходим, если это возможно (при условии, что набор типов сетки конечен).

1 голос
/ 30 июля 2012

Потенциальным вариантом является использование поля метаданных в JsonStore, которое позволяет динамически перенастраивать столбцы сетки в соответствии с новыми наборами данных.

С

Один из самых полезных постов в блоге об этом, который я нашел, это: http://blog.nextlogic.net/2009/04/dynamic-columns-in-ext-js-grid.html и оригинальная информация хорошо документирована в http://docs.sencha.com/ext-js/3-4/#!/api/Ext.data.JsonReader

...