Ext初学 CRUD 布局 及 事件

// 标志变量（控制是编辑还是添加）
var action = "";
// gridPanel 中复选框
var sm = new Ext.grid.CheckboxSelectionModel();
// 数据源
var dataStore = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : 'adminAction!getAllUser.action', // 向后台提交请求
method : 'post'
}),
reader : new Ext.data.JsonReader({ // 读取后台返回的json数据(两个参数)
root : 'rows', // 返回json字符中的代表查询集合的“键”
totalProperty : 'total' // 返回json字符中的代表查询集合数目的“键”
}, [{ // 返回json字符中的代表查询集合数组中对象的“键”
name : 'userId'
}, {
name : 'userName'
}, {
name : 'sex'
}, {
name : 'userType'
}, {
name : 'userIdcard'
}, {
name : 'userCountry'
}, {
name : 'userTel'
}, {
name : 'userState'
}, {
name : 'userBirth'
}])
});
// 编辑panel，用于添加，修改
var Edit_Form = new Ext.form.FormPanel({
title : "",
autoHeight : true,
autowidth : true,
frame : true,// True表示为面板的边框外框可自定义的，false表示为边框可1px的点线（默认为false）
layout : "form", // 整个大的表单是form布局
labelWidth : 65,
labelAlign : "right",
items : [{ // 行1
layout : "column", // 从左往右的布局
items : [{
fieldLabel : '用户编号',
name : 'user.userId',
xtype : 'hidden'
}, {
fieldLabel : '用户密码',
name : 'user.userPwd',
xtype : 'hidden'
}, {
layout : "form",
columnWidth : 0.5,
items : [{
name : 'user.userCountry',
xtype : 'combo',
fieldLabel : '国籍',
store : [['0', '中国'], ['1', '其他']],
editable : false,
triggerAction : 'all',
width : 200,
allowBlank : false,
emptyText : '请选择国籍'
}]
}, {
columnWidth : .5,
layout : "form",
items : [{
xtype : "textfield",
name : "user.userName",
fieldLabel : "用户姓名",
allowBlank : false,
emptyText : '请选择姓名',
width : 200
}]
}]
}, { // 行2
layout : "column",
items : [{
columnWidth : .5,
layout : "form",
items : [{
name : 'user.sex',
xtype : 'combo',
fieldLabel : '性 别',
store : [['0', '男'], ['1', '女']],
editable : false,
triggerAction : 'all',
width : 200,
allowBlank : false,
emptyText : '请选择性别'
}]
}, {
columnWidth : .5,
layout : "form",
items : [{
name : '',
xtype : 'radiogroup',
fieldLabel : '用户类型',
width : 200,
allowBlank : false,
columns : 2,
items : [{
layout : "column",
items : [{
boxLabel : 'VIP ', // 页面显示标签
name : 'user.userType', // 同一组中的radio
// name属性值要一样才能单选
inputValue : 'VIP' // 内置值
}, {
boxLabel : '普通',
name : 'user.userType',
inputValue : '普通'
}, {
boxLabel : '团购',
name : 'user.userType',
inputValue : '团购'
}]
}]


}]
}]
}, {// 行3
layout : "column",
items : [{
layout : "form",
columnWidth : 0.5,
items : [{
xtype : "textfield",
name : "user.userIdcard",
fieldLabel : "用户身份证",
allowBlank : false,
emptyText : '请选择身份证',
width : 200
}]
}, {
layout : "form",
columnWidth : 0.5,
items : [{
xtype : "textfield",
name : "user.userTel",
fieldLabel : "用户电话",
allowBlank : false,
emptyText : '请选择电话',
width : 200
}]
}]
}, {// 行4
layout : "column", // 从左往右的布局
items : [{
layout : "form",
columnWidth : .5,
items : [{
name : 'user.userState',
xtype : 'combo',
fieldLabel : '用户状态',
store : [['0', '正常'], ['1', '冻结']],
editable : false,
triggerAction : 'all',
width : 200,
allowBlank : false,
emptyText : '请选择状态'
}]
}, {
columnWidth : .5,
layout : "form",
items : [{
xtype : "datefield",
name : "user.userBirth",
fieldLabel : "用户生日",
allowBlank : false,
format : "Y-m-d",
emptyText : '请选择日期',
width : 200
}]
}]


}],
buttonAlign : "center",
buttons : [{
text : "确定",
handler : function() {
if (action == "add") {
add();
} else if (action == "edit") {
doEdit();
}


}
}, {
text : "取消",
handler : function() {
Edit_Form.getForm().reset();
Edit_Window.hide();
action = "";
}


}]
});


