//Define the data list panel class
PersonListGridPanel = (, {
insertWin: null,
updateWin: null,
constructor: function() {
//Add custom events
("rowSelect");
= new InsertPersonInfoWindow();
("submit", , this);
= new UpdatePersonInfoWindow();
("submit", , this);
(this, {
renderTo: (),
width: 360,
height: 300,
frame:true,
sm: new ({
singleSelect:true,
listeners: {
"rowselect": {
fn: function(sm, rowIndex, r) {
("rowSelect", r); //Trigger custom event
},
scope: this
}
}
}),
store: new ({
data: [{name: "Lee 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 ([
{header: "Staff Name", width: 100, menuDisabled: true},
{header: "Age", width: 100, sortable: true, dataIndex: "age", align: "right", tooltip: "Here is the prompt message"},
{header: "Sex", width: 100, sortable: true, dataIndex: "sex", align: "center"}
]),
tbar: [{
name: "btnFirst",
//text: "First",
iconCls: "x-tbar-page-first",
handler: function () {
().selectFirstRow();
},
scope: this
}, {
name: "btnPrev",
//text: "Prev",
iconCls: "x-tbar-page-prev",
handler: function () {
().selectPrevious();
},
scope: this
}, {
name: "btnNext",
//text: "Next",
iconCls: "x-tbar-page-next",
handler: function () {
().selectNext();
},
scope: this
}, {
name: "btnLast",
//text: "Last",
iconCls: "x-tbar-page-last",
handler: function () {
().selectLastRow();
},
scope: this
}, "-", {
text: "Add",
handler: function() {
//***************************************************
//If the Close method of InsertPersonInfoWindow is not rewrite
//Before calling, you need to check whether its instance insertWin is released
//Usage example:
//if (!) {
// = new InsertPersonInfoWindow();
//}
//();
//***************************************************
();
},
scope: this
}, "-", {
text: "Modify",
handler: function() {
var r = ();
if (!r) return;
//How to fill data into a form?
();
(r);
},
scope: this
}, "-", {
text: "Delete",
handler: function() {
var r = ();
if (!r) return;
("Delete", "Delete current personnel information?", function(btn) {
if(btn == "yes") {
(r);
}
}, this);
},
scope: this
}]
});
},
getActiveRecord: function() {
var sm = ();
//When there is no selected record, is an exception thrown or null is returned????????
return (() === 0) ? null : ();
},
insert: function(r) {
().add(r);
},
delRecord: function(r) {
().remove(r);
},
onInsertWinSubmit: function(win, r) {
(r);
},
onUpdateWinSubmit: function(win, r) {
alert('onUpdateWinSubmit');
}
});
//==============================================================================
//Define the data maintenance panel, and the panel will be used in the new addition and modification forms defined later.
PersonInfoFormPanel = (, {
constructor: function() {
(this, {
//title: "Person Info",
frame: true,
width: 360,
labelWidth: 40,
defaultType: "textfield",
defaults: { anchor: "92%" },
items: [{
name: "name", //Note that the name attribute is used instead of id, because PersonInfoFormPanel will be added and inserted into two forms, and the use of id will conflict, resulting in the component not being displayed correctly.
fieldLabel: "Name",
allowBlank: false,
emptyText: "Please enter your name",
blankText: "The name cannot be empty"
}, {
name: "age",
fieldLabel: "Age",
vtype: "age"
}, {
hiddenName: "sex",
xtype: "combo",
fieldLabel: "Sex",
store: new ({
fields: [
{name: 'Sex'}
],
data:[["Male"], ["Female"]]
}),
mode: 'local',
displayField:'Sex',
triggerAction: 'all',
emptyText:'Select gender...'
}]
})
},
getValues: function() {
if (().isValid()) {
return new (().getValues());
}
else {
throw Error("Incomplete information");
}
},
setValues: function(r) {
//alert(());
().loadRecord(r);
},
reset: function() {
().reset();
}
});
//==============================================================================
//Add to modify the form base class
PersonInfoWindow = (, {
form: null,
constructor: function() {
("submit");
= new PersonInfoFormPanel();
//(, {baseCls: "x-plain"});
(this, {
plain: true,
width: 360,
modal: true, //Mode form
onEsc: ,
closeAction: "hide",
items: [],
buttons: [{
text: "OK",
handler: ,
scope: this
}, {
text: "Cancel",
handler: ,
scope: this
}]
});
//alert();
},
close: function() {
//The CLose method needs to be rewrite,
// Otherwise, the form will be released if it is closed
();
();
},
onSubmitClick: function() {
//alert((().data));
try {
("submit", this, ());
();
}
catch(_err) {
return;
}
},
onCancelClick: function() {
();
}
});
//==============================================================================
//Define the new data form
InsertPersonInfoWindow = (PersonInfoWindow, {
title: "Add"
});
//==============================================================================
//Define edit data form
UpdatePersonInfoWindow = (PersonInfoWindow, {
title: "Modify",
load: function(r) {
(r);
}
});