Commonly used add, delete, modify and check operation codes in extJs_extjs

Copy code The code is as follows:

                                                                                                                                                                                                                              ;%@ include file="../extJs/CommonJs.jsp"%>
                                                                                             

//Set the default number of rows displayed on each page to 10

var QUERY_PAGE_SIZE = 10;

/**
* Author: Hua Hui
* Time: December 22, 2009
* Content: Add, delete, modify and check operations commonly used in extJs
*/
function searchQueryForm()
{> // Form is recommended to be set to a local variable when used. You can get Form

var QueryForm = NULL;
QueryForm = New Ext. Formpanel ({
ID: 'queryform', // Specify the ID
renderto: 'searchpanel' of Queryform, // // point to the DIV layer where Form is
Labelwidth: 70, // Label label the width occupation page. The percentage of
region:'north',
border:false, //To display the border of the panel's body element, falsely hide it (default is true)
badyBorder:false, //Display the panel's body Elements, hypothesis to hide it (the internal boundary of the default TRUE)
Labelign: 'Right', // Label label alignment method
Frame: true, // The round boundary of the custom panel, the border width 1px 1px 1px .Default is false
                                                                                                                                                                                              🎜>                                                                                                                                                                                                                                                                            through 🎜> items:[{
                                                                                 columnWidth:.5,
layout:'form',
items :{
                                                                                       xtype:'textfield',
fieldLabel:'user code',
maxLength:'50',
vtype:'specialChar',
anchor:'80%'
}
                                       ,{
                         columnWidth:.5,
                         layout:'form',
                         items:{
                             name:'userName',
                             hiddenName:'userName',
                             xtype:'textfield',
                             fieldLabel:'用户名称',
                             maxLength:'100',
                             vtype:'specialChar',
                             anchor:'80%'
                         }
                     }
                 ]
             }]
            });
        }
