代码事例
/**
* 订单录入
*/
var pageSizeVal = 20;
taoexpo.user.userManage = function() {
Ext.onReady(function() {
Ext.QuickTips.init();
// 记录json对应设置(如果json数据只有值没有名称,需要)
//var data = [['1','sales', '43729050','cherry','SH','159*','26465','SH,BJ']];
var data = [];
/*******************************************************************
* 列表标题以及数据显示设置
******************************************************************/
var colModel = new Ext.grid.ColumnModel( [
new Ext.grid.RowNumberer(), {
header : 'id',
dataIndex : 'id',
hidden : true
},{
header : "姓名",
sortable : false,
dataIndex : 'name'
},
{
header : "密码",
sortable : false,
dataIndex : 'password'
}, {
header : "手机号",
sortable : false,
dataIndex : 'mobile'
}]);
var record=Ext.data.Record.create([
{
name : 'id'
}, {
name : 'name'
} ,{
name : 'password'
},{
name : 'mobile'
}
]);
var reader= new Ext.data.JsonReader({
root : "userList",
fields : record
});
/*******************************************************************
* 获取数据
******************************************************************/
var dataStore = new Ext.data.Store( {
proxy : new Ext.data.HttpProxy({
url : getContextPath()+'/userManager.htm'
}),
reader : reader
});
/*******************************************************************
* 获取roleList数据
******************************************************************/
var roleList = new Ext.data.JsonStore({
url:getContextPath()+'/selectRole.htm',
root:'userList',
fields:['roleId','roleName'],
autoLoad:true
})
/*******************************************************************
* 设置检索参数
******************************************************************/
dataStore.on('beforeload', function(dataStore) {
// var para = {
// cardNo : ''
// };
// Ext.apply(dataStore.baseParams, para);
});
/*******************************************************************
* 加载第一页信息
******************************************************************/
dataStore.load( {
params : {
start : 0,
limit : 10
}
});
/**
* 按钮定义
*/
var getApplyNoButton = new Ext.Button({
text : '查询',
width : 100,
handler : function(){
infoForm.getForm().submit({
timeout:60000,
waitMsg:'正在查询,请稍后...',
failure:function(form,action){
Ext.Msg.alert("failure","查询失败!");
},
success:function(form,action){
var dataManage = action.result.userList;
dataStore.loadData(action.result);
}
});
}
});
var findAttachmentButton = new Ext.Button({
text : '查询全部',
width : 100,
handler : function(){
infoForm.getForm().reset();
infoForm.getForm().submit({
timeout:60000,
waitMsg:'正在查询,请稍后...',
failure:function(form,action){
Ext.Msg.alert("failure","查询失败!");
},
success:function(form,action){
var dataManage = action.result.userList;
dataStore.loadData(action.result);
}
});
}
});
/*******************************************************************
* 翻页条定义
******************************************************************/
var bbar = new Ext.PagingToolbar({
store: dataStore,
pageSize:pageSizeVal,
displayInfo:true,
displayMsg : '显示第{0}条到{1}条记录，一共{2}条'
});
/*******************************************************************
* 列表定义
******************************************************************/
var grid = new Ext.grid.GridPanel( {
width:'auto',
height : document.body.clientHeight-200,
id : 'button-grid',
store : dataStore,
cm : colModel,
stripeRows : true,
viewConfig : {
forceFit : true
},
//工具条
tbar : [{
text: '添加',
iconCls:'add',
tooltip:'新增一个用户',
handler : function(){
taoexpo.user.userManage.addUserBasic(dataStore);
}
},
{
text: '编辑',
iconCls : 'edit',
handler : function(){
var selectRecord = grid.getSelectionModel()
.getSelected();
if (null == selectRecord) {
Ext.MessageBox.alert("提示", "至少选择一条数据！");
} else {
taoexpo.user.userManage.edit(dataStore,selectRecord,roleList);
}
}
},
{
text: '删除',
iconCls:'remove',
tooltip:'删除一条记录',
handler : function(){
taoexpo.user.userManage.deleteUser(dataStore,grid);
}
}
],
// 菜单条
loadMask : {
msg : '数据加载中，请稍侯……'
},
// 分页条
bbar : bbar,
frame : true,
title : '',
iconCls : 'icon-grid'
});
/**
* 角色下拉列表查询
*/
var roleStore = new Ext.data.JsonStore({
url:getContextPath()+'/selectRole.htm',
root:'userList',
fields:['roleId','roleName']
});
roleStore.load();
/**
* 行所下拉列表查询
*/
var branchStore = new Ext.data.JsonStore({
url:getContextPath()+'/selectBranch.htm',
root:'userList',
fields:['branchId','branchId']
});
branchStore.load();
/**
* 订单内容信息
*/
var infoForm = new Ext.FormPanel({
url : getContextPath()+'/userManager.htm',
labelAlign : 'right',
layout : 'form',
labelSeparator : '：',
width : document.body.clientWidth > PANELMINWIDTH?document.body.clientWidth-230:PANELMINWIDTH-20,
// height : document.body.clientHeight,
items : [{
title : '条件查询',
xtype : 'fieldset',
layout : 'column',
buttonAlign : 'center',
collapsible : true,
height : 100,
buttons : [getApplyNoButton,findAttachmentButton],
items : [{
columnWidth : .33,
layout : 'form',
items : [{
xtype : 'textfield',
fieldLabel : '姓名',
name : 'name',
width : 140,
value : '',
readOnly : false
}]
},{
columnWidth : .33,
layout : 'form',
items : [{
xtype : 'textfield',
fieldLabel : '手机号',
name : 'mobile',
width : 140,
hidden : false
}]
}]
},grid]
});
/***********************************************************************
* 容器panel定义
**********************************************************************/
var containerPanel = new Ext.Panel({
layout : 'column',
frame : true,
applyTo : 'userManage_div',
id : 'containerPanel',
width : document.body.clientWidth > PANELMINWIDTH
? document.body.clientWidth-200
: PANELMINWIDTH,
height : document.body.clientHeight,
items : [infoForm]
});
/***********************************************************************
* 页面宽度高度自适应处理
**********************************************************************/
Ext.EventManager.onWindowResize(function(w, h) {
try {
if (document.body.clientWidth > PANELMINWIDTH) {
containerPanel.setWidth(document.body.clientWidth-200);
} else {
containerPanel.setWidth(PANELMINWIDTH);
}
} catch (e) {
}
});
});
};
taoexpo.user.userManage();