Extjs学习笔记——Grid表格

原创 2015年11月20日 02:15:35

Ext表格功能包括排序、缓存、拖动、隐藏某列、自动显示行号、列汇总、单元格编辑等。表格由Ext.grid.GridPanel定义,继承自Ext.Panel,其xtype为grid。表格控件包含列定义信息,并指定表格数据存储器。表格数据包含列、数据、转换原始数据3项,列信息由columns定义,数据存储器由Ext.data.ArrayStore定义,store负责原始数据转换。具体如下:

Ext.onReady(function(){  


    //定义列  
    var columns = [  
        {header:'编号',dataIndex:'id'},
        {header:'名称',dataIndex:'name'},  
        {header:'描述',dataIndex:'descn'}  
      ];  


    //定义数据  
    var data =[  
        ['1','张三','描述1'],  
        ['2','李四','描述2']
    ];  


    //转换原始数据为Ext可以显示的数据  
    var store = new Ext.data.ArrayStore({  
        data:data,  
        fields:[  
           {name:'id'}, 
           {name:'name'},  
           {name:'descn'}  
        ]  
    });  


    //加载数据  
    store.load();  
      
    //创建表格  
    var grid = new Ext.grid.GridPanel({  
        renderTo:'grid',                                //渲染位置  
        store:store,                                      //转换后的数据  
        columns:columns,                        //显示列  
        stripeRows:true,                            //斑马线效果  
        enableColumnMove: false,         //禁止拖放列  
        enableColumnResize: false,     //禁止改变列宽度  
        loadMask:true,                              //显示遮罩和提示功能,即加载Loading……  
        forceFit:true                                    //自动填满表格  
    });  
});  





使用ExtJS5 GridPanel实现表格嵌套SubGrid(基于ExtJS MVC模式)

使用ExtJS-5.10 的 GridPanel组件实现表格嵌套,主要依赖于GridPanel自带的RowExpander插件,具体用法以及配置参数请参照API 这里有一个简单的表格嵌套Demo和大家...
  • yanJunit
  • yanJunit
  • 2016年11月23日 16:30
  • 1242

Extjs 表格grid 搜索过滤查询

按照名称实时查找过滤表格数据
  • Cookysurongbin
  • Cookysurongbin
  • 2016年03月24日 18:14
  • 2685

EXTJS 4 树形表格组件使用示例

TreeStore中使用了一个 Ext.data.NodeInterface来表示数的节点;在TreeStore的setRootNode方法中会调用NodeInterface的decorate方法向T...
  • shui878412
  • shui878412
  • 2014年09月30日 17:10
  • 2548

Ext.grid.Panel 数据动态改变后刷新grid

转自:http://www.cnblogs.com/webRongS/p/5759917.html gridPanel中加载的数据分为两种:一种是本地数据加载,那另一种就是后台数...
  • Dorothy1224
  • Dorothy1224
  • 2016年12月01日 11:25
  • 3640

ExtJs 设置GridPanel表格文本垂直居中

ExtJs 设置GridPanel表格文本垂直居中
  • li396864285
  • li396864285
  • 2013年07月12日 14:49
  • 3660

[Ext JS 4] Grid 中的单元格添加Tooltip 的效果

就是给这个Cell,添加Tooltip 的效果, 当鼠标移动到这个Cell 上面时, 弹出一个Tooltip 把所有的内容显示出来。...
  • oscar999
  • oscar999
  • 2016年02月26日 17:58
  • 5692

extjs_06_grid(列锁定&列分组)

extjs_06_grid(列锁定&列分组)
  • adam_zs
  • adam_zs
  • 2014年06月25日 22:06
  • 1931

Extjs Grid合并单元格

客户需求需要将grid  中的数据进行合并单元格处理!公司程序用的是extjs3.X 的代码底层生成的html 代码不是标准的table 代码,所以合并单元格只能另辟蹊径!以下是在网上找的extjs3...
  • T_zm_cross
  • T_zm_cross
  • 2016年07月07日 17:02
  • 1036

EXTJS panel单元格添加图片

1、下面是一个普通的extjs Panel,功能是图片管理。其中共有三个列,分别是名称、图片来源、状态,其中要求名称列显示图片缩略图,实现方式如下黄色字体,value是图片名称,      如,pic...
  • wang_tao219
  • wang_tao219
  • 2015年04月03日 10:58
  • 1949

表格数据分组:Ext.grid.GroupingView

表格数据分组:Ext.grid.GroupingView 博客分类:  ExtJS_3.0 EXT  1、Ext.grid.GroupingView       主要配置...
  • evilcry2012
  • evilcry2012
  • 2016年01月25日 15:28
  • 1294
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Extjs学习笔记——Grid表格
举报原因:
原因补充:

(最多只允许输入30个字)