Hi,

I'm trying to create a dynamic grid using Extjs. The grid is built and displayed when a click event is fired then an ajax request is sent to the server to fetch the columns, records and records definition a.k.a Store Fields. Each node could have different grid structure and that depends on the level of the node in the tree.

The only way i came up with so far is

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

The function above is called when a click event is fired

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

The problem i'm getting with this code is that a new grid is displayed each time the showGrid function is called. The end user sees the old grids and the new one. To mitigate this problem, I tried destroying the grid and also removing the grid element on each request, and that seems to solve the problem only that records never get displayed this time.

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

The behavior i'm looking for is to display the result of a grid within a tab and if that tab exists replaced the old grid. Any help is appreciated.

Thank you