// 窗口
var Edit_Window = new Ext.Window({
collapsible : true,
maximizable : true,
minWidth : 750,
width : 600,
autoHeight : true,
minHeight : 500,
modal : true,
closeAction : "hide",
plain : true,
title : '编辑对话框',
bodyStyle : 'padding:5px;',
items : Edit_Form


});


// 查找输入框对象
var cmbox = new Ext.form.ComboBox({
id : 'cmbox',
title : '',
store : dataStore, // 加载数据源
mode : "local", // 从本地加载数据（智能感应效果）
displayField : 'userId', // 显示字段类似DropDownlist中的DataTextField
valueField : '用户ID', // 类似DropDownlist中的DataValueField
width : 160,
allowBlank : false,// 不允许为空
emptyText : '请输入用户ID进行搜索...',// 默认值
blankText : '请输入用户ID'// 当为空的时候提示
});


// 编辑准备（修改）
var editPrepare = function() {
Edit_Form.getForm().reset();// 重置编辑模板
var rows = grid.getSelectionModel().getSelections();
if (rows.length != 1) {
Ext.Msg.alert("提示", "请你选择一行数据进行操作！");
return;
}


Edit_Window.show();// 打开修改员工信息窗体
Edit_Form.getForm().findField('user.userId')
.setValue(rows[0].get('userId'));
Edit_Form.getForm().findField('user.userPwd').setValue(rows[0]
.get('userPwd'));
Edit_Form.getForm().findField('user.userBirth').setValue(rows[0]
.get('userBirth'));
Edit_Form.getForm().findField('user.userState').setValue(rows[0]
.get('userState'));


Edit_Form.getForm().findField('user.userName').setValue(rows[0]
.get('userName'));
Edit_Form.getForm().findField('user.sex').setValue(rows[0].get('sex'));
Edit_Form.getForm().findField('user.userType').setValue(rows[0]
.get('userType'));
Edit_Form.getForm().findField('user.userIdcard').setValue(rows[0]
.get('userIdcard'));
Edit_Form.getForm().findField('user.userTel').setValue(rows[0]
.get('userTel'));
Edit_Form.getForm().findField('user.userCountry').setValue(rows[0]
.get('userCountry'));


}
// 执行编辑
var doEdit = function() {
action = "";
Edit_Form.form.submit({
url : 'adminAction!updateUser',
method : 'POST',
success : function(form, action) {
Ext.MessageBox.alert('成功', "修改成功");
Edit_Window.hide();
dataStore.reload();
},
failure : function(form, action) {
Ext.MessageBox.alert('失败', "修改失败");
Edit_Window.hide();
}
});
}
// 删除操作
var freezePrepare = function() {
var rows = grid.getSelectionModel().getSelections();// 获取ID为MenuGridPanel的控件名称得到当前选中项
if (rows.length == 0) {
Ext.Msg.alert("提示", "请至少选择要解冻的用户！");
return;
}
Ext.MessageBox.confirm('提示', '确实要删除所选的记录吗?', doFreeze);


}
function doFreeze(btn) {
// 确定要删除选定项的信息
// if (btn == 'yes') {
// var row = grid.getSelectionModel().getSelections();
// var jsonData = "";
// for (var i = 0, len = row.length; i < len; i++) {
// var ss = row[i].get("userId");
// console.info(ss);
// jsonData = ss;
// Ext.Ajax.request({
// url : "adminAction!deleteUser",
// method : 'post',
// params : {
// JSONStr : jsonData
// },
// success : function(result) {
// // var respText = Ext.util.JSON.decode(result.responseText);
// // var msg = respText.msg;
// Ext.MessageBox.alert('提示', "信息删除成功！");
// dataStore.reload();
// },
// failure : function() {
// Ext.MessageBox.alert("提示", "信息删除失败！");
// dataStore.reload();
// }
// })
// }
//
// }
if (btn == 'yes') {
var row = grid.getSelectionModel().getSelections();
var str = "";
for (var i = 0, len = row.length; i < len; i++) {
str = str + row[i].get("userId") + ",";
}
console.info(str);
Ext.Ajax.request({
url : "adminAction!deleteUser",
method : 'post',
params : {
JSONStr : str
},
success : function(result) {
var respText = Ext.util.JSON
.decode(result.responseText);
var msg = respText.msg;
Ext.MessageBox.alert('提示', "信息删除成功！");
// dataStore.reload();
},
failure : function() {
Ext.MessageBox.alert("提示", "信息删除失败！");
// dataStore.reload();
}
})


}
};
// 添加函数
var add = function() {
action = "";
if (Edit_Form.form.isValid()) {
Edit_Form.form.submit({
clientValidation : true,// 进行客户端验证
waitMsg : '正在提交信息,请稍后...',
waitTitle : '提示',
url : 'adminAction!addUser.action',
method : 'POST',
params : {},
success : function(form, action) { // 加载成功的处理函数
Ext.MessageBox.alert('成功', "添加成功");
Edit_Window.hide();
dataStore.reload();
},
failure : function(form, action) { // 加载失败的处理函数
Ext.MessageBox.alert('失败', "添加失败");
Edit_Window.hide();
action = "add";
}
});
} else {
Ext.MessageBox.alert('提示', "请填写完整");
action = "add";
}


}
// 导出Excel
function gridToExce() {
}


