最近用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
??? ??? ???