Ext.GridPanel 用法总结（一）—— Grid基本用法

Ext.GridPanel 用法总结（一）—— Grid基本用法

摘自：http://www.cnblogs.com/luluping/archive/2009/08/01/1536645.html

GridPanel类是基于基础列表接口具代表性的主要实现类。也是最常用的Ext组件之一。

一：首先定义grid的数据源

view plaincopy to clipboardprint?
 //初始化Ext状态管理器，在Cookie中记录用户的操作状态，如果不启用，象刷新时就不会保存当前的状态，而是重新加载                  
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());   
    Ext.QuickTips.init();       //显示提示信息  
    var pageSize=10;//定义每页显示的行数  
  //定义数据字段   
 var fields = ["journal_id","journal_name","journal_organizer","journal_level","is_core"];  
//定义数据源     
 journal_store = new Ext.data.Store({  
        // 获取数据  
         proxy:new Ext.data.HttpProxy(  
           {  
                 url:"Data/SystemManage/Journal/JournalsInfo.aspx",//获取数据的后台地址  
                 method:"POST" 
           }),  
           //解析json  
           reader:new Ext.data.JsonReader(  
           {  
                fields:fields,  
                root:"data",  
                id:"roleId",  
                totalProperty:"totalCount"          //总的数据条数  
           })  
    });  
//根据参数加载数据  
 journal_store.load({params:{journal_name:journal_name,journal_organizer:journal_organizer,journal_level:journal_level,is_core:is_core,start:0,limit:pageSize}});  

 //初始化Ext状态管理器，在Cookie中记录用户的操作状态，如果不启用，象刷新时就不会保存当前的状态，而是重新加载               
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    Ext.QuickTips.init();       //显示提示信息
    var pageSize=10;//定义每页显示的行数
  //定义数据字段
 var fields = ["journal_id","journal_name","journal_organizer","journal_level","is_core"];
//定义数据源  
 journal_store = new Ext.data.Store({
  // 获取数据
   proxy:new Ext.data.HttpProxy(
           {
                 url:"Data/SystemManage/Journal/JournalsInfo.aspx",//获取数据的后台地址
                 method:"POST"
           }),
           //解析json
           reader:new Ext.data.JsonReader(
        {
       fields:fields,
    root:"data",
                id:"roleId",
                totalProperty:"totalCount"          //总的数据条数
           })
 });
//根据参数加载数据
 journal_store.load({params:{journal_name:journal_name,journal_organizer:journal_organizer,journal_level:journal_level,is_core:is_core,start:0,limit:pageSize}});

二：定义其选择列、行号、列等

view plaincopy to clipboardprint?
//--------------------------------------------------列选择模式  
    var sm = new Ext.grid.CheckboxSelectionModel({  
    dataIndex:"roleId" 
    });  
    var index= new Ext.grid.RowNumberer();//行号  
    //--------------------------------------------------列头  
     var colModel = new Ext.grid.ColumnModel  
        (  
            [  
                index,  
                sm,  
                {header:"序号",width:100,dataIndex:'journal_id',sortable:true},     
                {header:"期刊名称",width:80,dataIndex:'journal_name',sortable:true},  
                {header:"主办单位",width:110,dataIndex:'journal_organizer',sortable:true},  
                {header:"期刊级别",width:100,dataIndex:'journal_level',sortable:true},  
                {header:"是否核心",width:110,dataIndex:'is_core',sortable:true},  
                
                {header:"操作",width:100,dataIndex:'journal_id',sortable:true,renderer:delfun}  
            ]  
        ); 
//--------------------------------------------------列选择模式
    var sm = new Ext.grid.CheckboxSelectionModel({
 dataIndex:"roleId"
 });
 var index= new Ext.grid.RowNumberer();//行号
 //--------------------------------------------------列头
     var colModel = new Ext.grid.ColumnModel
        (
            [
                index,
             sm,
                {header:"序号",width:100,dataIndex:'journal_id',sortable:true},  
                {header:"期刊名称",width:80,dataIndex:'journal_name',sortable:true},
                {header:"主办单位",width:110,dataIndex:'journal_organizer',sortable:true},
                {header:"期刊级别",width:100,dataIndex:'journal_level',sortable:true},
                {header:"是否核心",width:110,dataIndex:'is_core',sortable:true},
             
                {header:"操作",width:100,dataIndex:'journal_id',sortable:true,renderer:delfun}
            ]
        );

