PDA

View Full Version : Dynamic grid panel



Sejal
6 May 2010, 4:25 AM
hi
I want to create dynamic grid panel .
behavior is the grid panel is showing with column headers, but no data rows being rendered...? :-/
In that i have created dynamic column header and it works fine.
But my data is not displayed . Data is coming form server.

// following is my grid
var xml_data_proxy = new Ext.data.HttpProxy({
api: {
read : abc.php
}

});

var createRecord=new Array();
createRecord[0]={name: 'id'};

var coumnGridArr=new Array();
var queryFields = '';
for(var i=0;i< xml_data_column.length; i++){

createRecord[i+1]={name: xml_data_column[i].id,'type' : 'string'}

// dynamic column array
coumnGridArr[i]={
header: xml_data_column[i].title,
width: 140,
menuDisabled : true ,
dataIndex: xml_data_column[i].id
};
}


var queryFields = Ext.data.Record.create(createRecord);

var xml_data_reader = new Ext.data.JsonReader({
totalProperty: 'total',
successProperty: 'success',
message:'message',
root: 'data'
},createRecord);



var xml_data_store = new Ext.data.JsonStore({
proxy: xml_data_proxy,
reader: xml_data_reader,
fields : queryFields

});

var userColumns =new Ext.grid.ColumnModel(coumnGridArr);



var grid = new Ext.grid.GridPanel({
store: xml_data_store,
cm: userColumns,
loadMask: true,
autoScroll: true,
height: 350,
width: 400,
bbar :new Ext.PagingToolbar({
store:xml_data_store ,
displayInfo:true ,
pageSize:2
}),
title: 'Data',
listeners:{
afterrender:function(){
this.store.load();
}
}
});


// following is my column

[{"id":"name","title":"Name"},{"id":"company","title":"Company"},{"id":"email","title":"Email"},{"id":"phone_no","title":"Phone no"},{"id":"location","title":"Location"},{"id":"subject","title":"Subject"},{"id":"message","title":"Message"}]

// following is my store data

{"success":true,"message":"Loading Data","total":4,"records":[{"name":"Sejaldfg","company":"Pi Visionsdfg","email":"[email protected]","phone_no":"dfg","location":"dfg","subject":"Testdfg","message":"Testingdfghg"},{"name":"Sejaldfgfgh","company":"Pi Visionsdfgfgh","email":"[email protected]","phone_no":"dfgh","location":"dfgfghf","subject":"fghTestdfg","message":"Testingdfghgfgh"}]}

ridhopahwanae
24 May 2010, 4:14 AM
I have task to make dynamic grid panel..... and when i search i found your thread.
I modified your code to make dynamic grid
and this is my code
It's work


//Ridho Pahwana Erwandhani
Ext.onReady(function(){
var getTabel = new Ext.data.Store({
proxy: new Ext.data.HttpProxy(
{
url: 'getDataTabel.php',
method: 'POST'
}),
baseParams:{action:'getTabel'},
reader: new Ext.data.JsonReader(
{
root: 'results',
totalProperty: 'total'
},

[
{name:'SOURCE_DATA',type:'string'},{name:'FIELDS_DATA',type:'string'}]
)
});
getTabel.load();
getTabel.on({
'load':{
fn: function(store, records, options){
var createRecord=new Array();
var fieldTabel='';
var columnGridArr=new Array();
for(var i=0;i<getTabel.getCount(); i++){

columnGridArr[i]={
header: getTabel.getAt(i).get('FIELDS_DATA'),
width: 70,
menuDisabled : true ,
dataIndex: getTabel.getAt(i).get('FIELDS_DATA')
};

createRecord[i]={name:getTabel.getAt(i).get('FIELDS_DATA'),type:'string'};
if (i==0){
fieldTabel=getTabel.getAt(i).get('FIELDS_DATA');
}else{
fieldTabel=fieldTabel+','+getTabel.getAt(i).get('FIELDS_DATA');}


}
var columnGridArr =new Ext.grid.ColumnModel(columnGridArr);

var getDataTabel = new Ext.data.Store({
proxy: new Ext.data.HttpProxy(
{
url: 'getDataTabel.php',
method: 'POST'
}),
baseParams: {
tabel:getTabel.getAt(0).get('SOURCE_DATA'),
field:fieldTabel,
action:'getDataTabel'
},
reader: new Ext.data.JsonReader(
{
root: 'results',
totalProperty: 'total'
},createRecord
)
});

getDataTabel.load();

var SimpleListingEditorGrid = new Ext.grid.GridPanel({
renderTo:'report',
title:'Hasil Report',
store: getDataTabel,
collapsible: true,
layout: 'fit',
plain: true,
cm: columnGridArr,
frame:true,
width:850,
height:450

});

}
}
});
});
and this is my JSON data



({"total":"1","results":[{"SOURCE_DATA":"TBL_MEASURE_COMP_LINK a","FIELDS_DATA":"LN_KAVAIL"},{"SOURCE_DATA":"","FIELDS_DATA":"CLLI"},{"SOURCE_DATA":"","FIELDS_DATA":"IVALDATE"}]})


({"total":"1","results":[{"LN_KAVAIL":"0","CLLI":"jktpngn","IVALDATE":"28-OCT-09"},{"LN_KAVAIL":"0","CLLI":"jktpngn","IVALDATE":"28-OCT-09"},{"LN_KAVAIL":"0","CLLI":"jktpngn","IVALDATE":"28-OCT-09"},{"LN_KAVAIL":"0","CLLI":"jktpngn","IVALDATE":"28-OCT-09"},{"LN_KAVAIL":"0","CLLI":"jktpngn","IVALDATE":"28-OCT-09"},{"LN_KAVAIL":"0","CLLI":"jktpngn","IVALDATE":"28-OCT-09"},{"LN_KAVAIL":"0","CLLI":"jktpngn","IVALDATE":"28-OCT-09"},{"LN_KAVAIL":"0","CLLI":"jktpngn","IVALDATE":"28-OCT-09"},{"LN_KAVAIL":"0","CLLI":"jktpngn","IVALDATE":"28-OCT-09"},{"LN_KAVAIL":"0","CLLI":"jktpngn","IVALDATE":"28-OCT-09"},{"LN_KAVAIL":"0","CLLI":"jktpngn","IVALDATE":"28-OCT-09"},{"LN_KAVAIL":"0","CLLI":"jktpngn","IVALDATE":"28-OCT-09"},{"LN_KAVAIL":"0","CLLI":"jktpngn","IVALDATE":"28-OCT-09"},{"LN_KAVAIL":"1800","CLLI":"jktpngn","IVALDATE":"28-OCT-09"},{"LN_KAVAIL":"0","CLLI":"jktpngn","IVALDATE":"28-OCT-09"},{"LN_KAVAIL":"0","CLLI":"jktpngn","IVALDATE":"28-OCT-09"},{"LN_KAVAIL":"0","CLLI":"jktpngn","IVALDATE":"28-OCT-09"},{"LN_KAVAIL":"0","CLLI":"jktpngn","IVALDATE":"28-OCT-09"},{"LN_KAVAIL":"0","CLLI":"jktpngn","IVALDATE":"28-OCT-09"}]})