Help to add dynamic column expander grid

[lassaad]

I want to add dynamic columns when row is expanded.
How can I do this, please help.
this is portion of my code

var expander = new Ext.grid.RowExpander({
      remoteDataMethod : expandGrid
 });

function expandGrid(record,index){
    var _expanderGrid = new Ext.grid.GridPanel({
        renderTo          : Ext.get('remData'+ index),
        autoHeight        : true,
        border            : false,
        id                : 'expanded'+ id,
        disableSelection  : false,
        autoHeight        : true,
        collapsible       : false,
        disableSelection  : true,
        enableHdMenu      : true,
        trackMouseOver    : false,
        autoExpandColumn  : 1,
        autoSizeColumns   : true,
        store             : Store,
        cm                : cm,
        stripeRows        : 'true',
        loadMask          : true,
        trackMouseOver    : true,
        viewConfig        : {forceFit : true}
    });
};

[lassaad]

This is what I do, but without good result

function expandGrid(record,index){
    InitRecords();
    var readerExpander = new Ext.data.JsonReader(
    {       
        id: 'ID', 
        root: "records", 
        totalProperty: "totalCount"
    },
        data[0]
    )

    var storeExpander = new Ext.data.Store
    ({
        url         : location.href.replace ('#', '')
        ,reader     : readerExpander
    });

    var cm =    CreateColumnModel (data[1]);
    //gridPanel-----------------------------------------------
    var _expanderGrid = new Ext.grid.GridPanel({
        renderTo          : Ext.get('remData'+ index),
        autoHeight        : true,
        border            : false,
        id                : 'expanded'+ id,
        disableSelection  : false,
        autoHeight        : true,
        collapsible       : false,
        disableSelection  : true,
        enableHdMenu      : true,
        trackMouseOver    : false,
        autoExpandColumn  : 1,
        autoSizeColumns   : true,
        store             : storeExpander,
        cm                : cm,
        stripeRows        : 'true',
        loadMask          : true,
        trackMouseOver    : true,
        viewConfig        : {forceFit : true}
    });
};
function InitRecords() 
{
    var Reader = new Array();
    var Headers = new Array();
    Ext.Ajax.request({
            url            : location.href.replace ('#', '')
            ,params        : { Action : 'getRegroupementColumns'}
            ,loadMask    : true
            ,method        : 'post'
            ,success    : function(response, opts)
            { 
                temp = response.responseText.split(',')
                storeExpander.loadData(eval ('[' + response.responseText + ']'));
                for (i=0; i < storeExpander.getCount(); i++)
                {
                    node =  storeExpander.getAt(i);
                    Reader.push(node.data.Designation);
                    Headers[i]= node.data.Designation + "," + node.data.Valeur;
                }
                data.push(Reader);
                data.push(Headers);
             }
            ,failure: function(){
                //mytab.el.unmask();
                alert('Erreur'+ 'Problème de connexion au serveur.');
            }
    });
}
 function CreateColumnModel(Headers)
{
    var colsArray = new Array ();
    for(var i=0; i < Headers.length; i++)
    {
        var node =  Headers[i].split(',');
        var col = {
            header      : node[0]
            ,width      : 120
            ,dataIndex  : node[1]
        }
        colsArray.push(col);
    }
    var     columnModel = new Ext.grid.ColumnModel (colsArray);
    // Retourner le résultat.
    return columnModel;
}

[lassaad]

this is what I do but wihtout good result

function expandGrid(record,index){
    InitRecords();
    var readerExpander = new Ext.data.JsonReader(
    {       
        id: 'ID', 
        root: "records", 
        totalProperty: "totalCount"
    },
        data[0]
    )

    var storeExpander = new Ext.data.Store
    ({
        url         : location.href.replace ('#', '')
        ,reader     : readerExpander
    });
    var colsArray = new Array ();
    var data = data[1];
    for(var j=0; j < data.length; j++)
    {
        var node =  data[j].split(',');
        var col = {
            header      : node[0]
            ,width      : 120
            ,dataIndex  : node[1]
        }
        colsArray.push(col);
    }
    var     cm = new Ext.grid.ColumnModel (colsArray);
//    var cm =    CreateColumnModel (data[1]);
    //gridPanel-----------------------------------------------
    var _expanderGrid = new Ext.grid.GridPanel({
        renderTo          : Ext.get('remData'+ index),
        autoHeight        : true,
        border            : false,
        id                : 'expanded'+ id,
        disableSelection  : false,
        autoHeight        : true,
        collapsible       : false,
        disableSelection  : true,
        enableHdMenu      : true,
        trackMouseOver    : false,
        autoExpandColumn  : 1,
        autoSizeColumns   : true,
        store             : storeExpander,
        cm                : cm,
        stripeRows        : 'true',
        loadMask          : true,
        trackMouseOver    : true,
        viewConfig        : {forceFit : true}
    });
};
function InitRecords() 
{
    var Reader = new Array();
    var Headers = new Array();
    Ext.Ajax.request({
            url            : location.href.replace ('#', '')
            ,params        : { Action : 'getRegroupementColumns'}
            ,loadMask    : true
            ,method        : 'post'
            ,success    : function(response, opts)
            { 
                temp = response.responseText.split(',')
                storeExpander.loadData(eval ('[' + response.responseText + ']'));
                for (i=0; i < storeExpander.getCount(); i++)
                {
                    node =  storeExpander.getAt(i);
                    Reader.push(node.data.Designation);
                    Headers[i]= node.data.Designation + "," + node.data.Valeur;
                }
                data.push(Reader);
                data.push(Headers);
             }
            ,failure: function(){
                //mytab.el.unmask();
                alert('Erreur'+ 'Problème de connexion au serveur.');
            }
    });
}

