Extjs dynamic form template

// <Reference path = "http://www.cnblogs.com/Resources/PublicJs/vswd-ext_2.0.2.js"/>

Var pagesize = 10; // page size

Var record = Ext. data. Record. create ([
{Name: 'id', type: 'int '},
{Name: 'name', type: 'string '},
{Name: 'age', type: 'int '},
{Name: 'zhiwu', type: 'string '},
{Name: 'zhichen', type: 'string '},
{Name: 'unitname', type: 'string '},
{Name: 'signature', type: 'string '}
]);

Var fields = [
{Name: 'id', type: 'int '},
{Name: 'name', type: 'string '},
{Name: 'age', type: 'int '},
{Name: 'zhiwu', type: 'string '},
{Name: 'zhichen', type: 'string '},
{Name: 'unitname', type: 'string '},
{Name: 'signature', type: 'string '}
];

Var toolbar = new Ext. Toolbar ({
Items :[
"-",
{
Text: "add ",
Tooltip: "add Progress ",
Handler: function (){
Var n = Jr_MembersGrid.getStore (). getCount (); // obtain the total number of rows.
Var p = new record ({// create a row
Id: n + 1

});

Jr_MembersGrid.stopEditing (); // stop editing
Ds. insert (n, p); // insert to the last row
Jr_MembersGrid.startEditing (n, 1); // start to edit cell 1
}
},"","-","",{
Text: "delete ",
Tooltip: "deletion progress ",
Handler: function (){
Var rows = Jr_MembersGrid.getSelectionModel (). getSelections ();
If (rows. length = 0 ){
Ext. Msg. alert ("prompt", "select a row ");
}
Else {
Ext. MessageBox. confirm ('prompt box ',' Are you sure you want to perform this operation? ', Function (btn ){
If (btn = 'yes ')
{
Var lstAddRecord = new Array ();

Jr_MembersGrid.getStore (). each (function (record ){

LstAddRecord. push (record. data );
});
// Alert (Ext. encode (lstAddRecord ));

Ext. Ajax. request ({

Url: 'default. aspx ',
Method: 'post ',
Params: {strJson: Ext. encode (lstAddRecord )}

});

//
If (rows)
{
For (var I = 0; I <rows. length; I ++)
{
Ds. remove (rows [I]);
}
// This. getEl (). dom. submit ();
}

}
});
}
}
}
]
});

// Create table data
Var data = [

];

Var ds = new Ext. data. Store ({// configure the dataset

AutoLoad: {params: {start: 0, limit: pagesize }}, // page when loading
Reader: new Ext. data. JsonReader ({
Fields: fields,
Root: "data ",
Id: "id ",
TotalProperty: "totalCount"
}, Record ),
Proxy: new Ext. data. HttpProxy ({
Url: "Data. aspx ",
Method: "POST"
})
});

Var sm = new Ext. grid. CheckboxSelectionModel ();

Var Jr_MembersGrid = new Ext. grid. EditorGridPanel ({

Store: ds,
Cm: new Ext. grid. ColumnModel ({
Defaults :{
Align: 'center', // center the text
Width: 120,
Height: 60,
Sortable: true
},
Columns :[
//
Sm,
{Header: 'sequence number ', dataIndex: 'id', width: 50, sortable: false },
{Header: 'name', dataIndex: 'name', width: 100, sortable: true,
Editor: new Ext. form. TextField ()
// Renderer: Ext. util. Format. dateRenderer ('y, m, dday ')
},
/* {Header: 'End time', dataIndex: 'endtime', width: 150, sortable: true,
Editor: new Ext. form. DateField ({
Format: 'Y-m-d ',
Editable: false
}),
Renderer: Ext. util. Format. dateRenderer ('y, m, dday ')
},*/
{Header: 'age', dataIndex: 'age', width: 100, sortable: true,
Editor: new Ext. form. NumberField ()

},
{Header: 'job', dataIndex: 'zhiwu', width: 100, sortable: true,
Editor: new Ext. form. TextField ()

},
{Header: 'title', dataIndex: 'zhichen', width: 100, sortable: true,
Editor: new Ext. form. TextField ()

},
{Header: 'unit (abbreviation) ', dataIndex: 'unitname', width: 200, sortable: true,
Editor: new Ext. form. TextField ()

},
{Header: 'Division of Labor ', dataIndex: 'fengong', width: 320, sortable: true,
Editor: new Ext. form. TextField ({

})

}
]
}),

Bbar: new Ext. PagingToolbar ({
Store: ds,
PageSize: pagesize,
DisplayInfo: true,
DisplayMsg: "{0} -- {1} {2} records in the current record ",
EmptyMsg: "No record is displayed ",
PrevText: "Previous Page ",
NextText: "Next page ",
LastText: "last page ",
FirstText: "First page ",
BeforePageText: "Current page ",
AfterPageText: "{0} pages in total"
}),
Tbar: toolbar,
Sm: sm,
Id: 'jr _ MembersGrid ',
EnableColumnMove: false,
EnableColumnResize: false,
ColumnLines: true,
AutoHeight: true,
AutoWidth: false,
ClickToEdit: 0, // click it to edit
EnableHdMenu: false,
// Frame: true, // adding this parameter will make the pagination bar misplaced when 360 is displayed.
Style: 'margin: 10px 0px 0px 5px ',
EnableColumnHide: false,
TrackMouseOver: true,
StripeRows: true // zebra Effect
});