Ext GridPanel 使用ajax取得数据并显示的实例----注：自己摸索的

最近用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的话，它会一直存在。
                }
            })
        });

 

写完啦第一篇开发日记。不知道是否有人会看到，并觉得这会对他有点帮助？不过即使没有也没什么，完全自娱自乐。

评论

1 楼 xxtao110 2010-09-26