Extjs系列实例四

Ext.onReady(function () {
Ext.BLANK_IMAGE_URL = "extjs/resources/images/default/s.gif";
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = "qtip";

var petTypeStore = new Ext.data.SimpleStore({
fields: ["type"],
data:[['千禧猪'],['喵咪'],['哥斯拉']]
});

var sortTypeStore = new Ext.data.SimpleStore({
fields: ["sort"],
data:[['力量'],['智慧'],['爱心']]
});

var Pet = Ext.data.Record.create([
{
name : 'id'
}, {
name : 'name'
}, {
name : 'sex',
}, {
name : 'total',
},{
name : 'strength',
}, {
name : 'cute',
}, {
name : 'love',
},{
name : 'ownerName',
}, {
name : 'type',
}]);

var petStore = new Ext.data.JsonStore({
url : "petList.action",
totalProperty : "count",
root : "rows",
remoteSort : true, 				// True表示在proxy配合下，要求服务器提供一个更新版本的数据对象以便排序，反之就是在Record缓存中排序（默认是false）
pruneModifiedRecords : true, 	// True表示为，每次Store加载后，清除所有修改过的记录信息；
fields : ['id','name', 'type', 'strength','cute','love','ownerName']
});

petStore.load();

function formatType(value) {
var type = "";
switch (value) {
case 0:
type = "喵咪";
break;
case 1:
type = "千禧猪";
break;
case 2:
type = "哥斯拉";
break;
}
return type;
}

var petInfoWindow = new Ext.Window({
title : "宠物信息",
width : 700,
height : 370,
layout : "column",
buttons:[ {
xtype: 'button',
text: "查 找",
handler: function() {

}
}, {
xtype: 'button',
text: "查 找",
handler: function() {

}
}, {
xtype: 'button',
text: "查 找",
handler: function() {

}
}
],
items: [ {
xtype : "form",
title : "宠物查找",
bodyStyle: "padding: 10 10 10 10",
labelWidth : 65,
labelAlign : "right",
layout : "form",
height : 190,
buttonAlign: 'center',
width : 200,
items : [ {
xtype : "textfield",
fieldLabel : "宠物名",
dataIndex : "name",
anchor : "90%"
}, {
xtype : "textfield",
fieldLabel : "主人名",
anchor : "90%"
}, {
xtype : "combo",
triggerAction : "all",
fieldLabel : "宠物类别",
anchor : "90%",
emptyText: "-可选择-",
editable: false,				//不可编辑
id: "petType",
name: "petType",
store: petTypeStore,
displayField: "type",
mode: "local",
valueField: "type"
}, {
xtype : "combo",
triggerAction : "all",
fieldLabel : "排序方式",
anchor : "90%",
emptyText: "-可选择-",
editable: false,
id: "sortType",
name: "sortType",
store: sortTypeStore,
displayField: "sort",
mode: "local",
valueField: "sort"
}],
buttons:[
new Ext.Button({
text: "查 找",
handler: function() {
petDiaryForm.form.submit({
clientValidation:true,						// 进行客户端验证
waitMsg: "正在发表...",						// 提示信息
waitTitle: "发表中",
url: "petDiary.action",						//请求的地址
method: "post",
success: function(form,action) {			//成功的函数
location.href = "/epet/pet.jsp";
},
failure: function(form,action) {			//失败函数
Ext.Msg.show({
title: "信息",
msg: "日记发表失败，请把数据填完整。",
buttons: Ext.Msg.OK,
icon: Ext.Msg.QUESTION
});
}
});
}
})
]
}, {
xtype : "grid",
title : "宠物列表",
height : 300,
store: petStore,
columns : [ {
header : "序号",
align: 'center',
sortable : true,
resizable : true,
dataIndex : "id",
width : 40
},{
header : "宠物名",
dataIndex : "name",
width : 80
},{
header : "类别",
dataIndex : "type",
width : 60,
renderer: formatType
},{
header : "力量",
align: 'right',
dataIndex : "strength",
width : 60
},{
header : "聪明",
align: 'right',
dataIndex : "cute",
width: 60
},{
header : "爱心",
align: 'right',
dataIndex : "love",
width: 60
},{
header : "主人名",
dataIndex : "ownerName"
}]
}]
});

//显示
petInfoWindow.show();
});