GroupHeader from json

[ivone_agusria_tarigan]

hai extjs..

i have load header coloumn from database and then i want to make header coloumn into groupHeader

Example like this..

| 1000  |2000 |
-----------------------------------------------
| a |b  | a | b|
-----------------------------------------------

|1000 | 2000 | from json store

here is my code

 function apply() {
                Ext.Ajax.request({
                    url: baseHref + newhid.fluid_consumption_analysis.controller + '/get_header',
                    params: this.getForm().getValues(),
                    scope: this,
                    success: function(resp, options) {
                        resp = Ext.decode(resp.responseText);
                        countTab = resp.length;
                        var colHeader = new Array();
                        for (i=0;i<countTab;i++) {
                            colCount = resp[i].colHeader.length;
                            Ext.getCmp('cpt_grid').destroy();
                            var grid = new newhid.fluid_consumption_analysis.grid();
                            grid.render('fluid_analysis'); 
                            for(c=0;c<colCount;c++) {
                                comp_mod = resp[i].colHeader[c].header;
                                arr = resp[i].colHeader[c].header;
                                storex = (Array({'name':resp[i].colHeader[c].header}));
                                grid.addColumn({name:storex},{header: comp_mod});
                            }    
                                 
                            
                        }
                        
                        
                        
                    }
                    
                });
            }

i use

Ext.override(Ext.grid.ColumnModel,{
    addColumn: function(column, colIndex){
        if(typeof column == 'string'){
            column = {header: column, dataIndex: column};
        }
        var config = this.config;
        this.config = [];
        if(typeof colIndex == 'number'){
            config.splice(colIndex, 0, column);
        }else{
            colIndex = config.push(column);
        }
        this.setConfig(config);
        return colIndex;
    },
    removeColumn: function(colIndex){
        var config = this.config;
        this.config = [config[colIndex]];
        config.splice(colIndex, 1);
        this.setConfig(config);
    }
});
Ext.override(Ext.grid.GridPanel,{
    addColumn: function(field, column, colIndex){
        if(!column){
            if(field.dataIndex){
                column = field;
                field = field.dataIndex;
            } else{
                column = field.name || field;
            }
        }
        this.store.addField(field);
        return this.colModel.addColumn(column, colIndex);
    },
    removeColumn: function(name, colIndex){
        this.store.removeField(name);
        if(typeof colIndex != 'number'){
            colIndex = this.colModel.findColumnIndex(name);
        }
        if(colIndex >= 0){
            this.colModel.removeColumn(colIndex);
        }
    }
});

and this my groupHeader

var header = new Ext.ux.plugins.GroupHeaderGrid({
rows: [
[
{},
{header : }

]
]
});

i wan to ask how i can filled header to get from json..
thanks

[Condor]

Why are you using removeColumn and addColumn for this? This is really inefficient when doing multiple columns.

You should:
- Assign a new columngroup rows array to grid.getColumnModel().rows
- Assign the new columns with grid.getColumnModel().setConfig(newColumns)

ps. Why are you using Ext.ux.plugins.GroupHeaderGrid? Are you still on Ext 3.0 or older?

[ivone_agusria_tarigan]

thanks for your reply..
how i can used grid.getColoumnModel.rows() in my code

can you give example how to use grid.getColoumnModel.rows

i used ext 2.3..
thanks.

[ivone_agusria_tarigan]

i dont know how to use grid.getColumnModel().rows but i try used groupColumnHeader plugin..
and display error

this is my code to get header from database from ajax request

function apply() {
                Ext.Ajax.request({
                    url: baseHref + newhid.fluid_consumption_analysis.controller + '/get_header',
                    params: this.getForm().getValues(),
                    scope: this,
                    success: function(resp, options) {
                        resp = Ext.decode(resp.responseText);
                        countTab = resp.length;
                        var colHeader = new Array();
                        for (i=0;i<countTab;i++) {
                            colCount = resp[i].colHeader.length;
                            Ext.getCmp('cpt_grid').destroy();
                            var grid = new newhid.fluid_consumption_analysis.grid();
                            grid.render('fluid_analysis'); 
                            for(c=0;c<colCount;c++) {
                             // get Header(array) ---
                                comp_mod = resp[i].colHeader[c].header;
                            
                                arr = resp[i].colHeader[c].header;
                                storex = (Array({'name':resp[i].colHeader[c].header}));
                                generateConfig();
                                
                            }    
                                 
                            
                        }
                        
                        
                        
                    }
                    
                });

and this is function generateConfig()

 function generateConfig(){
        var arr,
                colspan_header = [['Cum Usage'],['Fluid Rate'],['Cycle']]
            
        Ext.iterate(comp_mod, function(colspan_header){
            continentGroupRow.push({
                header: comp_mod,
                align: 'center',
                colspan: colspan_header
            });
            
        })
    }

and

  var header = new Ext.ux.grid.ColumnHeaderGroup({
        rows: [comp_mod]
    });

[ivone_agusria_tarigan]

i dont know how to use grid.getColoumnModel.rows
i try to used groupColoumnHeader

and displaying error..
Ext.iterate is not function

[Condor]

Ext.iterate was added in Ext 3 to iterate over arrays or objects, but because it's used here for arrays only, you can replace it with Ext.each.

[ivone_agusria_tarigan]

Ext.iterate was added in Ext 3 to iterate over arrays or objects, but because it's used here for arrays only, you can replace it with Ext.each.

i have try use Ext.each but displaying some error with XML and i dont know..
but thanks for ur reply..

i try example from ext 3.1 GroupColoumnHeader and implementation with my project..
but i dont know GroupColoumnnHeader running with Ext 2.3

[Condor]

i try example from ext 3.1 GroupColoumnHeader and implementation with my project..
but i dont know GroupColoumnnHeader running with Ext 2.3

Are you using Ext 2.3 or 3.1?

If you are using Ext 3.1 then you should be using ColumnHeaderGroup and not GroupColoumnHeader.

[ivone_agusria_tarigan]

im using ext 2.3

[Condor]

OK, and what kind of JSON data is your server returning.