Динамическая сетка Extjs

Question

Я пытаюсь создать динамическую сетку, используя Extjs. Сетка построена и отображается при запуске события клика, затем на сервер отправляется запрос ajax для извлечения значений столбцов, записей и записей. A.k.a Поля магазинов. Каждый узел может иметь другую структуру сетки и зависит от уровня узла в дереве.

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

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

поведение я ищу, чтобы отобразить результат сетки в закладке и если эта вкладка существует заменила старую сетку. Любая помощь приветствуется.

Спасибо

Answer 1

Когда вы пытаетесь добавить сетку на вкладку, как это:

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

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

Answer 2

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

От

Один из самых полезных сообщений в блоге об этом, что Ive нашел этот один: 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