// 创建GridPanel
var grid = new Ext.grid.GridPanel({
id : '',
store : dataStore,
title : '',
autoWidth : true,
height : 480,
viewConfig : {
forceFit : true,// 所有列都改变宽度
autoFill : true,
sortAscText : '升序',
sortDescText : '降序',
columnsText : '显示列'
},
columns : [sm, new Ext.grid.RowNumberer(), {
header : '用户编号',
dataIndex : 'userId',
width : 100,
align : 'center',
sortable : true
}, {
header : '用户姓名',
dataIndex : 'userName',
width : 100,
align : 'center'
}, {
header : '用户状态',
dataIndex : 'userState',
width : 200,
align : 'center'
}, {
header : '性别',
dataIndex : 'sex',
width : 100,
align : 'center'
}, {
header : '用户类型',
dataIndex : 'userType',
width : 100,
align : 'center'
}, {
header : '用户身份证',
dataIndex : 'userIdcard',
width : 100,
align : 'center'
}, {
header : '用户电话',
dataIndex : 'userTel',
width : 200,
align : 'center'
}, {
header : '用户国籍',
dataIndex : 'userCountry',
width : 200,
align : 'center'
}, {
header : '用户生日',
dataIndex : 'userBirth',
width : 200,
align : 'center'
}],
sm : sm,// 增加 CheckBox多选框列
tbar : [{
text : "用户信息修改",
icon : "admin_action/images/edit.png",
handler : function() {
Edit_Form.getForm().reset();
action = "edit";// 操作标志符
editPrepare();
}
}, {
text : "用户注册",
icon : "admin_action/images/save.png",
handler : function() {
Edit_Form.getForm().reset();
action = "add";
Edit_Window.show();
}
}, {
text : "用户账户解冻",
icon : "admin_action/images/delete.gif",
handler : function() {
freezePrepare();
}
}, "-", cmbox, "-", {
xtype : 'button',
icon : "admin_action/images/find.gif",
text : "查找",
handler : function() {
// 过滤条件为角色名称(RoleName)来搜索匹配的信息,
// filter方法第一个参数:过滤的字段名称,第二个参数要匹配的信息,
// 第三个参数true表示从开始位置开始搜索,第四个参数false表示不区分大小写
// dataStore.filter('userId',
// Ext.getCmp("cmbox").getValue(), false, false);


// dataStore.reload({
// params : {
// start : 0,
// limit : 5,
// // storeId : Request["STOREID"],
// // wlid : Request["WLID"],
// typeId : Ext.get('userId').dom.value,
// searchContent : Ext.getCmp('cmbox').getValue()
// }
// });
}
}


],
bbar : new Ext.PagingToolbar({ // 自带分页工具条
pageSize : 5,
store : dataStore,
displayInfo : true,
displayMsg : '当前为第[{0}]</span>条至第[{1}]条数据，共[{2}]条数据',
emptyMsg : "没有数据"
})
});
// 监听窗口关闭（hide）的事件
Edit_Window.on("hide", function() {
action = "";
});


