PHP学习笔记-->001 简单了解

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

                }

            })

        });

 

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