最近用Ext做了个web前端,觉得Ext界面很炫,就自己查资料学习了一下,小小的完成了当前的任务。
下面便是主要代码:
这个store是相当于是个数据源吧,后面会有把这个store与GridPanel绑定的代码,他的作用是为GridPanel取得数据。
-----个人理解
this.store1 = new Ext.data.Store({
//和普通Ext。AJAX不一样的是他的参数是这种方式的,以前我把参数写在PROXY里面的,结果老是发不出去。
baseParams :{
logTypeP : 'kong',
timeEnableP : 'kong',
startTimeP : 'kong',
endTimeP : 'kong',
pageIndex : '1'
},
//这里便是你连接的信息了proxy貌似是store里必须的的参数 ----个人见解
proxy : new Ext.data.HttpProxy( {
timeout : 30000,
url :"http://localhost:8080/extwindw/servlet/Ext",
method : 'POST',
async: false,
success : function(response,options) {
var x = Ext.getCmp('gridPanel1');
x.body.unmask(); //后面会有个载入中的效果,这里是当得到我们需要的东西之后便将载入中的效果取消掉
//Ext.Ajax.request(options);
},
failure : function(response,options) { //失败则会询问是否需要重新请求,
var x = Ext.getCmp('gridPanel1');
x.body.unmask();
Ext.Msg.confirm('发送失败','是否要重新发送',
function(btn){
if (btn == 'yes') {
Ext.Ajax.request(options); //这句便是重新请求
}
})
}
}),
reader : new Ext.data.JsonReader({ //我使用的事json格式来回传数据,在json里我会回传一个total项,里面保存我所查询出的所有数据的条数,这方便下面的bbar进行分页,如果你不回传这个参数,那么bbar则会认为你所查询出的数据条数就是你所回传的数据条数。 record则是保存回传的详细信息,在用了分页显示的情况下我不会将我所有的数据回传到页面上。
totalProperty:'total',
root:'record'
}, [
{name: 'log_id',mapping: 'log_id',defaltValue:'1'}, //name对应的事json数据里面的name,这里还可以为数据指定格式,我这里都是默认的String
{name: 'log_type'},
{name: 'device_IP'},
{name: 'username'},
{name: 'record_time'},
{name: 'log_detail'}
])
});
this.store1.load({params:{start:0,limit:10}}); //这句对分页很关键,这里本来可以填4个参数,我这用了两个,start表示分页时你取数据时从哪开始,limit表示每页多少个,当然这里需要服务器来配合,服务器会接受到Start参数和limit参数,然后由他进行数据组织什么的。
this.gridPanel1 = new Ext.grid.GridPanel({
id : 'gridPanel1',
store : this.store1, //把store与gridpanel关联
region : "center",
bodyStyle:'width:100%',
autoWidth:true,
columnLines: true,
selModel : new Ext.grid.RowSelectionModel({}),
layout : 'fit',
autoExpandColumn:5,
//名字与名字对应 就能显示数据了
columns : [{
hidden : false,
header : "ID",
dataIndex : "log_id",
sortable : true
}, {
hidden : false,
header : "日志类型",
dataIndex : "log_type",
sortable : true
}, {
hidden : false,
header : "设备IP",
dataIndex : "device_IP",
sortable : true
}, {
hidden : false,
header : "用户名",
dataIndex : "username",
sortable : true
}, {
hidden : false,
header : "记录时间",
dataIndex : "record_time",
sortable : true
}, {
hidden : false,
header : "详细描述",
dataIndex : "log_detail",
sortable : true
}],
//这个事件是其他应用的,无关紧要
listeners : {
click : {
fn : function(component) {
var test = Ext.getCmp('logTypeTree');
var grid = Ext.getCmp('gridPanel1');
var selectRow = grid.getSelectionModel().getSelected();
if(selectRow){
Ext.getCmp('south').body.dom.innerHTML = selectRow.data.log_detail;
}
}.createDelegate(this)
}
},
//这便是显示在下方的分页控件了,如果你嫌在下面不好看 你可以把bbar改为tbar这样便显示在上面了。他也要与store关联,beforeload是我写来给我的查询条件填充数据的。
bbar : new Ext.PagingToolbar({
id : 'paging',
displayMsg : "Displaying {0} - {1} of {2}",
store : this.store1,
xtype : "paging",
pageSize : 10,
emptyMsg : "No data to display",
beforeLoad : function(){
if(Ext.getCmp('timeEnable')){
this.store.baseParams.timeEnableP = Ext.getCmp('timeEnable').getValue();
}
if(Ext.get('startTime')){
this.store.baseParams.startTimeP = Ext.get('startTime').getValue();
}
if(Ext.get('endTime')){
this.store.baseParams.endTimeP = Ext.get('endTime').getValue();
}
if(Ext.getCmp('logTypeTree')){
var cheData = Ext.getCmp('logTypeTree').getChecked();
var logType = '';
for ( var i = 0; i < cheData.length; i++) {
if(i==0){
logType = cheData[i].attributes.menuid;
}else{
logType = logType+"||"+cheData[i].attributes.menuid;
}
};
this.store.baseParams.logTypeP = logType;
}
var x = Ext.getCmp('gridPanel1');
x.body.mask("载入中...", 'x-mask-loading'); //这个便是显示载入中效果语句,如果我在success里没有使用unmask的话,它会一直存在。
}
})
});
写完啦第一篇开发日记。不知道是否有人会看到,并觉得这会对他有点帮助?不过即使没有也没什么,完全自娱自乐。