ExtJS Dynamic Generation Table

When you display data on the Web, you experience the uncertainty of the number of columns and rows in the grid. How do you create a table based on data dynamics?

Extjs's JSON data gives us a nice, easy way to do it.

To create a grid you need to determine its number of columns, and then you can determine the number of rows based on the number of data.

Seeing someone using a method is to put the attributes and data of the column together in JSON data, which can achieve results, but it is not difficult to find, in this case, it is difficult to page or update the data in the table.

In fact, we can combine the ExtJS of the official online access to the fixed number of methods to dynamically generate tables.

First, the information from the server side back to the column is encapsulated into JSON, and the tabular data is obtained by another AJAX request, because the column is already available, so it can be encapsulated in a store. This is done, build grid needed, store, and cm

Demo source code is as follows: (due to the introduction of the code is clear, I wrote the data died in JS):

Ext.onready (function () {

Note:this is a example showing simple state management. During Development,

It is generally the best to disable state management as dynamically-generated IDs

Can change across page loads, leading to unpredictable results. The developer

Should ensure that stable state IDs are the set for stateful components the real apps.

Ext.state.Manager.setProvider (New Ext.state.CookieProvider ());

var myData =[[1,1,1,1],

[2,2,2,2]

];

Example of custom renderer function

function Change (val) {

if (val > 0) {

Return ' + val + ';

}else if (Val < 0) {

Return ' + val + ';

}

return Val;

}

Example of custom renderer function

Function Pctchange (val) {

if (val > 0) {

Return ' + val + '% ';

}else if (Val < 0) {

Return ' + val + '% ';

}

return Val;

}

Create the data store

var Fielddatas = "{' Colummodle ': [" +

"{' header ': ' seq ', ' dataindex ': ' Number ', ' Width ': 40}," +

"{' Header ': ' Code ', ' dataindex ': ' Text1 '}," +

"{' header ': ' Name ', ' dataindex ': ' Info1 '}," +

"{' Header ': ' Price ', ' dataindex ': ' Special1 '}" +

'], ' fieldsnames ': [{name: ' number '}, ' +

' {name: ' Text1 '}, {name: ' Info1 '}, ' +

"{name: ' Special1 '}]}";

var json = new Ext.util.JSON.decode (Fielddatas);

var cm = new Ext.grid.ColumnModel (json.colummodle);

var store = new Ext.data.SimpleStore ({

Fields:json.fieldsNames

});

Store.loaddata (MyData);

var ds = new Ext.data.JsonStore ({

Data:store.toSource (),

Fields:json.fieldsNames

// });

Create the Grid

var Grid = new Ext.grid.GridPanel ({

HEIGHT:200,

width:400,

Region: ' Center ',

Split:true,

Border:false,

Store:store,

cm:cm

});

Grid.render (' grid-example ');

});