extjs grid 简单应用

 代码中包含了extjs分页，分页排序，获取json数据，extjs store 传参数到后台，加入两个工具栏，双击grid行事件

      var proxy=new Ext.data.HttpProxy({url:'/test.php',method:'POST'});

    var reader=new Ext.data.JsonReader({

                          root: 'results',   //json数据的节点｛results:[{}]｝

//                        totalProperty:'total',

                          fields:

                             [ {name: 'iGameID'} ]

        }) ;

 

var ds=new Ext.data.Store({        

                  proxy:proxy,     

         reader:reader,

         remoteSort:true  //远程排序，grid为分页时候必须

                 });

ds.on('beforeload',function(){

         this.baseParams={

                  ddlGameList:gameid,

                  ddlWorldList:worldid

                          };

       });

       ds.setDefaultSort('iGameID','asc');  //设置远程排序的时候，加上默认排序参数,可以想后台传入要

//排序的列sort和升序或降序dir

  //     ds.load({params:{start:0,limit:25,ddlGameList:gameid,ddlWorldList:worldid}});

                   //查看grid控件是否存在，存在就destory改控件

    if(grid != undefined )    //防止页面出现多个grid  每次加载的时候都判断有无，有则删除

      {

                 grid.destroy();

         }

       //grid上复选框

       var mysm=new Ext.grid.CheckboxSelectionModel();   //在grid中的最前面加入复选框              

   grid = new Ext.grid.GridPanel({

        store: ds,   //数据源

        id:"grid",

        sm:mysm,   //行中加入 复选框

        columns: [

            mysm,  //列中加入复选框

                  {header: "游戏名", width: 60, dataIndex: 'vGameName', sortable: true} ],    //dataIndex

//保持和数据源ds中的field的name名字一致

    //    autoHeight:true,

            height :400,

            autoScroll:true,  //出现滚动条，此时高度必须设置才出来

            stripeRows: true,

               loadMask:true,  //加载的时候出现遮罩效果

            width: 1000,

            title: '查询结果',

            // config options for stateful behavior

            stateful: true,

                     viewConfig:{  

                    forceFit:true 

                },

           tbar:{     //grid 中加入工具条

                frame: true, //

                 items:[

                                   {

                                             xtype: 'button',   //工具条中加入button

                                             width: 89,

                                             text: '修改',

                                             x: 250,

                                             y: 10,

                                             region: 'west',

                                                      listeners:{

                                                       click':function(){

                                                      var gsm = (Ext.getCmp("grid")).getSelectionModel();//获取选择列

                                                         var rows = gsm.getSelections();//根据选择列获取到所有的行

                                                        if (rows.length > 0)

                                                        {

                                                                //当有选择的数据的时候

                                                                for (var i = 0; i < rows.length; i++)

                                                                {

                                                                          //循环迭代所有的选择的row                                                                                                                  var rs_gamename = row.get('vGameName');//获得游戏名称

                                          }

                             }

                                                       else

                                                       {

                                                               Ext.Msg.alert('提示', '请选择要修改的业务信息!');

                                                       }

                                                      }

                                            }

                       }

                  ],

        listeners:{      

                'render':function(){        //加两个滚动条 

                        var tbar =  new Ext.PagingToolbar({                            

                        store : ds,

                        pageSize : 25,                      

                           displayInfo : true,                         

                           beforePageText:"第",                         

                           afterPageText:"/ {0}页",                    

                           firstText:"首页",                   

                           prevText:"上一页",                  

                           nextText:"下一页",                  

                           lastText:"尾页",       

                           refreshText:"刷新",                         

                           displayMsg : "当前显示记录从 {0} - {1} 条 总 {2} 条记录",        

                           emptyMsg : "没有相关记录!"           

                          });      

                        tbar.render(grid.tbar);    //渲染到grid中的tbar   

                        }   

             }             

    });

           //行双击事件

     grid.on('rowdblclick',function(grid,index,e){

               //

               var row = grid.store.getAt(index);//取出点击的那条记录   grid 是对象名

                   var rs_gamename = row.get('vGameName');//获得游戏名称

        });

   

    // render the grid to the specified div in the page

    grid.render('divShow');

    ds.load({params:{start:0,limit:25,ddlGameList:gameid,ddlWorldList:worldid}});  //store装载数据时候装载参数到后台

 

 

代码为前台js脚本   后台采用php实现。。。在实现分页和分页全局排序的时候，需要将前台post过去的 start ，limit ，sort，dir 四个参数加以利用。将这四个参数放到SQL查询字符串中，然后执行SQL字符串。