// 查询框
var Query_Form = new Ext.form.FormPanel({
title : "",
autoHeight : true,
// autoWidth : true,
width:600,
frame : true,
layout : "form",
labelWidth : 65,
labelAlign : "right",
buttonAlign:"center",
items : [{ // 行1
layout : "column", // 从左往右的布局
items : [{
layout : "form",
columnWidth : 0.5,
items : [{
fieldLabel : '用户编号',
name : 'user.userId',
xtype : 'textfield',
width : 200,
allowBlank : false,
emptyText : '请输入用户编号'
}]
}, {
columnWidth : .5,
layout : "form",
items : [{
xtype : "textfield",
name : "user.userName",
fieldLabel : "用户姓名",
// allowBlank : false,
emptyText : '请选择姓名',
width : 200
}]
}]
}, { // 行2
layout : "column",
items : [{
columnWidth : .5,
layout : "form",
items : [{
name : 'user.sex',
xtype : 'combo',
fieldLabel : '性 别',
store : [['0', '男'], ['1', '女']],
editable : false,
triggerAction : 'all',
width : 200,
// allowBlank : false,
emptyText : '请选择性别'
}]
}, {
columnWidth : .5,
layout : "form",
items : [{
name : '',
xtype : 'radiogroup',
fieldLabel : '用户类型',
width : 200,
// allowBlank : false,
columns : 2,
items : [{
layout : "column",
items : [{
boxLabel : 'VIP ', // 页面显示标签
name : 'user.userType', // 同一组中的radio
// name属性值要一样才能单选
inputValue : 'VIP' // 内置值
}, {
boxLabel : '普通',
name : 'user.userType',
inputValue : '普通'
}, {
boxLabel : '团购',
name : 'user.userType',
inputValue : '团购'
}]
}]


}]
}]
}, {// 行3
layout : "column",
items : [{
layout : "form",
columnWidth : 0.5,
items : [{
xtype : "textfield",
name : "user.userIdcard",
fieldLabel : "用户身份证",
// allowBlank : false,
emptyText : '请选择身份证',
width : 200
}]
}, {
layout : "form",
columnWidth : 0.5,
items : [{
xtype : "textfield",
name : "user.userTel",
fieldLabel : "用户电话",
// allowBlank : false,
emptyText : '请选择电话',
width : 200
}]
}]
}, {// 行4
layout : "column", // 从左往右的布局
items : [{
layout : "form",
columnWidth : .5,
items : [{
name : 'user.userState',
xtype : 'combo',
fieldLabel : '用户状态',
store : [['0', '正常'], ['1', '冻结']],
editable : false,
triggerAction : 'all',
width : 200,
// allowBlank : false,
emptyText : '请选择状态'
}]
}, {
columnWidth : .5,
layout : "form",
items : [{
xtype : "datefield",
name : "user.userBirth",
fieldLabel : "用户生日",
// allowBlank : false,
format : "Y-m-d",
emptyText : '请选择日期',
width : 200
}]
}]


}],
buttons : [{
text : "确定",
handler : function() {
                     alert("确定");
}
}, {
text : "取消",
handler : function() {
Query_Form.getForm().reset();
}


}]


});


Ext.onReady(function() {
Ext.QuickTips.init();
dataStore.load({
params : {
start : 0,
limit : 5
}
});
Query_Form.render("query_form");
grid.render("grid_panel");


});