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

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();   
                       }   
                   }   
                      
               ]   
           }   
       );