三：定义表格grid

view plaincopy to clipboardprint?
journal_grid = new Ext.grid.GridPanel  
        (  
            {  
                id:'id_journal_grid',                     //grid的id    
                autoHeight:true,  
                autoWidth:true,  
                sm:sm,  
                cm:colModel, //行列  
                loadMask:true,  
                  
                store:journal_store, //数据源  
                  
                trackMouseOver:true, //鼠标特效  
                autoScroll:true,  
                stripeRows:true,  
                viewConfig:{  
                    columnsText:"显示/隐藏列",  
                    sortAscText:"正序排列",  
                    sortDescText:"倒序排列",  
                    forceFit:true 
                }, 
journal_grid = new Ext.grid.GridPanel
        (
            {
                id:'id_journal_grid',                     //grid的id 
                autoHeight:true,
                autoWidth:true,
                sm:sm,
                cm:colModel, //行列
                loadMask:true,
               
                store:journal_store, //数据源
               
                trackMouseOver:true, //鼠标特效
                autoScroll:true,
                stripeRows:true,
                viewConfig:{
           columnsText:"显示/隐藏列",
           sortAscText:"正序排列",
           sortDescText:"倒序排列",
           forceFit:true
          },

四：定义工具栏

view plaincopy to clipboardprint?
tbar:  //工具条  
                [  
                 {                      
                    text: '刷新',  
                    cls: 'x-btn-text-icon details',  
                   
                    handler: function(btn, pressed)  
                    {//重置查询条件  
                      Ext.getCmp("QueryForm").findById('journalName').reset();  
                        Ext.getCmp("QueryForm").findById('journalOrganizer').reset();  
                        Ext.getCmp("QueryForm").findById('journalLevel').reset();  
                        Ext.getCmp("QueryForm").findById('JournalIsCore').reset();  
                          journal_store.load({params:{start:0,limit:pageSize}});    
                          //数据源从新加载  
                    }  
                },   
                '-',   
                {                      
                    text: '添加',  
                    handler: function(btn, pressed)  
                    {  
                       AddJournalInfo();       //添加新的角色信息  
                         
                    }  
                }, '-',                 
                {                      
                    text: '编辑',  
                    handler: function(btn, pressed)  
                    {    
                           var row=Ext.getCmp("id_journal_grid").getSelectionModel().getSelections();//选择行的个数  
                                 if(row.length==0)  
                                {  
                                    Ext.Msg.alert("提示信息","请您至少选择一个!");  
                                }  
                                else if(row.length>1){    
                                    Ext.Msg.alert("提示信息","对不起只能选择一个!");  
                                }else if(row.length==1)  
                                {  
                                   EditJournalInfo(row[0]);//传行一行记录直接加载 编辑角色信息  
                                }                     
                    }  
                }, '-',                 
                {                      
                    text: '删除',  
                    handler: function(btn, pressed)  
                    {  
                           var row=Ext.getCmp("id_journal_grid").getSelectionModel().getSelections();    //获取选中的行  
                            if(row.length==0)  
                            {  
                                Ext.Msg.alert("提示信息","请您至少选择一个!");  
                            }  
                            else{    
                                Ext.Msg.confirm("提 示!","您确定要删除吗?",function(btn){   
                                    if(btn=="yes")  
                                    {  
                                                                             
                                       DeleteJournalInfo(row);//删除角色信息  
                                    }  
                                    else 
                                    {  
                                         
                                    }  
                                })  
                            }   
                    }  
                },'-',   
                {                      
                    text: '综合查询',  
                    handler: function(btn, pressed)  
                    {  
                       
                     Ext.getCmp("QueryForm").toggleCollapse(true);//将formset展开  
                      
                    }  
                }, '-' 
                ] 
tbar:  //工具条
          [
           {                   
                    text: '刷新',
                    cls: 'x-btn-text-icon details',
                
                    handler: function(btn, pressed)
                    {//重置查询条件
                      Ext.getCmp("QueryForm").findById('journalName').reset();
                        Ext.getCmp("QueryForm").findById('journalOrganizer').reset();
                        Ext.getCmp("QueryForm").findById('journalLevel').reset();
                        Ext.getCmp("QueryForm").findById('JournalIsCore').reset();
                          journal_store.load({params:{start:0,limit:pageSize}}); 
                          //数据源从新加载
                    }
                },
                '-',
                {                   
                    text: '添加',
                    handler: function(btn, pressed)
                    {
                       AddJournalInfo();       //添加新的角色信息
                      
                    }
                }, '-',              
                {                   
                    text: '编辑',
                    handler: function(btn, pressed)
                    { 
                           var row=Ext.getCmp("id_journal_grid").getSelectionModel().getSelections();//选择行的个数
                                 if(row.length==0)
                                {
                                    Ext.Msg.alert("提示信息","请您至少选择一个!");
                                }
                                else if(row.length>1){ 
                                    Ext.Msg.alert("提示信息","对不起只能选择一个!");
                                }else if(row.length==1)
                                {
                                   EditJournalInfo(row[0]);//传行一行记录直接加载 编辑角色信息
                                }                  
                    }
                }, '-',              
                {                   
                    text: '删除',
                    handler: function(btn, pressed)
                    {
                           var row=Ext.getCmp("id_journal_grid").getSelectionModel().getSelections();    //获取选中的行
                            if(row.length==0)
                            {
                                Ext.Msg.alert("提示信息","请您至少选择一个!");
                            }
                            else{ 
                                Ext.Msg.confirm("提 示!","您确定要删除吗?",function(btn){
                                    if(btn=="yes")
                                    {
                                                                          
                                       DeleteJournalInfo(row);//删除角色信息
                                    }
                                    else
                                    {
                                      
                                    }
                                })
                            }
                    }
                },'-',
                {                   
                    text: '综合查询',
                    handler: function(btn, pressed)
                    {
                    
                     Ext.getCmp("QueryForm").toggleCollapse(true);//将formset展开
                   
                    }
                }, '-'
          ]

五：设置分页

view plaincopy to clipboardprint?
//分页  
                bbar:new Ext.PagingToolbar({  
                    store:journal_store,           //数据源  
                    pageSize:pageSize,  
                    //显示右下角信息  
                    displayInfo:true,  
                    displayMsg:'当前记录 {0} -- {1} 条 共 {2} 条记录',  
                    emptyMsg:"No results to display",  
                    prevText:"上一页",  
                    nextText:"下一页",  
                    refreshText:"刷新",  
                    lastText:"最后页",  
                    firstText:"第一页",  
                    beforePageText:"当前页",  
                    afterPageText:"共{0}页" 
                    })  
            }); 
//分页
          bbar:new Ext.PagingToolbar({
           store:journal_store,           //数据源
           pageSize:pageSize,
           //显示右下角信息
           displayInfo:true,
           displayMsg:'当前记录 {0} -- {1} 条 共 {2} 条记录',
              emptyMsg:"No results to display",
              prevText:"上一页",
           nextText:"下一页",
           refreshText:"刷新",
           lastText:"最后页",
           firstText:"第一页",
           beforePageText:"当前页",
           afterPageText:"共{0}页"
                   })
            });

六：设置右键菜单

view plaincopy to clipboardprint?
//为右键菜单添加事件监听器  
      journal_grid.addListener('rowcontextmenu',rightClickFn);  
       var rightClick = new Ext.menu.Menu  
       (  
           {  
               items:  
               [  
                   {  
                       id: 'rMenu1',  
                       handler:AddJournalInfo,//点击后触发的事件  
                       text: '增加角色' 
                   },  
                   {  
                       id:'rMenu2',  
                       text:'编辑角色',  
                       handler:function()  
                           {  
                              JournalEdit();  
                           }  
                   },  
                    {  
                       id:'rMenu3',  
                       text:'删除角色',  
                       handler: function()  
                       {  
                          JournalDelete();  
                       }  
                   }  
                     
               ]  
           }  
       );