Page 1/2 of ext object-oriented development practice code

Example Program Brief description:
To demonstrate how to use gridpanel to display data and add a toolbar for gridpanel, this demo provides a pop-up form to add data.
EXT components used
This demo involves the gridpanel, formpanel, and window components in ext.



Start now Code First, let's take a look at the code snippet for creating a gridpanel. Copy code The Code is as follows: // define the data list panel class
Personlistgridpanel = ext. Extend (ext. Grid. gridpanel ,{
Insertwin: NULL,
Updatewin: NULL,

Constructor: function (){
// Add 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); // triggers a Custom Event
},
Scope: This
}
}
}),
Store: New Ext. Data. jsonstore ({
Data: [{name: "Li zongsheng", Age: 28, sex: "male" },{ name: "Lin yilian", age: 26, sex: "female"}],
Fields: ["name", "sex", "Age"]
}),
Draggable: false,
Enablecolumnmove: false,
Title: "First 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: "message "},
{Header: "sex", width: 100, sortable: True, dataindex: "sex", align: "center "}
]),
Tbar :[{
Text: "add personnel ",
Handler: function (){
//************************************** *************
// If the close method of insertpersoninfowindow is not rewritten
// Check whether the insertwin instance is released before calling
// Example:
// If (! This. insertwin ){
// This. insertwin = new insertpersoninfowindow ();
//}
// This. insertwin. Show ();
//************************************** *************
This. insertwin. Show ();
},
Scope: This
},"-",{
Text: "modifier ",
Handler: function (){
VaR r = This. getactiverecord ();
If (! R) return;

// call the show method before calling the load method.
// otherwise, the data is not displayed.
This. updatewin. show ();
This. updatewin. load (r);
},
scope: This
}, "-", {
text: "delete a person ",
handler: function () {
var r = This. getactiverecord ();
If (! R) return;
Ext. MessageBox. Confirm ("delete", "delete current employee information? ", Function (BTN) {
If (BTN =" yes ") {
This. delrecord (r);
}< BR >}, this);
},
scope: This
}]
});
},
getactiverecord: function () {
var Sm = This. getselectionmodel ();
// if no selected record exists, whether to throw an exception or return NULL ???????
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 ');
}< BR >});

data maintenance panel Code copy Code the code is as follows: // defines the data maintenance panel, this panel is used in the 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%" },< br> items: [{
name: "name ", // note that the name attribute instead of ID is used here, because the personinfoformpanel is added and inserted into two forms, and the ID is in conflict, so that the component cannot be correctly displayed
fieldlabel: "name",
allowblank: false,
emptytext: "enter a name",
blktext: "name cannot be blank"
}, {
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: 'select 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 ();
}
});

There are two actions for data maintenance: Add and update. From the design point of view, you need to write two forms to operate on them. Careful friends will surely think that the newly added and updated actions are for the same data table. Can they write only one form and reuse it? The answer is yes. Next, we will first write a form base class.Copy codeThe Code is as follows: // Add and modify the 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: "Remove",
handler: This. oncancelclick,
scope: This
}]
});
// alert (this. onsubmitclick);
},
close: function () {
// you need to override the close method,
// otherwise, it will be released when the form is closed
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 ();
}< br> catch (_ ERR) {
return;
}< BR >},
oncancelclick: function () {
This. close ();
}< BR >});

After the base class is written, we can use the inherited method to write new and updated forms.Copy codeThe Code is as follows: // defines the new data form
Insertpersoninfowindow = ext. Extend (personinfowindow ,{
Title: "add"
});

// ================================================ ==========================================================

Copy code The Code is as follows: // define and edit the Data Form
Updatepersoninfowindow = ext. Extend (personinfowindow ,{
Title: "modify ",
Load: function (r ){
This. Form. setvalues (R );
}
});

To distinguish between new and updated forms, we specify the title attribute for them in their respective implementation classes. In addition, we need to add a method load for loading the data to be edited in the Update Form class.

The script is complete. Let's take a look at how to use it in HTML. Reference code in HTMLCopy codeThe Code is 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 <200) 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 clear. You only need to create a personlistgridpanel, because it contains the newly added and modified form objects, and the newly added and modified forms use the personinfoformpanel for data editing.
vtypes is used in personinfoformpanel for data verification.
adding and modifying a form is just an interface. It is responsible for transferring the data you entered in personinfoformpanel back to listgrid for saving, or passing the data in listgrid to personinfoformpanel for rendering, for users to edit.