Ext3 dynamic list header implementation

This article summarizes the problems I encountered in the project and solutions.
The main implementations are as follows: 1. After the query conditions are entered, the table header is also queried Based on the query conditions;
2. This method also applies to the result of replacing each other with several fixed headers.

 

VaR colmarray = new array (); // first define an array var Nos = new Ext. grid. rownumberer ({header: 'no', width: 28}); colmarray [0] = Nos; // set the sequence number to the first column of the List var column = new Ext. grid. columnmodel (colmarray); // place the array in the column model of the grid.

 

This must be defined first.

function loadData() {Ext.Ajax.request({url : basepath + '/AcrmMCmCfgPoteQuery.json?orgIds='+orgIds.substring(1, 7)+"&combotypeValue1="+combotypeValue1+"&combotypeValue3="+combotypeValue3,success : function(a, b, c) {var record = Ext.decode(a.responseText);for(var i=0;i<record.json.data.length;i++){colMArray[i+1]={header:record.json.data[i].KEYS,sortable:true,width:120,align:'right',dataIndex:record.json.data[i].VALUES};}}});gridPanel.reconfigure(stores,column);}

 

In this example, only Ext. Ajax is transferred when "query" loaddata () is called. In the Ajax query table, two fields are returned: "keys" and "values", which are used as the header and the queried field names.

Second, the public reconfigure method of gridpanel is a store and column model (column model) for reconfiguration grid ). The view rebinds the object and refresh it.

* In factThe public method reconfigure of gridpanel is a very important method here. It is up to you to dynamically load the list header.

 

 

In addition, if you only need to replace several sets of headers, instead of retrieving headers from the database table, you can do the following:

VaR column = new Ext. grid. columnmodel ([nos, {header: 'customer No. ', sortable: True, dataindex: 'cust _ no', align: 'left', width: 120}, {header: 'Customer name', sortable: True, dataindex: 'cust _ name', align: 'left', width: 120}, {header: 'customer type', sortable: True, dataindex: 'ent _ idv_ind ', align: 'left', width: 100, align: 'center', Renderer: function (value) {If (value = '20140901 ') {return value = 'public customer';} else {return value = 'private customer'; }},{ header: 'Time deposit ', sortable: True, dataindex: 'cur _ save_amt ', align: 'left', width: 100, align: 'right', Renderer: Money ('2013')}, {header: 'monthly average daily deposit', sortable: True, dataindex: 'month _ avg_amt ', align: 'left', width: 100, align: 'right', Renderer: money ('000000')}, {header: 'annual average daily deposit', sortable: True, dataindex: 'year _ avg_amt ', align: 'left', width: 0,000.00, align: 'right', Renderer: Money ('000000')}, {header: 'Contact phone', sortable: True, dataindex: 'link _ phone', align: 'left', width: 100}, {header: 'authorization', sortable: True, dataindex: 'institution _ name', align: 'left', width: 100 }, {header: 'maintainer ', sortable: True, dataindex: 'mgr _ name', align: 'left', width: 100}]); var columns = new Ext. grid. columnmodel ([nos, {header: 'customer No. ', sortable: True, dataindex: 'cust _ no', align: 'left', width: 120}, {header: 'Customer name', sortable: True, dataindex: 'cust _ name', align: 'left', width: 120}, {header: 'customer type', sortable: True, dataindex: 'ent _ idv_ind ', align: 'left', width: 120, align: 'center', Renderer: function (value) {If (value = '20140901 ') {return value = 'public customer';} else {return value = 'private customer'; }},{ header: 'Time deposit ', sortable: True, dataindex: 'cur _ save_amt ', align: 'left', width: 120, align: 'right', Renderer: Money ('2013')}, {header: 'monthly average daily deposit', sortable: True, dataindex: 'month _ avg_amt ', align: 'left', width: 120, align: 'right', Renderer: money ('000000')}, {header: 'annual average daily deposit', sortable: True, dataindex: 'year _ avg_amt ', align: 'left', width: 0,000.00, align: 'right', Renderer: Money ('000000')}, {header: 'Contact phone', sortable: True, dataindex: 'link _ phone', align: 'left', width: 120}]);

Define two column models and write them directly in the query loaddata:

If (combotypevalue4 = 'd3 ') {// No gridpanel. reconfigure (stores, columns);} else {gridpanel. reconfigure (stores, column );}

That's all.