Results 1 to 6 of 6

Thread: Help to add dynamic column expander grid

  1. #1
    Sencha User
    Join Date
    Dec 2008
    Posts
    46
    Vote Rating
    1
      0  

    Default Help to add dynamic column expander grid

    I want to add dynamic columns when row is expanded.
    How can I do this, please help.
    this is portion of my code
    Code:
    var expander = new Ext.grid.RowExpander({
          remoteDataMethod : expandGrid
     });
    Code:
    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}
        });
    };

  2. #2
    Sencha User
    Join Date
    Dec 2008
    Posts
    46
    Vote Rating
    1
      0  

    Default

    This is what I do, but without good result
    Code:
    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'+ 'Problme 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 rsultat.
        return columnModel;
    }

  3. #3
    Sencha User
    Join Date
    Dec 2008
    Posts
    46
    Vote Rating
    1
      0  

    Default

    this is what I do but wihtout good result
    Code:
    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'+ 'Problme de connexion au serveur.');
                }
        });
    }

  4. #4
    Sencha User
    Join Date
    Dec 2008
    Posts
    46
    Vote Rating
    1
      0  

    Default

    this is what I do but does not work
    Code:
    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'+ 'Problme de connexion au serveur.');
                }
        });
    }

  5. #5
    Sencha User
    Join Date
    Dec 2008
    Posts
    46
    Vote Rating
    1
      1  

    Default Solved

    Code:
    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'+ 'Problme de connexion au serveur.');
                }
               
        });
    };

  6. #6
    Sencha User
    Join Date
    Jul 2018
    Posts
    5
    Vote Rating
    0
      0  

    Default

    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?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •