ExtJS dynamically generated tables

ExtJS dynamically generated tables

When you display data in the Web, you encounter a situation in which the grid has an indeterminate number of columns and rows. How to create a table based on data dynamics?
ExtJS's JSON data gives us a good, simple way to do this.
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.
See someone using a method is that the column properties and data together in the JSON data, this can achieve the effect, but it is not difficult to find, so it is difficult to page or update the data in the table.
In fact, we can combine the fixed number of access methods on the ExtJS website to dynamically generate tables.
First, by Ajax, the information from the server back column, encapsulated into JSON, tabular data through another AJAX request to obtain, because the column has been obtained, so you can encapsulate this into a store. So it's done, the store, and the CM, needed to generate the grid.
The demo source code is as follows: (I wrote the data in JS due to the introduction of the codes):



Ext.onready (function () {

Note:this is a example showing simple state management. During Development,
It's generally best-disable state management as dynamically-generated IDs
Can change across page loads, leading to unpredictable results. The developer
Should ensure that stable state IDs is set for stateful the components in real apps.


Ext.state.Manager.setProvider (New Ext.state.CookieProvider ());//Initialize the EXT state manager to record the user's operating state in a cookie, if not enabled, like refresh Will save the current state, instead of reloading, as if the window is useful to drag the panel, if you start Ext.state.Manager.setProvider (new Ext.state.CookieProvider ()) after dragging, Even after the refresh the panel will still be in position after you drag. If not enabled, it will be arranged in the default arrangement.

var myData =[[1,1,1,1],
[2,2,2,2]
];

Example of custom renderer function
function Change (val) {
if (val > 0) {
Return ' <span style= ' color:green; > ' + val + ' </span> ';
}else if (Val < 0) {
Return ' <span style= ' color:red; > ' + val + ' </span> ';
}
return Val;
}
Example of custom renderer function
Function Pctchange (val) {
if (val > 0) {
Return ' <span style= ' color:green; > ' + val + '%</span> ';
}else if (Val < 0) {
Return ' <span style= ' color:red; > ' + val + '%</span> ';
}
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);


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 ');
});

ExtJS dynamically generated tables