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

Ext.GridPanel 用法总结(一)—— Grid基本用法的更多相关文章

  1. extjs grid renderer用法

    extjs grid renderer用法 摘自:http://www.cnblogs.com/ljian/archive/2011/10/27/2226959.html var cm = new E ...

  2. 【Ext.Net学习笔记】03:Ext.Net DirectEvents用法详解、DirectMethods用法详解

    Ext.Net通过DirectEvents进行服务器端异步的事件处理.[Ext.Net学习笔记]02:Ext.Net用法概览.Ext.Net MessageBus用法.Ext.Net布局 中已经简单的 ...

  3. extjs grid renderer用法【转载】

    今天在做项目时,需要在列表中的某列添加一个超链接,首先要取得当前选中行的数据,判断数据类型,然后链接到不同的页面,研究下.发现ExtJs提供了一个很强的方法如下: var cm = new Ext.g ...

  4. 转:Ext GridPanel根据条件显示复选框

    Ext GridPanel实现复选框选择框: var selectModel = new Ext.grid.CheckboxSelectionModel({ singleSelect : false ...

  5. 子查询。ANY三种用法。ALL两种用法。HAVING中使用子查询。SELECT中使用子查询。

    子查询存在的意义是解决多表查询带来的性能问题. 子查询返回单行多列: ANY三种用法: ALL两种用法: HAVING中的子查询返回单行单列: SELECT中使用子查询:(了解就好,避免使用这种方法! ...

  6. entrySet用法 以及遍历map的用法

    entrySet用法 以及遍历map的用法   keySet是键的集合,Set里面的类型即key的类型entrySet是 键-值 对的集合,Set里面的类型是Map.Entry   1.keySet( ...

  7. LOG4NET用法(个人比较喜欢的用法)

    LOG4NET用法(个人比较喜欢的用法) http://fanrsh.cnblogs.com/archive/2006/06/08/420546.html

  8. 7.1 安装软件包的三种方法 7.2 rpm包介绍 7.3 rpm工具用法 7.4 yum工具用法 7.5 yum搭建本地仓库

    7.1 安装软件包的三种方法 7.2 rpm包介绍 7.3 rpm工具用法 7.4 yum工具用法 7.5 yum搭建本地仓库 三种方法 rpm工具----->类型windows下的exe程序 ...

  9. 72. js EXTJS grid renderer用法

    转自:https://blog.csdn.net/shancunxiaoyazhi/article/details/22156083 renderer : Function (可选的)该函数用于加工单 ...

随机推荐

  1. Android开发(二十五)——Android上传文件至七牛

    设置头像: Drawable drawable = new BitmapDrawable(dBitmap); //Drawable drawable = Drawable.createFromPath ...

  2. 在Oracle Linux Server release 6.4下配置ocfs2文件系统

    ① 安装ocfs-tools-1.8 如果是使用RedHat Enterprise Linux 6.4,也可以安装ocfs-tools-1.8的,只是要插入Oracle Linux Server re ...

  3. wordpress自动保存远程图片插件 DX-auto-save-images

    wordpress自动保存远程图片插件DX-auto-save-images 解决了保存文章就可以自动将远程图片保存到你的服务器上了. 具体操作步骤如下: 1.安装启用wordpress自动保存远程图 ...

  4. 【Linux】——ctags

    ctags的功能:扫描指定的源文件,找出其中所包含的语法元素,并将找到的相关内容记录下来. ctags 可以在官网上下载源代码,然后编译安装.最后在 ~/.vimrc 文件中写入以下配置: " ...

  5. 2dtoolkit获取sprite像素大小的方法

    获取sprite像素的方法 Vector2 GetPixelSize(tk2dSpriteDefinition def){ ].x; ].y; // Calculate dimensions in p ...

  6. ux.form.field.SearchField 列表、树形菜单查询扩展

    //支持bind绑定store //列表搜索扩展,支持本地查询 //支持树形菜单本地一级菜单查询 Ext.define('ux.form.field.SearchField', { extend: ' ...

  7. HDU 3999 The order of a Tree

    The order of a Tree Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  8. 使用最新的“huihui中文语音库”实现文本转语音功能

    最近一个web项目中,需要进行语音播报,将动态的文字转换为语音(TTS)存为WAV文件后通过web播放给用户.选择了微软所提供的SAPI (The Microsoft Speech API),只需要几 ...

  9. angularjs + seajs构建Web Form前端(二)

    回顾 上一篇讲解了引入bootstrap构建一个简单的登录页面,如何让angularjs自动启动并绑定视图,操作过程当中如何使用ui-bootstrap,继而完成简单功能后如何引入seajs后如何使n ...

  10. smartjs 0.3 DataManager 发布&介绍

    在0.3版加入了DataManager,基于策略的数据管理模块:是SmartJS中比较重要的一个系列.整个个DataManager模块包括有:dataManager,dataPolicyManager ...