My extjs-based curd page

1. query the list page

/*** Interface user management list page ** @ Class userinfoview * @ extend Ext. panel */userinfoview = ext. extend (ext. panel, {// condition search panelsearchpanel: NULL, // data display panelgridpanel: NULL, // gridpanel data storestore: NULL, // header toolbar topbar: NULL, // constructor: function (_ CFG) {Ext. applyif (this, _ CFG); this. initdatasource (); this. inituicomponents (); // call the parent class to construct userinfoview. superclass. constructor. call (this, {ID: 'userinfoview', T Itle: 'interface user management', Region: 'center', layout: 'border', items: [this. searchpanel, this. gridpanel]}) ;}, // initialize the component inituicomponents: function () {This. initsearchpanel (); this. inittoolbarui (); this. initgridui () ;}});/*** initialize the conditional search panel */userinfoview. prototype. initsearchpanel = function () {This. searchpanel = new Ext. formpanel ({layout: 'hbox', height: 35, Region: 'north', bodystyle: 'padding: 6 p x 10 p x 6 p x 10 p X', border: false, defaults: {xtype: 'label', border: false, margins: {top: 0, left: 0, bottom: 0, right: 30 }}, items: [{text: 'username', margins: {top: 3, left: 0, bottom: 0, right: 10 }}, {Name: 'q _ username_s_lk ', xtype: 'textfield'}, {text: 'administrative division Code', margins: {top: 3, left: 0, bottom: 0, right: 10 }},{ name: 'q _ xzqh_s_lk ', xtype: 'textfield'}, {text: 'status', margins: {top: 3, left: 0, bottom: 0, right: 10 },{ hiddenname: 'q _ userstatus_n_eq ', xtype: 'combo', store: New Ext. data. simplestore ({fields: ['value', 'text'], data: [['', '-select-'], ['0 ', 'enabled '], ['1', 'deactivated']}), displayfield: 'text', valuefield: 'value', triggeraction: 'all', mode: 'local', width: 100, Editable: false, value: ''}, {xtype: 'call', text: 'query', iconcls: 'search', Handler: this. search. createcallback (This)}]}) ;};/*** initialize toolbar UI */userinfoview. prototype. inittoolbarui = function () {This. topbar = new Ext. toolbar ({Height: 30, bodystyle: 'text-align: left', items: [{iconcls: 'btn-add', text: 'add user', xtype: 'button ', Handler: This. createrecord}, {iconcls: 'btn-del', text: 'delete user', xtype: 'call', Handler: This. delrecords, scope: This}]}) ;};/*** initialize the grid list UI */userinfoview. prototype. initgridui = Function () {// operation column this. rowactions = new Ext. UX. grid. rowactions ({header: 'operation', width: 80, actions: [{iconcls: 'btn-del', QTip: 'delete', style: 'margin: 0 3px 0 3px '}, {iconcls: 'btn-edit', QTip: 'edit', style: 'margin: 0 3px 0 3px'}]}); this. rowactions. on ('action', this. onrowaction, this); // select the column var Sm = new Ext. grid. checkboxselectionmodel (); // normal display column var CM = new Ext. grid. columnmodel ({columns: [Sm, n EW Ext. grid. rownumberer (), {header: 'useid', dataindex: 'useid', hidden: true}, {header: 'username', dataindex: 'username'}, {header: 'Access number', dataindex: 'wscode'}, {header: 'status', dataindex: 'userstatus'}, this. rowactions], defaults: {sortable: True, menudisabled: false, width: 100}); // grid panel this. gridpanel = new Ext. grid. gridpanel ({ID: 'userinfogrie', Region: 'center', striperows: True, tbar: Th Is. topbar, store: This. store, trackmouseover: True, disableselection: false, loadmask: True, autoheight: True, CM: cm, SM: Sm, plugins: This. rowactions, viewconfig: {forcefit: True, AutoFill: true}, bbar: New Ext. pagingtoolbar ({pagesize: 25, store: This. store, displayinfo: True, displaymsg: 'Current page record index {0}-{1}, total {2} records ', emptymsg: "No record currently"}); // listens to double-click event of Row, Row Double clickthis. gridpanel. addlistener ('R Owdblclick', function (grid, rowindex, e) {grid. getselectionmodel (). each (function (REC) {New userinfoform ({useid: REC. data. useid, displaytype: true }). show () ;}) ;};};/***** initialize the data source */userinfoview. prototype. initdatasource = function () {// configure the data source this. store = new Ext. data. jsonstore ({URL: _ ctxpath + "/WS/listuserinfo. do ", root: 'result', totalproperty: 'totalcounts', remotesort: True, fields: [{Name :' Useid', type: 'int'}, 'username', 'wscode', 'userkey', 'xzqh', 'userstatus', 'timea', 'timem ', 'activetime'], listeners: {load: function (store, records, option) {store. each (function (record) {Switch (record. get ('userstatus') {Case 0: record. set ('userstatus', 'enabled '); break; Case 1: record. set ('userstatus', 'deactivated '); break ;};}) ;}}); this. store. setdefaultsort ('useid', 'desc'); // load data this. store. load ({Params: {Start: 0, limit: 25}) ;};/*** Add User */userinfoview. prototype. createrecord = function () {New userinfoform (). show () ;};/*** operation column handler * @ Param gridpanel * @ Param record * @ Param action * @ Param row * @ Param Col */userinfoview. prototype. onrowaction = function (gridpanel, record, action, row, col) {Switch (Action) {Case 'btn-del': // delete this. delbyids (record. data. useid); break; Case 'btn-edit': // edit this. Editrecord (record); break; default: break; }};/*** edit * @ Param record */userinfoview. prototype. editrecord = function (record) {New userinfoform ({useid: record. data. useid }). show () ;};/*** batch Delete * @ Param record */userinfoview. prototype. delbyids = function (IDS) {Ext. MSG. confirm ('Confirm information', 'Are you sure you want to delete the selected record? ', Function (BTN) {If (BTN = 'yes') {Ext. ajax. request ({URL: _ ctxpath + '/WS/multideluserinfo. do ', Params: {IDs: IDS}, method: 'post', success: function (response, options) {Ext. UX. toast. MSG ('Operation information', 'interface user deleted successfully '); Ext. getcmp ('userinfogrid '). getstore (). reload () ;}, failure: function (response, options) {Ext. UX. toast. MSG ('Operation info', 'Operation error. Please contact the administrator! ') ;}};}}) ;};/*** Toolbar-Batch Delete */userinfoview. prototype. delrecords = function () {var gridpanel = ext. getcmp ('userinfogrie'); var selectrecords = gridpanel. getselectionmodel (). getselections (); If (selectrecords. length = 0) {Ext. UX. toast. MSG ("info", "select the record to delete! "); Return;} var IDs = array (); For (VAR I = 0; I <selectrecords. length; I ++) {IDs. push (selectrecords [I]. data. useid);} This. delbyids (IDS) ;};/*** search panel -- query function * @ Param self */userinfoview. prototype. search = function (Self) {If (self. searchpanel. getform (). isvalid () {// Form Verification self. searchpanel. getform (). submit ({waitmsg: 'submitting query', URL: _ ctxpath + '/WS/listuserinfo. do ', success: function (formpanel, Action) {var result = ext. util. JSON. decode (action. response. responsetext); self. gridpanel. getstore (). loaddata (result );}});}};

2. Add, modify, and view the page

/*** Interface user management -- add, modify, details page ** @ Param useid interface user ID. If not, whether the new panel * @ Param displaytype is in view mode is displayed, if the value is true, the view panel is displayed. Otherwise, the editing panel * @ Class userinfoform * @ extend ext is displayed. window */userinfoform = ext. extend (ext. window, {// embedded formpanelformpanel: NULL, // interface user name Username: '', // constructor: function (_ CFG) {Ext. applyif (this, _ CFG); this. inituicomponents (); userinfoform. superclass. constructor. call (this, {ID: 'userinfoformwin', la Yout: 'fit ', resizable: false, draggable: false, closable: false, maximizable: false, items: This. formpanel, modal: True, autoheight: True, width: 400, Title: This. useid? (This. displaytype? 'View interface users': 'edit interface users'): 'add interface users', buttonalign: 'center', buttons: This. buttons}) ;}, // initialize the component inituicomponents: function () {This. initformpanelui (); this. initbuttons (); // when editing and viewing, load the data corresponding to the form if (this. useid! = NULL & this. useid! = 'Undefined') {This. formpanel. getform (). Load ({URL: _ ctxpath + '/WS/getuserinfo. do? Useid = '+ this. useid}) ;}},});/*** initialize the form panel UI */userinfoform. prototype. initformpanelui = function () {This. formpanel = new Ext. formpanel ({layout: 'form', bodystyle: 'padding: 10px 10px 10px 10px ', border: false, URL: _ ctxpath +'/WS/saveuserinfo. do ', ID: 'userinfoform', autoheight: True, ults: {anchor: '2014, 98%'}, defaulttype: 'textfield ', items: [{fieldlabel: 'id', name: 'userinfo. useid', ID: 'Useid', readonly: True, xtype: This. useid? 'Textfield': 'ddn'}, {fieldlabel: 'username', name: 'userinfo. username', ID: 'username', readonly: This. displaytype, allowblank: false, blanktext: 'user name cannot be blank ', maxlength: 50, maxlengthtext: 'user name cannot exceed 50 characters'}, {fieldlabel: 'Access number ', name: 'userinfo. wscode', ID: 'wscode', readonly: This. displaytype, allowblank: false, blanktext: 'Access number cannot be blank ', maxlength: 20, maxlengthtext: 'Access number cannot exceed 20 characters'}, {fieldlabel: 'key', Name: 'userinfo. userkey', ID: 'userkey', readonly: This. displaytype, allowblank: false, blanktext: 'Access number cannot be blank ', maxlength: 200, maxlengthtext: 'Access number cannot exceed 200 characters'}, {fieldlabel: 'Administrative region Code', name: 'userinfo. xzqh ', ID: 'xzqh', readonly: This. displaytype, allowblank: false, blanktext: 'Access number cannot be blank ', RegEx:/\ W {6}/, regextext: 'administrative region code is 6 characters '}, {fieldlabel: 'status', xtype: 'combo ', hiddenname: 'userinfo. userstat Us ', ID: 'userstatus', store: [['0', 'enabled'], ['1', 'deactivated'], Editable: false, triggeraction: 'all', value: '0', readonly: This. displaytype}, {fieldlabel: 'valid date to ', name: 'userinfo. activetime ', ID: 'activetime', xtype: 'datefield', Editable: false, minvalue: new date (), format: 'y, M, dday', readonly: This. displaytype, allowblank: false, blanktext: 'valid date cannot be blank '}, {fieldlabel: 'creation time', name: 'userinfo. Timea', ID: 'timea', readonly: True, xtype: This. useid? 'Textfield': 'ddn'}, {fieldlabel: 'Last modified time', name: 'userinfo. timem', ID: 'timem', readonly: True, xtype: This. useid? 'Textfield': 'den den '}]}) ;};/*** initialization button */userinfoform. prototype. initbuttons = function () {This. buttons = [{text: 'save', iconcls: 'btn-save', Handler: This. save. createcallback (this. formpanel, this), hidden: This. displaytype}, {text: 'reset ', iconcls: 'btn-reset', Handler: This. reset. createcallback (this. formpanel), hidden: This. displaytype}, {text: 'cancel', iconcls: 'btn-cancel', Handler: This. cancel. Createcallback (this)}];};/*** save form */userinfoform. prototype. save = function (formpanel, window) {If (formpanel. getform (). isvalid () {// execute Form Verification formpanel. getform (). submit ({method: 'post', waitmsg: 'submitting data... ', success: function (FP, Action) {Ext. UX. toast. MSG ('Operation information', 'Operation information' is saved successfully! '); Var gridpanel = ext. getcmp ('userinfogrie'); If (gridpanel! = NULL) {gridpanel. getstore (). reload ();} window. close () ;}, failure: function (FP, Action) {Ext. messageBox. show ({Title: 'Operation information', MSG: 'An error occurred while saving the information. Please contact the administrator! ', Buttons: ext. messageBox. OK, icon: ext. messageBox. error}); window. close () ;}};}};/*** reset form */userinfoform. prototype. reset = function (formpanel) {formpanel. getform (). reset () ;};/*** cancel form */userinfoform. prototype. cancel = function (window) {window. close ();};