Ext 分页总结

Ext.onReady(function(){

//var sm = new Ext.grid.CheckboxSelectionModel();

//加载表格数据
var store = new Ext.data.Store({

proxy: new Ext.data.HttpProxy({
url:'log!listLog',
method:'post'
}),
reader: new Ext.data.JsonReader({
root:'logPage.logs',
totalProperty:'logPage.totalProperty',

id:'id'
},
[
{name:'logId'},
{name:'logType'},
{name:'username'},
{name:'isAdmin'},
{name:'moduleName'},
{name:'url'},
{name:'actionName'},
{name:'note'},
{name:'time'}
])
});


//表格列对象
var logColumn = new Ext.grid.ColumnModel([
//sm,
{ header:'编号',
dataIndex:'logId'
},
{
header:'日志类型',
dataIndex:'logType'
},
{
header:'操作人',
dataIndex:'username'
},
{
header:'用户组',
dataIndex:'isAdmin'
},
{
header:'模块名',
dataIndex:'moduleName'
},
{
header:'请求路径',
dataIndex:'url'
},
{
header:'操作',
dataIndex:'actionName'
},
{
header:'备注',
dataIndex:'note'
},
{
header:'时间',
dataIndex:'time'
}
]);
//表格对象
var grid = new Ext.grid.GridPanel({
el : 'showLogs',
width : 850,
height : 300,
title : '日志列表',
store : store,
cm : logColumn,
trackMouseOver : false,
autoScroll : true,
loadMask : {msg:'正在加载数据，请稍侯……'},
bbar : new Ext.PagingToolbar({
pageSize : 25,
store : store,
displayInfo : true,
displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg : '没有记录'
})
});

grid.render();


//部门下拉
var departmentCombo = new Ext.form.ComboBox({
id : 'departmentCombo',
xtype : 'combo',
hiddenName : 'departId',
width : 100,
readOnly : true,
//装载日志类型数据
store : new Ext.data.JsonStore({
url : "department!listAllDepartment",
method : "post",
fields : ['id','name'],
root : 'departments'
}),
valueField :'id',
displayField :'name',
typeAhead : true,
mode : 'remote',
triggerAction : 'all',
selectOnFocus : true,
allowBlank : true
});

var userStore = new Ext.data.JsonStore({
url : "user!listUserByDepartment",
method : "post",
fields : ['id','username'],
root : 'users'
});

departmentCombo.on(
'select',function(combo,record,index){
userStore.load({
params:{departmentId:record.data.id}
});
});


var userCombo = new Ext.form.ComboBox({
id : 'userCombo',
xtype : 'combo',
hiddenName : 'userId',
width : 100,
readOnly : true,
store : userStore,
valueField :'id',
displayField :'username',
typeAhead : true,
mode : 'local',
triggerAction : 'all',
selectOnFocus : true,
allowBlank : true
});

//第一行搜索栏
var searchToolbar1 = new Ext.Toolbar({
id : 'searchToolbar1',
width : 850,
defaultType : 'textfield',
autoHight : true,
items : [
'部门:',departmentCombo,
'用户名:',userCombo,
'日志类型:',
{
id : 'logType',
xtype : 'combo',
hiddenName : 'typeId',
width : 100,
readOnly : true,
emptyText : '请选择...',
//装载日志类型数据
store : new Ext.data.JsonStore({
url : "log!listLogType",
method : "post",
fields : ['logTypeId','typeCode','typeName'],
root : 'logTypes'
}),
valueField : 'logTypeId',
displayField : 'typeName',
typeAhead : true,
mode: 'remote',
triggerAction : 'all',
selectOnFocus : true,
allowBlank : true
},
'模块',
{
fieldLabel:'模块',
name:'module',
xtype:'textfield',
width:100
},
'操作',
{
id:'actionComob',
xtype:'combo',
hiddenName:'actionId',
width:100,
readOnly : true,
emptyText:'请选择...',
//装载日志类型数据
store:new Ext.data.JsonStore({
url:"log!listActions",
method:"post",
fields:['id','code','name'],
root:'logUserActions'
}),
valueField:'id',
displayField:'name',
typeAhead: true,
mode: 'remote',
triggerAction: 'all',
selectOnFocus:true,
allowBlank:true
}
]
});

var searchBtn = new Ext.Button({
text: '查询',
handler:onclickSearchLogBtn
});

var resetBtn = new Ext.Button({
text : '重置条件',
handler:onclickResetBtn
});

var isAdminCombo = new Ext.form.ComboBox({
id:'isAdmin',
xtype:'combo',
hiddenName:'adminId',
readOnly : true,
width:100,
store:new Ext.data.SimpleStore({
fields: ['id', 'text'],
data : [['1','是'],['2','否']]
}),
valueField:'id',
displayField:'text',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
allowBlank:true
})
//切换是否为管理员时绑定监听
isAdminCombo.on('select',function(combo,record,index){
var userCombo = Ext.getCmp('userCombo');
if(record.data.id == 1){
//userCombo.clear();
userStore.load({
params:{departmentId:record.data.id,isAdmin:1}
});
var departCombo = Ext.getCmp('departmentCombo');
departCombo.setValue('');
departCombo.disabled = true;
}else{
var departCombo = Ext.getCmp('departmentCombo');
userStore.removeAll();
departCombo.disabled = false;
}
})

//
var searchToolbar2 = new Ext.Toolbar({
id : 'searchToolbar2',
width:850,
defaultType: 'textfield',
autoHight:true,
items:[
'是否为管理员:',isAdminCombo,
'起始日期:',
{
xtype: 'datefield',
name:'beginDate',
width:100,
format:'Y-m-d'
},
'终止日期:',
{
xtype: 'datefield',
name:'endDate',
width:100,
format:'Y-m-d'
},
searchBtn,

resetBtn
]
});

var searchPanel = new Ext.Panel({
renderTo : 'search-pl',
border:false,
tbar : searchToolbar1,
listeners : {
'render': function(){
searchToolbar2.render(this.tbar);
}
}
});

function onclickSearchLogBtn(){
store.reload(
{params:{start:0,limit:25}}
);
}

function buildParams(){
var username = Ext.fly('userCombo').dom.value;
var logType = Ext.fly('typeId').dom.value;
var module = Ext.fly('module').dom.value;
var action = Ext.fly('actionId').dom.value;
var isAdmin = Ext.fly('adminId').dom.value;
var beginDate = Ext.fly('beginDate').dom.value;
var endDate = Ext.fly('endDate').dom.value;
var departmentId = Ext.fly('departId').dom.value;

var vparams = {
params:{
'logQuery.module' : module,
'logQuery.departmentId' : departmentId,
'logQuery.username' : username,
'logQuery.logTypeId' : logType,
'logQuery.actionId' : action,
'logQuery.isAdmin' : isAdmin,
'logQuery.beginDate' : beginDate,
'logQuery.endDate' : endDate
}
};
return vparams;
}

//清空查询条件
function onclickResetBtn(){
Ext.getCmp('userCombo').setValue('');
Ext.getCmp('logType').setValue('');
Ext.getCmp('departmentCombo').setValue('');
Ext.getCmp('actionComob').setValue('');
Ext.getCmp('isAdmin').setValue('');

Ext.fly('typeId').dom.value = '';
Ext.fly('module').dom.value = '';
Ext.fly('actionId').dom.value = '';
Ext.fly('adminId').dom.value = '';
Ext.fly('beginDate').dom.value = '';
Ext.fly('endDate').dom.value = '';
}

store.on('beforeLoad',function(){
var username = Ext.fly('userCombo').dom.value;
var logType = Ext.fly('typeId').dom.value;
var module = Ext.fly('module').dom.value;
var action = Ext.fly('actionId').dom.value;
var isAdmin = Ext.fly('adminId').dom.value;
var beginDate = Ext.fly('beginDate').dom.value;
var endDate = Ext.fly('endDate').dom.value;
var departmentId = Ext.fly('departId').dom.value;

Ext.apply(store.baseParams,
{'logQuery.module' : module,
'logQuery.departmentId' : departmentId,
'logQuery.username' : username,
'logQuery.logTypeId' : logType,
'logQuery.actionId' : action,
'logQuery.isAdmin' : isAdmin,
'logQuery.beginDate' : beginDate,
'logQuery.endDate' : endDate}
);
})
store.load({params:{start:0,limit:25}});
})