PDA

View Full Version : Dynamically Generating the column structure for Grid



2 Nov 2009, 12:08 AM
Hi All,

I am relative new to ExtJs. I am doing some R & D on Gridpanel. I have return a simple function that return me the Ext.grid.GridPanel object that I am using somewhere in my application



function getReport(patterCode){
var store = new Ext.data.Store({
autoLoad: {params:{start:0, limit:6}},
proxy: new Ext.data.HttpProxy({
url: 'http://localhost/TestPage.aspx?code=V9Sw2-QuickLinks-r-MyLinks}),
reader: new Ext.data.JsonReader({
root: 'reportData',
totalProperty: 'totalRecords',
idProperty: 'Column1',
fields: ['Column1']
})
});
var grid = new Ext.grid.GridPanel({
width:350,
height:250,
border:false,
frame:false,
trackMouseOver:false,
autoExpandColumn: 'Column1',
stripeRows: true,
store: store,
header:false,
hideHeaders:true,
hideLabel:true,
shadow:true,
shadowOffset:10,
columns: [
{id:'Column1', width: 50, sortable: true, dataIndex: 'Column1'}
],

bbar: new Ext.PagingToolbar({
store: store,
pageSize:500,
displayInfo:true
})
});
return grid;
}



In above example I am getting the Json array using "http://localhost/TestPage.aspx?code=V9Sw2-QuickLinks-r-MyLinks" to generate the Grid. In this case I know the column structure i.e Json arrary simply return a single column "Column1". So I have written the code accordingly with appropriate column name.

Now suppose above url returns "n" number of column that I don't know in advance then how do i need to modify above code so that it will generate the column model structure based on the Json array return by url.

Regards
Amol Lokhande

BitPoet
2 Nov 2009, 12:29 AM
Have a look at this thread (http://www.extjs.com/forum/showthread.php?t=82723), it should set you on the right track.

2 Nov 2009, 1:35 AM
Hi BitPoet,

I have json returning from server in following format


{totalRecords: 3,
reportData: [

{"Column1":
'<ul class="linklist"><li class="quicklinks"><a target="_self" style="font-size:8pt; font-weight:normal;" href="/ASI/page.aspx?code=52013&TopicID=2086">Kaiser SoCa-Pre-existing Conditions</a><a href="/ASI/Tools/UserAdmin/User_Favorite.aspx?strPatternCode=52013&strTopicID=2086"><img src="/images/v8/links/delete.gif" width="6" height="6" border="0px" alt="Delete Quick Link" /></a></li></ul>'},

{"Column1":
'<ul class="linklist"><li class="quicklinks"><a target="_self" style="font-size:8pt; font-weight:normal;" href="/ASI/page.aspx?code=52013&TopicID=2085">Kaiser SoCa-Exclusions / Limitations</a><a href="/ASI/Tools/UserAdmin/User_Favorite.aspx?strPatternCode=52013&strTopicID=2085"><img src="/images/v8/links/delete.gif" width="6" height="6" border="0px" alt="Delete Quick Link" /></a></li></ul>'},

{"Column1":
'<ul class="linklist"><li class="quicklinks"><a target="_self" style="font-size:8pt; font-weight:normal;" href="/ASI/page.aspx?code=52013&TopicID=2067">Kaiser SoCa-Acupuncture Services</a><a href="/ASI/Tools/UserAdmin/User_Favorite.aspx?strPatternCode=52013&strTopicID=2067"><img src="/images/v8/links/delete.gif" width="6" height="6" border="0px" alt="Delete Quick Link" /></a></li></ul>'}]}

I have used following code from your post but it is not showing anything in the grid nor giving any error


function getReport(patterCode){
var callsStore = new Ext.data.JsonStore({
url: 'http://localhost/ASI/Page.aspx?code=V9Sw2-QuickLinks-r-MyLinks&Indexmode=0&xslt=X2e_ExtReport&rowxslt=X2e_ExtRow',
storeId: 'myStore',
root: 'reportData',
listeners: {
metachange: function(store, meta) {
var g = Ext.getCmp('callsGrid')
var cm = g.getColumnModel();
cm.setConfig(meta.colModel);
g.reconfigure(store, cm);
}
}
});
var colModel = new Ext.grid.ColumnModel({
defaults: {
align: 'left',
risizable: false,
sortable: false,
width: 150
}
});
var callsGrid = new Ext.grid.GridPanel({
id: 'callsGrid',
width:350,
height:250,
frame: true,
border: true,
store: callsStore,
colModel: colModel,
loadMask: false,
//stripeRows: true,
listeners: {
render: {
fn: function(){
callsStore.load({
params: {
// calls or puts
r: 'c',
// ticker
t: 'GS',
// low ticker
srl: 170,
// high ticker
srh: 185
}
});
}
}
}
});
return callsGrid;
}

Can you please let me know where I am missing

Regards
Amol Lokhande

BitPoet
2 Nov 2009, 4:45 AM
Ah, I see. The best bet would be to generate the correct column model in the backend aspx and assign it to a property in the metaData property of the json reply, then you could approach it like in the thread I pointed you to. If that isn't an option you need to calculate it yourself in the JsonStore's "load" event handler and call setConfig+reconfigure from there.