Extjs grid obtains dynamic columns from JSON

// Js File

Function ready (){
// Declare function variables
Var data;
Var quan = null;
// Add columns dynamically. This is the key code.
Var addColumn = function (){
This. fields = ''; // defines a field.
This. columns = ''; // defines the column
This. addColumns = function (name, caption, ishidden) // name: column_name
// Caption
// Comments;
{
If (this. fields. length> 0 ){
This. fields + = ',';
}
If (this. columns. length> 0 ){
This. columns + = ',';
}
This. fields + = "{name: '" + name + "', mapping: '" + name + "'}";
This. Columns + = '{header: "' + caption + '", dataindex: "' + name
+ '", Width: 100, sortable: True, hidden:' + ishidden + '}';
};
};
// Retrieve the column from the server and add it to columnmodel dynamically

Ext. Ajax. Request ({
URL: "getcyrycolumn ",
Success: function (response, option ){
If (response. responsetext = ""){
Return;
}
Data = new AddColumn (); // The current object is Data
VaR res = ext. util. JSON. Decode (response. responsetext );
For (VAR I = 0; I <res. length; I ++ ){
Var p = res [I];
If (p [0] = 'C _ id '){
Data. addColumns (p [0], p [1], true );
} Else {
Data. addColumns (p [0], p [1], false); // For example, p [0] indicates
// Userid
}
}
// Dynamically generate GridPanel
MakeGrid ();
},
Failure: function (){
Ext. Msg. alert ("message", "initialization data error ");
}
});
// Dynamically generate GridPanel

Var makeGrid = function (){
Var cm = new Ext. grid. ColumnModel (eval ('([' + data. columns + '])');
Cm. defaultSortable = true; // columns can be sorted.
Var fields = eval ('([' + data. fields + '])');
Var newStore = new Ext. data. Store ({
Proxy: new Ext. data. HttpProxy ({
Url: "getCyryData"
}),
Reader: new Ext. data. JsonReader ({
TotalProperty: "total ",
Root: "rows ",
Fields: fields
})
// Read the total number of data entries, objects, fields, etc.
});

Newstore. Load ({
Params :{
Start: 0,
Limit: 9
}
});
VaR pagingbar = new Ext. pagingtoolbar ({
Displayinfo: True,
Emptymsg: "No data display ",
Displaymsg: "displays {2} data records from {0} to {1} data records ",
Store: newstore,
Pagesize: 9
});
VaR gridpanel = new Ext. Grid. editorgridpanel ({
Title: "dynamically generating columnmodel ",
CM: cm,
Id: "grid_panel ",
// RenderTo: "id ",
Store: newStore,
Frame: true,
Border: true,
Layout: "fit ",
PageSize: 16,
AutoWidth: true,
Sm: new Ext. grid. RowSelectionModel ({
SingleSelect: true
}),
Height: 300,
Width: '200 ',
ViewConfig :{
ForceFit: true
},
Bbar: pagingBar
});

Var cb = new Ext. grid. RowSelectionModel ({
SingleSelect: true
// If the value is false, multiple rows can be selected; otherwise, only one row can be selected.
});

GridPanel. addListener ('rowclick', rowclickFn );
Function rowclickFn (grid, rowindex, e ){

Var store = Ext. getCmp ("grid_panel"). getStore ();

For (var I = 0, len = store. data. length; I <len; I ++ ){
Var data = store. getAt (rowindex). data; // data is an object corresponding to a record.
Quan = data ["c_id"];
Break;
}
}

// From Form
// ID card verification
Ext. Form. vtypes ['cardidyanval'] =/^ (\ D {15}) $ | ^ (\ D {17} [\ dxx] {1}) $ /;
Ext. Form. vtypes ['cardidyanmask'] = //;
Ext. Form. vtypes ['cardidyantext'] = 'your income is incorrect! ';
Ext. Form. vtypes ['cardidyany'] = function (v ){
Return Ext. Form. vtypes ['cardidyanval']. Test (v );
};
// Phone Verification

Ext. form. vtypes ['telyanval'] =/^ (0 \ D {2, 3})-) (\ D {7, 8}) (-(\ D {3 ,}))? $ /;
Ext. Form. vtypes ['telyantext'] = 'your income is incorrect! ';
Ext. Form. vtypes ['telany'] = function (v ){
Return Ext. Form. vtypes ['telyanval']. Test (v );
};
Form1 = new Ext. formpanel ({
Frame: true,
Title: "query ",
Width: 800,
AutoHeight: true,
FileUpload: true,
Frame: true,
Layout: "form", // The entire large form is form layout
LabelAlign: "right ",
Items :[{
Layout: "column ",
Items :[{
ColumnWidth:. 3,
Layout: "form ",
Items :[{
Xtype: 'textfield ',
Fieldlabel: 'unit sequence number ',
Width: 120,
Name: "dwid"
}]

},{
Columnwidth:. 3,
Layout: "form ",
Items :[{
Xtype: 'textfield ',
Name: 'job ',
FieldLabel: 'job ',
Width: 120
}]

},{
ColumnWidth:. 3,
Layout: "form ",
Items :[{

Xtype: 'textfield ',
Name: 'pname ',
FieldLabel: 'name ',
Width: 120
}]

}]
},{
Layout: "column ",
Items :[{
ColumnWidth:. 3,
Layout: "form ",
Items :[{
Xtype: 'textfield ',
FieldLabel: 'id card No ',
Width: 120,
Name: "cardid ",
Vtype: 'cardidyany'
}]

},{
ColumnWidth:. 3,
Layout: "form ",
Items :[{
Xtype: 'textfield ',
Name: 'tel ',
FieldLabel: 'landline phone ',
Width: 120,
Vtype: 'telany'
}]

},{
ColumnWidth:. 3,
Layout: "form ",
Items :[{
Xtype: 'datefield ',
FieldLabel: 'onboarding time ',
Name: "ruzhitime ",
Width: 120,
Format: 'Y-m-d ',
Editable: false

}]

}]
},{
Layout: "column ",
Items :[{
ColumnWidth:. 3,
Layout: "form ",
Items :[{
Xtype: 'datefield ',
Fieldlabel: 'departure time ',
Name: "lizhitime ",
Width: 120,
Format: 'Y-m-d ',
Editable: false
}]

}]
},{
Buttons :[{
Text: "details ",
Handler: function (){
Detail (quan );
}
},{
Text: "modify ",
Handler: function (){
Xiugai (quan );
}
},{
Text: "query ",
Handler: function (){

Var data1 = form1.getForm (). getValues (); // The result here is the direct volume of objects such as {foo: 123, bar: 'aaa'} (literal
// Object)
NewStore. baseParams = data1;
NewStore. load ();

}
},{
Text: "reset ",
Handler: function (){
Form1.getForm (). reset ();
}
}]
}, GridPanel]
});

Var window = new Ext. Window ({
Title: 'resize me ',
Width: 800,
Height: 500,
MinWidth: 300,
MinHeight: 200,
Layout: 'fit ',
Minimizable: true,
Maximizable: true,
Plain: true,
BodyStyle: 'padding: 5px ;',
ButtonAlign: 'center ',
Items: form1
});

Window. show ();
};
}
Ext. onReady (ready );

