一个常用的代码范例
/**
* 订单录入
*/
mortgage.userManager = 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 : 'role'
}, {
header : "员工号",
sortable : false,
dataIndex : 'staffId'
}, {
header : "姓名",
sortable : false,
dataIndex : 'name'
},
{
header : "部门",
sortable : false,
dataIndex : 'dept'
},
{
header : "行所",
sortable : false,
dataIndex : 'branch'
}, {
header : "手机号",
sortable : false,
dataIndex : 'mobile'
}, {
header : "分机号",
sortable : false,
dataIndex : 'ext'
}, {
header : "下辖行所",
sortable : false,
dataIndex : 'befBranch'
}]);
var record=Ext.data.Record.create([
{
name : 'id'
}, {
name : 'role'
}, {
name : 'staffId'
}, {
name : 'name'
} ,{
name : 'dept'
},
{
name : 'branch'
}, {
name : 'mobile'
}, {
name : 'ext'
}, {
name : 'befBranch'
}
]);
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 nextPageButton = new Ext.Button(
{
text : '下一页',
disabled : true,
handler : function() {
}
});
var myMenuBar = [ '->', '-', nextPageButton ];
/**
* 按钮定义
*/
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 upbutton = new Ext.Button({
text : '导出用户列表',
id : 'button1',
name : 'button1',
handler : function() {
// infoForm.getForm().submit({
// url : getContextPath()+'/downloadUserList.htm',
// 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 staffids = $("#staffids").val();
var branchNo=$("input[name='branchNo']").val();
var staffNo=$("#staffNo").val();
var branchs=$("input[name='branchs']").val();
var roles = $("input[name='roles']").val();
window.location.href = getContextPath()+'/downloadUserList.htm?staffids='+staffids+"&branchNo="+branchNo+"&staffNo="+staffNo+"&branchs="+branchs+"&roles="+roles;
}
});
/*******************************************************************
* 列表定义
******************************************************************/
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(){
mortgage.userManager.addUserBasic(dataStore);
}
},
{
text: '编辑',
iconCls : 'edit',
handler : function(){
var selectRecord = grid.getSelectionModel()
.getSelected();
if (null == selectRecord) {
Ext.MessageBox.alert("提示", "至少选择一条数据！");
} else {
mortgage.userManager.edit(dataStore,selectRecord,roleList);
}
}
},
{
text: '删除',
iconCls:'remove',
tooltip:'删除一条记录',
handler : function(){
mortgage.userManager.deleteUser(dataStore,grid);
}
}
],
// 菜单条
loadMask : {
msg : '数据加载中，请稍侯……'
},
// 分页条
bbar : myMenuBar,
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-20:PANELMINWIDTH-20,
height : document.body.clientHeight,
items : [{
title : '基础信息',
xtype : 'fieldset',
layout : 'column',
buttonAlign : 'center',
collapsible : true,
height : 130,
buttons : [getApplyNoButton,findAttachmentButton,upbutton],
items : [{
columnWidth : .33,
layout : 'form',
items : [{
xtype : 'textfield',
fieldLabel : '员工号',
name : 'staffids',
id : 'staffids',
width : 140,
value : '',
readOnly : false
},{
xtype : 'combo',
fieldLabel : '行所',
store : branchStore,
forceSelection : true,
width : 140,
//emptyText : '请选择',
valueField : "branchId",
displayField : "branchId",
mode : 'remote',
name : 'branchNo',
value : '',
hiddenName : 'branchNo',
triggerAction : 'all'
}]
},{
columnWidth : .33,
layout : 'form',
items : [{
xtype : 'textfield',
fieldLabel : '姓名',
name : 'staffNo',
id : 'staffNo',
width : 140,
hidden : false
}, {
xtype : 'combo',
fieldLabel : '部门',
store : new Ext.data.JsonStore({
fields : [ 'name', 'value' ],
baseParams:{typeId:'h'},
root:'CodeBase',
url:getContextPath()+'/CodeBase.htm',
autoLoad:true
}),
forceSelection : true,
width : 140,
//emptyText : '请选择',
valueField : 'value',
displayField : 'name',
mode : 'remote',
name : 'branchs',
value : '',
hiddenName : 'branchs',
triggerAction : 'all'
}]
},{
columnWidth : .33,
layout : 'form',
items : [{
xtype : 'combo',
fieldLabel : '角色',
store : roleStore,
forceSelection : true,
width : 140,
//emptyText : '请选择',
valueField : "roleId",
displayField : "roleName",
mode : 'remote',
name : 'roles',
value : '',
hiddenName : 'roles',
triggerAction : 'all'
}]
}]
},{
title : '查询结果',
xtype : 'fieldset',
layout : 'column',
bodyStyle : 'padding:5px,0px,2px,0px',
collapsible : true,
items : [ grid ]
}]
});
/***********************************************************************
* 容器panel定义
**********************************************************************/
var containerPanel = new Ext.Panel({
layout : 'column',
frame : true,
applyTo : 'manage_grid_div',
id : 'containerPanel',
width : document.body.clientWidth > PANELMINWIDTH
? document.body.clientWidth
: PANELMINWIDTH,
height : document.body.clientHeight,
items : [infoForm]
});
/***********************************************************************
* 页面宽度高度自适应处理
**********************************************************************/
Ext.EventManager.onWindowResize(function(w, h) {
try {
if (document.body.clientWidth > PANELMINWIDTH) {
containerPanel.setWidth(document.body.clientWidth);
} else {
containerPanel.setWidth(PANELMINWIDTH);
}
} catch (e) {
}
});
});
};
mortgage.userManager();