最近用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的话，它会一直存在。
??? ??? ??? ??? }
??? ??? ??? })
??? ??? });
?
写完啦第一篇开发日记。不知道是否有人会看到，并觉得这会对他有点帮助？不过即使没有也没什么，完全自娱自乐。