// Action Method

Map <String, Object> datalist = new HashMap <String, Object> ();
@ JSON
Public Map <String, Object> getDatalist (){
Return datalist;
}
@ JSON
Public void setDatalist (Map <String, Object> datalist ){
This. datalist = datalist;
}

// Obtain the header

@ Action (value = "getCyryColumn", results = {
@ Result (name = "success", location = "/servlet/UserServlet "),
@ Result (name = "failure", location = "/index. jsp ")
})
Public String getCyryColumn () throws Exception {
List <Object []> list = cyrytableService. getCyryColumn ();
ObjectMapper ob = new ObjectMapper ();
Message = ob. writeValueAsString (list). toLowerCase ();
Request. setAttribute ("msgg", message );
Return "success ";
}
 
// Obtain table data
@ Action (value = "getCyryData", results = {
@ Result (type = "json", name = "success", params = {"root", "datalist "}),
@ Result (name = "failure", location = "/index. jsp ")
})
Public String getCyryData (){
DateFormat format = new SimpleDateFormat ("MM/dd/yyyy ");
Format. setLenient (false );
String dwid = request. getParameter ("dwid ");
String job = request. getParameter ("job ");
String pname = request. getParameter ("pname ");
String cardid = request. getParameter ("cardid ");
String tel = request. getParameter ("tel ");
String ruzhitime1 = request. getParameter ("ruzhitime ");
String lizhitime1 = request. getParameter ("lizhitime ");

If (ruzhitime1 = null | ruzhitime1.equals ("")){
Ruzhitime1 = "";
} Else {
Try {

RuzhitimeSe = new Timestamp (format. parse (ruzhitime1). getTime ());

} Catch (ParseException e1 ){
E1.printStackTrace ();
}
}
If (ruzhitime1 = null | ruzhitime1.equals ("")){
Ruzhitime1 = "";
} Else {
Try {

LizhitimeSe = new Timestamp (format. parse (ruzhitime1). getTime ());

} Catch (ParseException e1 ){
E1.printStackTrace ();
}
}
ObjectMapper ob = new ObjectMapper ();
Try {
Rows = new ArrayList <Object []> ();
Rows = cyrytableService. getCyryData (1, 10, dwid, job, pname, cardid, tel, ruzhitime, lizhitime );
Datalist. put ("rows", rows );
Total = "10 ";
Success = true;
} Catch (Exception e ){
E. printStackTrace ();
}
Return "success ";
}

