CURD of the mode window in Extjs4.0.7

1. Define form [javascript] varform1Ext. create (& amp; #39; Ext. form. panel & amp; #39;, {id: & amp; #39; form1 & amp; #39;, frame: true, // title: & amp; #39; formFields & amp; #39;, // width: 340,

1. Define form

[Javascript]
Var form1 = Ext. create ('ext. form. Panel ',{
Id: 'form1 ',
Frame: true,
// Title: 'form fields ',
// Width: 340,
BodyPadding: 5,
// BaseCls: "x-plain ",
FieldDefaults :{
LabelAlign: 'left ',
LabelWidth: 90,
Anchor: '000000'
},
 
Items :[{
Xtype: 'textfield ',
Name: 'job _ id ',
FieldLabel: 'job _ fieldlabel ',
Value: 'text field value'
},{
Xtype: 'textfield ',
Name: 'job _ desc ',
// InputType: 'Password ',

FieldLabel: 'job _ fieldLabel'
},{
Xtype: 'textfield ',
Name: 'min _ lvl ',
FieldLabel: 'min _ fieldlabel'
},{
Xtype: 'textfield ',
Name: 'max _ lvl ',
FieldLabel: 'max _ fieldlabel ',
Value: 'textarea value'
}]
});

 

2. Define the window carrier window

[Javascript]
Var win = Ext. create ('ext. Window ',{
Title: 'resize me ',
CloseAction: 'hide ', // you can change the system closing key to 'hide'
Width: 500,
Height: 500,
MinWidth: 300,
MinHeight: 200,
Maximizable: true, // whether to display the maximize button
Layout: 'fit ',
Plain: true, // you can force the background color of the form to be the same.
Items: form1, // indicates which form to load
Modal: true, // set it to a modal window. Otherwise, the underlying webpage can still be operated.
Buttons :[{
Text: 'send', handler: function () {alert ('send ');}
},{
Text: 'exit ',
Handler: function () {win. hide ();}
}]
});

3. Define the operation function first:
[Javascript]
Function AddRecord (){
Form1.getForm (). reset (); // restore to the form definition.
Win. show ();
}
 
Function EditRecord (){
Var row = Ext. getCmp ('mygrid'). getSelectionModel (). getSelection ();
If (row. length = 0 ){
Ext. Msg. alert ("prompt message", "Please select at least one! ");
}
Else if (row. length> 1 ){
Ext. Msg. alert ("prompt message", "Sorry, you can only select one! ");
}
Else if (row. length = 1 ){
Ext. Msg. alert ("only one! ");
Form1.getForm (). loadRecord (row [0]); // automatically load the currently selected entries and load them according to the name of each control in form.
Win. show ();
}
}
 
Function DeleteRecord (){
Var row = grid. getSelectionModel (). getSelection ();
If (row. length = 0 ){
Ext. Msg. alert ("prompt message", "Please select at least one! ");
}
Else if (row. length> 1 ){
Ext. Msg. alert ("prompt message", "Sorry, you can only select one! ");
}
Else if (row. length = 1 ){
Ext. Msg. alert ("only one! ");
Form1.getForm (). loadRecord (row [0]);
Win. show ();
}
}

4. Define the button control (which can be left unspecified, but for better modularization and maintenance. In addition, the above functions can be directly defined in the definition control, so you do not need to define functions separately)

[Javascript]
Var btnAddAction = Ext. create ('ext. action ',{
IconCls: 'addicon', // '../shared/icons/fam/delete.gif', // Use a URL in the icon config
Text: 'add ',
Disabled: false,
MinWidth: 80,
Handler: function (widget, event ){
AddRecord ();
}
});
Var btnEditAction = Ext. create ('ext. action ',{
IconCls: 'editid ',
Text: 'editor ',
Disabled: false,
MinWidth: 80,
Handler: function (widget, event ){
EditRecord ();
}
});
Var btnDeleteAction = Ext. create ('ext. action ',{
IconCls: 'deletecon ',
Text: 'delete ',
Disabled: false,
MinWidth: 80,
Handler: function (widget, event ){
DeleteRecord ();
}
});
 
/// -------------- Right-click to define the pop-up menu --------------------------------------------
Var contextMenu = Ext. create ('ext. menu. Menu ',{
Items :[
BtnAddAction,
BtnEditAction,
BtnDeleteAction
]
});

5. Format of returned data (the format of returned data after data is submitted)

{Success: 'true'} or {success: 'false '}

The submit statement is as follows:
[Javascript]
Modal: true, // set to the modal window
Buttons :[{
Text: 'send ',
Handler: function (){
If (form1.getForm (). isValid ()){
// Pop-up effect
Ext. MessageBox. show (
{
Msg: 'saving. Please wait ...',
ProgressText: 'saving ...',
Width: 300,
Wait: true,
WaitConfig: {interval: 200 },
Icon: 'Download ',
AnimEl: 'saving'
}
);
SetTimeout (function () {}, 1000 );
Alert ('send ');
Form1.getForm (). submit ({
Url: '../ashx/TestJobDataSave. ashx ',
// Params: {'job _ id': 'job _ id', 'job _ desc': 'job _ desc', 'min _ lvl ': 'min _ lvl', 'max _ lvl': 'max _ lvl'}. // by default, parameters are submitted using the control name. If the parameter names are the same, you do not need to use this sentence.
Method: "POST ",
Success: function (form, action) {alert ('success! ');},
Failure: function (form, action) {alert ('Return error ');}
})
}
Else {
Alert ('form is not valid! ');
}
}
},{
Text: 'exit ',
Handler: function () {win. hide ();}
}]