PDA

View Full Version : dynamic grid extjs 4.1



crocop21
10 Aug 2012, 5:01 AM
Hi all, i wanna implement a dynamic grid in extjs 4.1 with MVC, which loaded the columns and record dynamically, but i dont know the logic, how need to be working i mean, if exist some method or funtion who can make more easy way everything. i would appreciate some help. thanks

harman
10 Aug 2012, 5:45 AM
crocop21 what exactly do you mean by 'dynamic'?
I take it as you want the server to send the data to the grid.
If so you can find various samples here on sencha
http://www.sencha.com/products/extjs/examples/

F (http://www.sencha.com/products/extjs/examples/)or example if you want to use json format you need to configure your proxy as below



var gridStore = new Ext.data.Store({
model: 'gridModel',
proxy: {
type: 'ajax',
url: 'yourURL.json'
reader: {
type: 'json',
root: 'yourRoot'
}
}
});


this will send an ajax call for json data.

crocop21
10 Aug 2012, 5:52 AM
crocop21 what exactly do you mean by 'dynamic'?
I take it as you want the server to send the data to the grid.
If so you can find various samples here on sencha
http://www.sencha.com/products/extjs/examples/


(http://www.sencha.com/products/extjs/examples/)
I mean create my grid not from my extjs, otherwise from my php, data model and grid column . thanks for the reply.

Farish
10 Aug 2012, 6:00 AM
you can first make an AJAX call to get the grid columns info from the server. from this, you can create the grid columns and the store. then you can load the store with the data you want to display. Here is example code which uses JSON data from the server to create the grid and store:


Ext.Ajax.request({
url: 'yourURL',
success: function(response) {
var text = response.responseText;
var decodedText = Ext.decode(text);
create_grid_and_store(decodedText);
}
});

function create_grid_and_store(data)
{
columns = data.columns;

storeFields = [];
gridColumns = [];

for(var i=0; i<columns.length; i++)
{
var columnName = columns[i].columnName;
var storeField = columns[i].storeFieldName;

storeFields[i] = {};
storeFields[i].name = storeField;
storeFields[i].type = 'text';

gridColumns[i] = {};
gridColumns[i].text = columnName;
gridColumns[i].width = 100;
gridColumns[i].dataIndex = storeField;
}

store = new Ext.data.Store({
fields: storeFields,
data: [],
autoLoad: false
});

grid = lastGrid = Ext.create('Ext.grid.Panel', {
enableColumnMove: false,
store: store,
columns: gridColumns,
autoScroll: true,
height: 650
});
}


This would expect a JSON string formatted like:

{columns: [{"columnName":"column1", "storeFieldName":"field1"}, {"columnName":"column2", "storeFieldName":"field2"}, {"columnName":"column3", "storeFieldName":"field3"}, ...]}

scottmartin
10 Aug 2012, 10:53 AM
Here are some other threads for you to review on this topic:

http://www.sencha.com/forum/showthread.php?136362-Extjs-4-Dynamic-Model
http://stackoverflow.com/questions/6213621/extjs4-load-grid-columns-dynamically
http://elvishsu66.blogspot.com/2011/05/dynamic-gridpanel-for-extjs-4.html
http://neiliscoding.blogspot.com/2011/09/extjs4-dynamically-add-columns.html
http://www.sencha.com/forum/showthread.php?131256-A-simple-MySQL-table-editor

Regards,
Scott.

luisparada
11 Aug 2012, 8:31 AM
This post also should be marked as "Best Answer"...