PDA

View Full Version : Dynamic fields and columns in a grid



messyOne
24 Aug 2012, 5:29 AM
Hi,

I want to build a grid with indefinite count of columns in ExtJS 4.1. The data should be passed by an AJAX request. At the moment I generate the ExtJS code with PHP but this anything but pretty.

Has anyone an example or anything for me?

vietits
24 Aug 2012, 5:48 AM
Try this:


Ext.Ajax.request({
...
success: function(response){
var columnDefs = Ext.decode(response.responseText);
var grid = Ext.create('Ext.grid.Panel', {
...
columns: columnDefs,
...
});
}
});

messyOne
27 Aug 2012, 12:14 AM
Thank you! It works. Here my sample code for anyone who has the same problem.

ExtJS code


Ext.onReady(function() {

/**
* create grid
*
* @return void
* @param column data in ExtJS format
*/
var createGrid = function(columndata) {
grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: columndata,
stripeRows: true,
height:180,
width:500,
renderTo: 'grid-example',
title:'Straw Hats Crew'
});
}

/**
* create store
*
* @return void
* @param field data in ExtJS format
* @param values in ExtJS format
*/
var createStore = function(fielddata, values) {
store = Ext.create('Ext.data.ArrayStore', {
fields: fielddata,
data: values
});
}

/**
* get the data via ajax request
*
* @return void
*/
Ext.Ajax.request({
url: 'data.php',
success: function(response){
var data = Ext.decode(response.responseText);

createStore(data.fielddata, data.values);
createGrid(data.columndata);
}
});

});



<?php

echo json_encode(
array(
'columndata' => array(
array('id' => 'id', 'header' => 'ID', 'width' => 30, 'sortable' => true, 'dataIndex' => 'id'),
array('header' => 'Name', 'width' => 100, 'dataIndex' => 'name'),
array('header' => 'Position', 'width' => 100, 'dataIndex' => 'position'),
array('header' => 'Ambition', 'width' => 250, 'dataIndex' => 'ambition')
),
'fielddata' => array(
array('name' => 'id', 'type' => 'int'),
array('name' => 'name'),
array('name' => 'position'),
array('name' => 'ambition')
),
'values' => array(
array(1,'Monkey D Luffy','Captain','I will become the pirate king'),
array(2,'Roronoa Zoro','Swordman','Become the greatest swordman'),
array(3,'Sanji','Cook','Find all blue'),
array(4,'Usopp','Sniper','Become the greatest warrior'),
array(5,'Nami','Navigator','Draw map of the world')
)
)
);

alex9311
7 Jan 2014, 11:01 AM
If you were coding in MVC, where would the Ajax request code go?

DeanSheppard
19 Oct 2015, 11:21 AM
The contoller

Inaamullah
3 Jan 2019, 10:36 AM
can any body provide a fiddle for adding a grid inside a grid column?