// Service method

Private String shql;
Private StringBuffer hql;

Public List <Object []> getCyryColumn () throws Exception {
Hql = new StringBuffer ("select new map (c. id as id, c. dwid as dwid, c. job as job, c. pname as pname, c. byname as byname, c. cardid as cardid, "+
"C. sex as sex, c. birthday as birthday, c. phone as phone, c. qq as qq, c. address as address, c. adddetail as adddetail, c. email as email, "+
"C. tel as tel, c. otherzj as otherzj, c. othercon as othercon, c. photo as photo, c. detail as detail, c. iiperson as iiperson," +
"C. idepname as idepname, c. itime as itime, c. ruzhitime as ruzhitime, c. lizhitime as lizhitime) from Bhcyrytable as c where 1 = 1 ");
Shql = hql. toString ();
Return cyrytableDao. GetColData (shql );
}

// Fuzzy search

Public List <Object []> getCyryData (final int currentPage,
Final int rows, String dwid, String job, String pname, String cardid,
String tel, Timestamp ruzhitime, Timestamp lizhitime) throws Exception {
List <Object> List = new arraylist <Object> ();
If (dwid! = NULL &&! Dwid. Equals ("")){
Hql. append ("and C. dwid like? ");
List. Add ("%" + dwid + "% ");
}
If (job! = NULL &&! Job. Equals ("")){
Hql. append ("and C. job like? ");
List. Add ("%" + job + "% ");
}
If (pname! = NULL &&! Pname. Equals ("")){
Hql. append ("and C. pname like? ");
List. Add ("%" + pname + "% ");
}
If (cardid! = NULL &&! Cardid. Equals ("")){
Hql. append ("and C. cardid like? ");
List. Add ("%" + cardid + "% ");
}
If (tel! = NULL &&! Tel. Equals ("")){
Hql. append ("and C. Tel like? ");
List. Add ("%" + Tel + "% ");
}
If (ruzhitime! = NULL &&! Ruzhitime. Equals ("")){
Hql. append ("and C. ruzhitime >=? ");
List. Add (ruzhitime );
}
If (lizhitime! = NULL &&! Lizhitime. Equals ("")){
Hql. append ("and C. lizhitime <=? ");
List. Add (lizhitime );
}
Shql = hql. tostring ();
Int inde = hql. lastindexof ("1 = 1 ");
Hql. Replace (INDE, hql. Length (),"");
Hql. append ("1 = 1 ");
Return cyrytabledao. findbyhql (shql, currentpage, rows, list. toarray ());
}

// Dao Layer Method

@ Suppresswarnings ("unchecked ")
Public list <object []> findbyhql (string hql) throws exception {
List <object []> List = NULL;
Session session = NULL;
Try {
Session = sessionFactory. openSession ();
Session. beginTransaction ();
// Data permission Filtering
/* Hql = QxFilter (hql );
If (hql. equals ("")){

Return null;
}*/

Query query = session. createQuery (hql );
List = query. list ();
Session. getTransaction (). commit ();

} Catch (Exception e ){
E. printStackTrace ();
} Finally {
Session. close ();
}
Return list;
}