Sample program Brief:
This demo provides pop-up form new data to demonstrate that the data will be displayed using Gridpanel, and Add a toolbar button for Gridpanel.
Ext Component to use
This demo involves the Gridpanel,formpanel and window three components in ext.
Effect chart
Now start with the code, first look at the code snippet that created the Gridpanel
Copy Code code as follows:
Define a data List panel class
Personlistgridpanel = Ext.extend (Ext.grid.GridPanel, {
Insertwin:null,
Updatewin:null,
Constructor:function () {
Adding custom events
This.addevents ("Rowselect");
This.insertwin = new Insertpersoninfowindow ();
This.insertWin.on ("Submit", this.oninsertwinsubmit, this);
This.updatewin = new Updatepersoninfowindow ();
This.updateWin.on ("Submit", this.onupdatewinsubmit, this);
PersonListGridPanel.superclass.constructor.call (This, {
RenderTo:Ext.getBody (),
Width:360,
HEIGHT:300,
Frame:true,
Sm:new Ext.grid.RowSelectionModel ({
Singleselect:true,
Listeners: {
"Rowselect": {
Fn:function (SM, RowIndex, R) {
This.fireevent ("Rowselect", R); Triggering custom Events
},
Scope:this
}
}
}),
Store:new Ext.data.JsonStore ({
Data: [{name: "Jonathan", Age:28, Sex: "Man"}, {name: "Linyilian", age:26, Sex: "female"}],
Fields: ["name", "Sex", "age"]
}),
Draggable:false,
Enablecolumnmove:false,
Title: "The" in-Grid,
Iconcls: ' Icon-grid ',
Colmodel:new Ext.grid.ColumnModel ([
{header: ' Staff Name ', width:100, menudisabled:true},
{header: ' Age ', width:100, Sortable:true, Dataindex: ' Age ', align: ' Right ', tooltip: "Here is the hint message"},
{header: "Sex", width:100, Sortable:true, dataindex: "Sex", Align: "center"}
]),
Tbar: [{
Text: "Add people",
Handler:function () {
//***************************************************
If you do not override the Insertpersoninfowindow Close method
You need to check to see if the case Insertwin is released before calling
Use examples:
if (!this.insertwin) {
This.insertwin = new Insertpersoninfowindow ();
//}
This.insertWin.show ();
//***************************************************
This.insertWin.show ();
},
Scope:this
}, "-", {
Text: "Modify people",
Handler:function () {
var r = This.getactiverecord ();
if (!r) return;
Be sure to call the Show method first, and then call the Load method.
Otherwise the data will not be presented.
This.updateWin.show ();
This.updateWin.load (R);
},
Scope:this
}, "-", {
Text: "Remove people",
Handler:function () {
var r = This.getactiverecord ();
if (!r) return;
Ext.MessageBox.confirm (Delete, delete current person information?) ", function (BTN) {
if (btn = = "Yes") {
This.delrecord (R);
}
}, this);
},
Scope:this
}]
});
},
Getactiverecord:function () {
var sm = This.getselectionmodel ();
Whether to throw an exception or return NULL when no record is selected???????
Return (sm.getcount () = = 0)? Null:sm.getSelected ();
},
Insert:function (R) {
This.getstore (). Add (R);
},
Delrecord:function (R) {
This.getstore (). Remove (R);
},
Oninsertwinsubmit:function (Win, R) {
This.insert (R);
},
Onupdatewinsubmit:function (Win, R) {
Alert (' Onupdatewinsubmit ');
}
});
Data Maintenance Panel Code
Copy Code code as follows:
Define the Data maintenance panel, which is used in new and modified forms defined later
Personinfoformpanel = Ext.extend (Ext.form.FormPanel, {
Constructor:function () {
PersonInfoFormPanel.superclass.constructor.call (This, {
Title: "Person Info",
Frame:true,
Width:360,
LABELWIDTH:40,
DefaultType: "TextField",
Defaults: {anchor: "92%"},
Items: [{
Name: "Name",//Note that the Name property is used instead of the ID, because Personinfoformpanel will be added and inserted into two forms, the use of IDs will conflict, causing the component to not be displayed correctly
Fieldlabel: "Name",
Allowblank:false,
Emptytext: "Please enter your name",
Blanktext: "Name cannot be empty"
}, {
Name: "Age",
Fieldlabel: "Age",
VType: "Age"
}, {
Hiddenname: "Sex",
Xtype: "Combo",
Fieldlabel: "Sex",
Store:new Ext.data.SimpleStore ({
Fields: [
{name: ' Sex '}
],
data:[["Male"], ["female"]]
}),
Mode: ' Local ',
Displayfield: ' Sex ',
TriggerAction: ' All ',
Emptytext: ' Choose gender ... '
}]
})
},
Getvalues:function () {
if (This.getform (). IsValid ()) {
return new Ext.data.Record (This.getform (). GetValues ());
}
else {
Throw error ("error message");
}
},
Setvalues:function (R) {
This.getform (). Loadrecord (R);
},
Reset:function () {
This.getform (). reset ();
}
});
The maintenance of the data has new and updated two actions, from the design point of view, you need to write two forms to operate it. Careful friends will think that the new and updated actions are for the same data table, then can only write a form, and then reuse it? The answer is yes. Here we'll write a form base class.
Copy Code code as follows:
New, modify form base class
Personinfowindow = Ext.extend (Ext.window, {
Form:null,
Constructor:function () {
This.addevents ("submit");
This.form = new Personinfoformpanel ();
Ext.apply (This.form, {basecls: "X-plain"});
PersonInfoWindow.superclass.constructor.call (This, {
Plain:true,
Width:360,
Modal:true,//mode form
OnEsc:Ext.emptyFn,
Closeaction: "Hide",
Items: [This.form],
Buttons: [{
Text: "OK",
Handler:this.onSubmitClick,
Scope:this
}, {
Text: "Cancel",
Handler:this.onCancelClick,
Scope:this
}]
});
alert (This.onsubmitclick);
},
Close:function () {
You need to override the Close method
Otherwise the form is closed in fact the experience is released
This.hide ();
This.form.reset ();
},
Onsubmitclick:function () {
Alert (Ext.util.JSON.encode (This.form.getValues (). data));
try {
This.fireevent ("Submit", this, this.form.getValues ());
This.close ();
}
catch (_err) {
Return
}
},
Oncancelclick:function () {
This.close ();
}
});
Once the base class is written, we can use the inherited method to write the new and updated form.
Copy Code code as follows:
Define New Data form
Insertpersoninfowindow = Ext.extend (Personinfowindow, {
Title: "Add"
});
//==============================================================================
Copy Code code as follows:
Define Edit Data form
Updatepersoninfowindow = Ext.extend (Personinfowindow, {
Title: "Modify",
Load:function (R) {
This.form.setValues (R);
}
});
To differentiate between new and updated forms, we specify the title attribute in their respective implementation classes, and in the update form class you need to add another method load to load the data to be edited.
The script section is finished, so let's see how to use it in HTML. Reference code in HTML
Copy Code code as follows:
<script type= "Text/javascript" >
Ext.QuickTips.init ();
Ext.form.Field.prototype.msgTarget = "side";
Ext.blank_image_url = "Http://localhost:8080/ext-2.2/resources/images/default/s.gif";
Ext.apply (Ext.form.VTypes, {
' Age ': function (_v) {
if (/^\d+$/.test (_v)) {
var _age = parseint (_v);
if ((_age > 0) && (_age <)) return true;
}
return false;
},
"Agetext": "Age must be between 0 and 200",
"Agemask":/[0-9]/i
});
Ext.onready (function () {
New Personlistgridpanel ();
});
</script>
The code is concise and very clear. You just need to create a personlistgridpanel, because it contains the new, modified form objects itself, and the new and modified forms use the personinfoformpanel that is responsible for editing the data.
The vtypes is used for data validation in Personinfoformpanel.
New and modified forms are simply interfaces that are responsible for sending the data that the user fills in the Personinfoformpanel back to Listgrid for saving, or delivering the data in Listgrid to Personinfoformpanel for user editing.
Current 1/2 page
12 Next read the full text
