PDA

View Full Version : Dinamically define columns in a panel Grid



13 Nov 2014, 11:39 AM
Hello i'm using sencha architect.
What i'd like to do (and i still don't understand why it's not working) is to retrieve a JSON message, create an ad-hoc store and then create a grid connected to such store with its ad-hoc columns.


I correcty defined the store and correctly inserted the value. Indeed the store contains the values that i inserted and the field of the store are correctly defined.
I did it in such way. It works, maybe it's not the best, but it works.


var fieldstring = "";

for(var i=0; i < fielddata.length; i++){
var value = fielddata[i];

fieldstring += "{ name : '"+value+"'}";

if(i < fielddata.length -1 )
fieldstring += ",";
}


/*craete the store*/
var store = Ext.create('Ext.data.ArrayStore', {
fields: fieldstring
});


Then I (pre)defined a grid panel as below. The idea is to have an object that i'm going to model as i want.



Ext.define('Myapp.view.GridProfile', {
extend: 'Ext.grid.Panel',

requires: [
'Ext.grid.View',
'Ext.grid.column.CheckColumn'
],

title: 'My Grid Panel',
columnLines: true,

initComponent: function() {
var me = this;

Ext.applyIf(me, {
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'id',
text: 'Id'
},
{
xtype: 'gridcolumn',
dataIndex: 'name',
text: 'Name'
},
{
xtype: 'checkcolumn',
text: 'MyCheckColumn'
}
]
});

me.callParent(arguments);
}

});


And finally i tried to connect such panel with the store. the store contains surely two fields: one called "id" and anothe called "name".



var grid = Ext.create('Myapp.view.GridProfile');
grid.store = store;
grid.getView().refresh();


So, two problems arise.

I don't see anything on the grid (notice that i see the grid, but i see it empty). At least, i'm expecting to see filled the columns "id" and "name" (the first two). But it seems that nothing's happening.
how to say to the grid to automatically retrieve the columns?



May someone of you help me to find out a solution?

14 Nov 2014, 7:20 AM
I have solve the problem. Here's the complete solution for those who will have the same problem.

You will see different kind of columns. That's just because in my case i needed some checkbox columns.


/*data is my json (sub)-message from server*/

/*there is at least one message incoming.*/
var firstprofile = data[0];
console.log(firstprofile);
/*so we get its fields*/
var fielddata = Ext.Object.getKeys(firstprofile);
console.log(fielddata);

/*need to parse the string to create a proper field*/
/*generate the array*/
var fieldstring = [];

for(var i=0; i < fielddata.length; i++){
var value = fielddata[i];
if( value.substring(0,4) === "can_" ){
fieldstring.push( { name: value, type: 'boolean' } );
} else {
fieldstring.push( { name: value, type: 'string' } );
}
}


/*here we create an ad-hoc store*/
var store = Ext.create('Ext.data.Store', {
fields: fieldstring
});


/*create the columns for the grid*/
var columnString = [];

for(var i=0; i < fielddata.length; i++){
var value = fielddata[i];
if( value.substring(0,4) === "can_" ){
columnString.push( { xtype: 'checkcolumn',dataIndex: value, text: value, width: 100, flex:1, sortable: false } );
} else {
columnString.push( { xtype: 'gridcolumn',dataIndex: value, text: value, width: 100, flex:1, sortable: false } );
}
}

/*here we create the grid*/
var grid = Ext.create('Ext.grid.Panel',{
title: 'Profile list',
columns: columnString,
store: store
});

/*add the values in the store*/
store.add(data);

return grid;