PDA

View Full Version : Adding dynamic columns in the GridPanel



bhaskar1605
8 Aug 2009, 1:30 AM
Hi,

Im trying to add the dynamic columns in the GridPanel. But Im getting error : mygrid is undefined. Attaching my code below


Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
];

// example of custom renderer function
function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}

// example of custom renderer function
function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}

// create the data store
var store = new Ext.data.SimpleStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
store.loadData(myData);


var mygrid = Ext.getCmp('grid1');
var cm = mygrid.getColumnModel();

cm.config.push({"header":"Company","dataIndex":"company","width":200,"editor":false});
cm.config.push({"header":"Price","dataIndex":"price","width":200,"editor":false});
mygrid.reconfigure(cm);


// create the Grid
var grid = new Ext.grid.GridPanel({
id:'grid1',
store: store,
columns: cm,
stripeRows: true,
autoExpandColumn: 'company',
height:350,
width:600,
title:'Array Grid'
});

grid.render('grid-example');

grid.getSelectionModel().selectFirstRow();
});


what was the wrong in my above red color code.

Please help me on this.


Thanks,
Bhaskar.

Animal
8 Aug 2009, 1:33 AM
reconfigure takes 2 params.

Animal
8 Aug 2009, 1:34 AM
But it's obvious!

Do you HAVE a Component with the id "grid1" created when you attempt to use getCmp to access it???????????????????????

bhaskar1605
8 Aug 2009, 1:37 AM
Ya, i have a component with id : grid1



var grid = new Ext.grid.GridPanel({
id:'grid1',
store: store,
columns: cm,
stripeRows: true,
autoExpandColumn: 'company',
height:350,
width:600,
title:'Array Grid'
});

Animal
8 Aug 2009, 1:38 AM
"when you attempt to access it using getCmp

READ your code.

It's not enough to just write it.

danh2000
8 Aug 2009, 1:39 AM
I think the key point from Animal's post was when you attempt to use getCmp

You are attempting to get the grid before you define it.

bhaskar1605
8 Aug 2009, 1:47 AM
After modifying the code below



// create the Grid
var grid = new Ext.grid.GridPanel({
id:'grid1',
store: store,
columns: cm,
stripeRows: true,
autoExpandColumn: 'company',
height:350,
width:600,
title:'Array Grid'
});

var mygrid = Ext.getCmp('grid1');
var cm = mygrid.getColumnModel();

cm.config.push({"header":"Company","dataIndex":"company","width":200,"editor":false});
cm.config.push({"header":"Price","dataIndex":"price","width":200,"editor":false});
mygrid.reconfigure(cm);



Im getting the below error :'config' is null or not an object.

Animal
8 Aug 2009, 3:21 AM
Yes, and that's because reconfigure TAKES TWO args.

bhaskar1605
8 Aug 2009, 5:24 AM
Still im getting the problem, now i m getting error in ext-all.ja line no 144, 'undefined' is null or not an Object after adding the below line

mygrid.reconfigure(store,cm1);

bhaskar1605
8 Aug 2009, 9:39 PM
Please any body can give example code this kind of functionality. I have worked regarding this whole night, but i could not get the solution.

Animal
8 Aug 2009, 11:14 PM
You worked the whole night???????

Why? Randomly trying incantations without thinking?

Why not READ and UNDERSTAND the code?

Run it in your mind.

You are passing something which is undefined to that call.

And you can SEE when something is undefined, because when you READ the code, you will see that it's... not defined!

bhaskar1605
9 Aug 2009, 12:59 AM
Any thing wrong in the below piece of code:



var mygrid = Ext.getCmp('grid1');
var colModel = grid.getColumnModel();

var tmpConfig = colModel.config;
tmpConfig.push({"header":"Price","dataIndex":"price","width":200,"editor":false});

colModel.setConfig(tmpConfig, true);
mygrid.reconfigure(grid.getStore(), new Ext.grid.ColumnModel(tmpConfig));



im getting the error 'config' is null or not an object in the line

var tmpConfig = colModel.config;

bhaskar1605
9 Aug 2009, 6:42 AM
Finally my problem got solved for adding the columns dynamically, but now my problem is how to add the fields to SimpleStore. I have searched in the forum also, but i could not get the correct link, please can any body give the right link.

sixkiller
12 Aug 2009, 6:38 AM
Any thing wrong in the below piece of code:



var mygrid = Ext.getCmp('grid1');
var colModel = grid.getColumnModel();

var tmpConfig = colModel.config;
tmpConfig.push({"header":"Price","dataIndex":"price","width":200,"editor":false});

colModel.setConfig(tmpConfig, true);
mygrid.reconfigure(grid.getStore(), new Ext.grid.ColumnModel(tmpConfig));

im getting the error 'config' is null or not an object in the line

var tmpConfig = colModel.config;

Can you please post how have you solved that problem? Thanks

chrizmaster
18 Aug 2009, 10:57 PM
I god damn hate people asking questions and then, if they get the solution doesn't post it...!!

chrishallowell
20 Aug 2009, 12:59 PM
I'm getting closer... But the header columns are not displayed correctly (See attached screenshot). It seems like the column headers aren't displaying the header text. Can someone help me please?
I have also tried:


var column1 =new Ext.data.Column({header :"Site", dataIndex :'SITENUM', width :100});
but I get: Ext.data.Column is not a constructor





var recData =[];


var columns =[];


var item =new Ext.data.Field({name:'PLANT', mapping:'PLANT'});


recData.push(item);


var item2 =new Ext.data.Field({name:'VALUE001', mapping:'VALUE001'});
recData.push(item2);

var myReader =new Ext.data.XmlReader({
record:'item'
},recData);

var store =new Ext.data.Store({


url :'data.xml',

reader: myReader


});


//************************************************************************************


var column1 =new Ext.data.Record({header :"Site", dataIndex :'SITENUM', width :100});

columns.push(column1);



var column2 =new Ext.data.Record({header :"RecNum", dataIndex :'VALUE001', width :100});

columns.push(column2);

var myGrid =new Ext.grid.GridPanel({
store : store,
sm:new Ext.grid.CellSelectionModel({
singleSelect:true,
listeners:{
cellselect:{fn:function(sm, RowIndex, colIndex ){
Ext.Msg.alert('Hi Mom');
}


}

}

}),columns : columns,//[


// {header: 'Site', dataIndex: 'PLANT', width: 100},
// {header: 'RecNum', dataIndex: 'VALUE001', width: 100}


// ],

fitcontainer:true,
height:200,
width:280,
renderTo:'example-grid4'
});


store.load();
myGrid.store.on('load',myGrid.autoSizeColumns,myGrid);