/**
* showUserForm(): Draw and add a form
*/
function showUserForm()
{
//Define variables as local variables to avoid generating a new object every time

var userForm = null; 'right',
border:false,
                                                                                                                                                                                                               ms:[
                                                                                                                                                     items:{
name:'userInfo.userId',
hiddenName:'userInfo.userId', //hiddenName dynamically binds the corresponding field in the database
              xtype:'textField', //xtype can Divided into three categories, textField is the control of the form field 🎜>                                                                                                                                                                                                                                                     BlankText: 'Fill in the user code', // Prompt message for empty text box maxLength:'50', //The maximum input allowed in the text box Length, minimum minLength
vtype:'specialChar',
anchor:'80%'
                                   ,{
columnWidth:'.8',
items:{
name:'userInfo.userName',                                                                                                                                                                                                                                    hiddenName:'userInfo.userName',
                    A> FieldLabel: 'User name & lt; font color = red & gt;*& lt;/font & gt;',
labelseparator: '',
Blanktext: 'Fill in the user name',
a llowblank: false,
                  maxLength:'100',                                                                                                                                                                                                                                                                                                                                                                                                                                             ; { name: 'userInfo.pwd',
Hiddenname: 'userInfo.pwd',
XType: 'TextField',
Inputtype: 'Password',
Fie ldlabel: 'User Password & LT ;font color=red>*',
labelSeparator:'',
blankText:'Fill in user password',
allowBlank:false,
maxLength:'12',
minLength:'6',
value:'123456', //User default secret
anchor:'1 00%'
                                                                                            ,{
columnWidth:'.8',
items:{
name:'rPwd',
HiddenName:'rPwd',
xtype:'textField',
inputType: 'password',
fieldLabel:'Confirm password*',
labelSeparator:'',
BlankText: 'Secrets entered twice must be the same',
allowBlank:false,
vtype:'pwdRange',
pwdRange:{begin:' userInfo.pwd',end:'rPwd'},
       maxLength:'12',
      anchor :'100%'
                                                                    
                                                                                                           
userForm = new Ext.FormPanel({
id:'editForm',
labelWidth:'80',
labelAlign:'right ',
                      border: false, false,
frame:true,
items:[
layout:'column',
items:[
{
columnWidth:'.8',
items:{
name:'userInfo.userId',
hiddenName:'userInfo.userId', //hiddenName dynamically binds the corresponding field in the database
          xtype:'textField', //xtype can be divided into three Class, textField is the control of the form field        readOnly:true, //The text box is read-only
disabled:true, // The text box is gray, different from other text box colors
MaxLength: '50 ', // The text box allows the maximum length of the input, the smallest minLength
// let the letter start, and only the letters and the number length of 2 to 12 can be existed

regex: /^[a-zA-Z]{1}([a-zA-Z0-9]|[_]){1,11}$/,
      regexText: 'User code must start with a letter, Length 2-12 digits!',
anchor:'90%'
}
,{
columnWidth:'.8',
items:{
name:'userInfo.userName',                                                                                                                                                                                                                                    hiddenName:'userInfo.userName',
                    A> FieldLabel: 'User Name',
LabelsePaator: ':',
Blanktext: 'Fill in the user name',
AllowBlank: False,
MaxLength: '100',
///> /// Contains only Chinese characters, numbers, letters, and underscores. It cannot start or end with an underscore

regex: /^(?!_)(?!.*?_$)[a-zA-Z0-9_u4e00-u9fa5] $/,
regexText: 'Contains only Chinese characters, numbers, letters, and underscores and cannot start and end with underscores!',
anchor:'90%'
} }
              },{                                                                                                                                                                                    :'.2',
items:{
hiddenName:"infoFill",
name:"infoFill",
xtype:'label',
html:'*',
labelSeparator:'',
anchor:'100%'
} }
,{
columnWidth:'.8',
items:{
name:'userInfo.pwd',                                                                                                                                                                                                                            hiddenName:'userInfo.pwd',
                                       ​​​labelSeparator:':',
blankText:'Fill in user password' ,
allowBlank:false,
maxLength:'12',
minLength:'6',
anchor:'90%'
}
},{
columnWidth: '.2',
items:{
hiddenName:"infoFill",
name:"infoFill",
xtype:'label',
html:'',
labelSeparator:'',
anchor:'100%'
}
,{
columnWidth:'.8',
items:{
name:'rPwd',
HiddenName:'rPwd',
xtype:'textField',
inputType: 'password',
fieldLabel:'Confirm password*',
labelSeparator:':',
BlankText: 'Secrets entered twice must be the same' ,
                                                                                                                                                                                                                                           allowBlank:false,                // vtype is the verification method, if it is a general verification, please If it is a special case, you can use regex
vtype:'pwdRange',
                                     maxLength:'12',
anchor:'90%'
}
columnWidth:'. 2',
items:{
hiddenName:"infoFill",
name:" infoFill",
xtype:'label',
html:'*',
labelSeparator:'',
anchor:'100%'
                                                                                                                       
/**
* onReady: The file is ready (before onload and image loading)
**/
Ext.onReady(function(){

searchQueryForm();
//Get query form

var queryForm = Ext .getCmp("queryForm").getForm(); Defaluts:{ border:false,bodyBorder:false,activeTab:0},
items:[queryForm,{id:'centerPanel',region:'center',height:document.body.clientHeight,contentEl:'mainDiv'}]
           }); /query information
var store = new Ext.data.Store({
url:'../user/doGetPageList.action', //action path
reader:new Ext.data.JsonReader({
root:'userList', //Parameters passed from struts2.0: User collection
      totalProperty:'rowTotal', //Parameters passed from struts2.0: Total number of rows of information
                                                                                                   through 🎜>      });

                                         **
* Layout set to border means the page will be divided into five parts, southeast, northwest, and middle
* This means the centerPanel is placed in the middle
*/
function getMsg()
{

}
/**
* callback: function called
**/
function submitForm() {
//Initialize grid
var grid = null;
//Checkbox
var sm = new Ext.grid.CheckboxSelectionModel({
dataIndex:'id',
width:'20 '
              );                                     The functionality of the cell's HTML tag. If not specified, the default renderer uses the raw data value.
                                                                                                                                                                             > var colM = new Ext.grid.ColumnModel(
Name',dataIndex:'userName',align:'center',sortabel:true},
      {header:'delete',dataIndex:'id',align:'center',renderer:function createButton(){
                 return '';}},
                                                                                                                                                                                                                                              {header:'edit',dataIndex:'userId',align:'center',renderer:function createButton(userId, metadata, record){ a style="cursor:hand" style="cursor:hand" onclick=updateForm(' userId ') >' record.get('userName') 'Information modification' '';}}]
);
// Get the query form

var Form = EXT.GETCMP ("QueryForm"). Getform ();

// determine whether to pass the verification , if not, please close it directly
                                                                                                                                                                           🎜>                                                                                        /**
* getLimitCount() : Get the number of rows per page for paging. If no value is passed, the default value will be used. When, execute function getMsg.Can be omitted
*/

store.load({params:{start:0,limit:getLimitCount()}, callback:getMsg});
if(grid == null)
                                                                                                                                                                                                                                                                    title:"User query results", //grid title
              width:document.body.clientWidth, //Set the value of grid’s width
                                                                                                                                                                                     viewConfig:{forceFit:true}, // Set the full window of the number of columns Region:'center', //This is set in The position displayed in the ViewPort is
cm:colM, //The defined column
ds:store, //The defined data source
border:false,
bodyBorder:false,
, // The defined check box

// Listeners: Including one or more event handling procedures is added to this object's initialization process

Listeners: {cellclick: renderPage}},
                                                                                                     ​ 🎜>                                        xtype:'button', Select ', 🎜>                                                                                                                                                                                                                                                      through The default is: query_page_size
Store: Store,
Displayinfo: True,
Displaymsg: 'Display the record of {0} to the record of {1}. ;                                                                                                                                                                                                                                                                         .
                                                                                                                              var userForm = Ext .getCmp("conditionForm").getForm();
                                                                                                 null)
                                                                                                                                                                                                                              x:100, //Initialization x-direction position of the window
                         y:100, //                                                                                                                                                                                                                                                           .          closeAction:"hide", //The default window is hidden
                 resizable: false, // The size of the window does not allow dragging, the default is true
                                                                                                                                                                               . 🎜> buttons ; {
                                                                                :'../user/addUser.action',
               params:{roleId:userForm.form.findField('userId').getValue()}， waitMsg:'Save data, Please wait...', //Scroll bar prompt content
                                                                                                                                    if(message == null){
                      Ext.Msg.alert("Prompt message", "User information added successfully!"); AddUserWin.hide();
Ext.Msg.alert("Message",message);
                                            > Ext.Msg.alert('prompt message'," Failed to add new user!");
                   return;                                                    sg.alert("Prompt message", "There is an error in the form, please fill it in correctly!");
                                                                                                       {handler:function(){addUserWin. hide();},text:'Close'}]
           });                                               
function delForm(userId)
                  ( )
                                                                                                    url:'../user/delUser.action',
    params:{userId: userId},
method:'post',
success:function(o)
{
                    var info = Ext.decode(o.responseText); Prompt information", info.message);
                                                                                                                                                                                      . User information deletion failed!");
                                                                                                                       ; >                   });