[lassaad]

this is what I do but does not work

function expandGrid(record,index){
    var id = record.data.ID; 
    __InitRecords(id);
    var readerExpander = new Ext.data.JsonReader(
    {       
        id: 'ID',
        root: "records", 
        totalProperty: "totalCount"
    },
        data[0]
    )

    var storeExpander = new Ext.data.Store
    ({
        url         : location.href.replace ('#', '')
        ,reader     : readerExpander
    });
    var colsArray = new Array ();
    var _data = data[1];
    for(var j=0; j < data.length; j++)
    {
        var node =  _data[j].split(',');
        var col = {
            header      : node[0]
            ,width      : 120
            ,dataIndex  : node[1]
        }
        colsArray.push(col);
    }
    var     cm = new Ext.grid.ColumnModel (colsArray);
//    var cm =    CreateColumnModel (data[1]);
    //gridPanel-----------------------------------------------
    var _expanderGrid = new Ext.grid.GridPanel({
        renderTo          : Ext.get('remData'+ index),
        autoHeight        : true,
        border            : false,
        id                : 'expanded'+ id,
        disableSelection  : false,
        autoHeight        : true,
        collapsible       : false,
        disableSelection  : true,
        enableHdMenu      : true,
        trackMouseOver    : false,
        autoExpandColumn  : 1,
        autoSizeColumns   : true,
        store             : storeExpander,
        cm                : cm,
        stripeRows        : 'true',
        loadMask          : true,
        trackMouseOver    : true,
        viewConfig        : {forceFit : true}
    });
};
function __InitRecords(id) 
{
    var Reader = new Array();
    var Headers = new Array();
    Ext.Ajax.request({
            url            : location.href.replace ('#', '')
            ,params        : { Action : 'getRegroupementColumns',selected_id:id}
            ,loadMask    : true
            ,method        : 'post'
            ,success    : function(response, opts)
            { 
                ds.loadData(eval ('[' + response.responseText + ']'));
                for (i=0; i < ds.getCount(); i++)
                {
                    node =  ds.getAt(i);
                    Reader.push(node.data.Designation);
                    Headers[i]= node.data.Designation + "," + node.data.Valeur;
                }
                data.push(Reader);
                data.push(Headers);
             }
            ,failure: function(){
                //mytab.el.unmask();
                alert('Erreur'+ 'Problème de connexion au serveur.');
            }
    });
}

[lassaad]

function expandGrid(record,index){
    var id = record.data.ID; 
    var Reader = new Array();
    var Headers = new Array();
    Ext.Ajax.request({
            url            : location.href.replace ('#', '')
            ,params        : { Action : 'getRegroupementColumns',selected_id:id}
            ,loadMask    : true
            ,method        : 'post'
            ,success    : function(response, opts)
            { 
                var d = response.responseText.split("_"); 
                Reader.push("Annee");
                for (var i=0; i < d.length; i++)
                {
                    Reader.push(d[i]);
                    Headers.push(d[i]);
                }
                var readerExpander = new Ext.data.JsonReader(
                {       
                    id: 'ID',
                    root: "records", 
                    totalProperty: "totalCount"
                },
                    Reader
                )

                var storeExpander = new Ext.data.Store
                ({
                    url         : location.href.replace ('#', '')
                    ,reader     : readerExpander
                });
                var colsArray = new Array ();  
                var colAnnee = {
                        header      : "Annee"
                        ,width      : 100
                        ,dataIndex  : "Annee"
                    }
                  colsArray.push(colAnnee);
                for(var j=0; j < Headers.length; j++)
                {
                   
                    var colRegroup = {
                        header      : Headers[j]
                        ,width      : 100
                        ,dataIndex  : Headers[j]
                    }
                    colsArray.push(colRegroup);
                }
                var     cm = new Ext.grid.ColumnModel (colsArray);
                var _expanderGrid = new Ext.grid.GridPanel({
                    renderTo          : Ext.get('remData'+ index),
                    autoHeight        : true,
                    border            : false,
                    id                : 'expanded'+ id,
                    disableSelection  : false,
                    autoHeight        : true,
                    collapsible       : false,
                    disableSelection  : true,
                    enableHdMenu      : true,
                    trackMouseOver    : false,
                    autoExpandColumn  : 1,
                    autoSizeColumns   : true,
                    store             : storeExpander,
                    cm                : cm,
                    stripeRows        : 'true',
                    loadMask          : true,
                    trackMouseOver    : true,
                    viewConfig        : {forceFit : true}
                });
                storeExpander.load({params:{action:"GetDataOfExpanderRow",selected_id:id}});
             }
            ,failure: function(){
                //mytab.el.unmask();
                alert('Erreur'+ 'Problème de connexion au serveur.');
            }
           
    });
};

[Inaamullah]

Hello Dear,
I want a grid inside the grid column(for every cell of this), how can I implement it? please provide a way with fiddle?