鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-07/172.html

----------------------------------------------------------------------------------------------

Ext中的表格功能非常强大,包括排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。表格由类Ext.grid.GridPanel定义,继承自Ext.Panel,其xtype为grid。在EXT中,表格控件必须包含列定义信息,并指定表格的数据存储器。表格数据最起码有列、数据、转换原始数据这3项。列信息由数组columns定义,表格的数据存储器由Ext.data.Store来定义。store负责把各种各样(如二维数组、JSON对象数组、XML文本等)的原始数据转换成Ext.data.Record类型的对象。通过Ext.data.ArrayStore我们可以把任何格式的数据转化成表格可以使用的形式,这样就不需要为每种数据格式写一个对应的实现了。

制作一个简单的表格及属性说明

/**
* Grid
*/ //表格数据最起码有列、数据、转换原始数据这3项
Ext.onReady(function(){
//定义列
var columns = [
{header:'编号',dataIndex:'id'}, //sortable:true 可设置是否为该列进行排序
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
];
//定义数据
var data =[
['1','张三','描述01'],
['2','李四','描述02'],
['3','王五','描述03'],
['4','束洋洋','思考者日记网'],
['5','高飞','描述05']
];
//转换原始数据为“EXT可以显示的数据”
var store = new Ext.data.ArrayStore({
data:data,
fields:[
{name:'id'}, //mapping:0 这样的可以指定列显示的位置,0代表第1列,可以随意设置列显示的位置
{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 //自动填满表格
});
});

看见看出,相比easyui,Extjs将Gird代码进行了分离,将列、数据的定义拆分出来,这样代码看起来更加清醒。

运行结果:

ExtJS4.2学习(三)Grid表格(转)的更多相关文章

  1. ExtJS学习(三)Grid表格

    表格说明 Ext中的表格功能非常强大,包括排序.缓存.拖动.隐藏某一列.自动显示行号.列汇总.单元格编辑等实用功能.表格由类Ext.grid.GridPanel定义,继承自Ext.Panel,其xty ...

  2. ExtJS4.2学习(四)Grid表格中文排序问题(转)

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-07/173.html --------------- ...

  3. ExtJS4.2学习(九)属性表格控件PropertyGrid(转)

    鸣谢网址:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-15/178.html ------------- ...

  4. ExtJS4.2学习(12)基于表格的右键菜单(转)

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-24/181.html --------------- ...

  5. ExtJS4.2学习(14)基于表格的扩展插件(2)(转)

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-26/184.html --------------- ...

  6. ExtJS4.2学习(13)基于表格的扩展插件---rowEditing

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-24/182.html --------------- ...

  7. ExtJS4.2学习(10)分组表格控件--GroupingGrid(转)

    鸣谢网址:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-17/179.html ------------- ...

  8. ExtJS4.2学习(15)树形表格(转)

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-27/185.html --------------- ...

  9. [ExtJS5学习笔记]第三十三节 sencha extjs 5 grid表格导出excel

    使用extjs肯定少不了使用表格控件,用到表格,领导们(一般)还是惯于使用excel看数据,所以用到extjs表格的技术猿们肯定也会有导出表格excel这一个需求,本文主要针对如何在用extjs将gr ...

随机推荐

  1. JavaScript之模拟评星打分

    <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312&qu ...

  2. C# DateTime格式化

    DateTime. ToString() -- :: ToBinary() - ToFileTime() ToFileTimeUtc() ToLocalTime() -- :: ToLongDateS ...

  3. C# 保存PictureBox中的图片到数据库,并从数据库读取图片显示到PictrueBox,解决报错 “无效参数”

    下面是两段关键代码: /// <summary> /// 将一张图片转换为字节 /// </summary> /// <param name="img" ...

  4. Java+FlexPaper+swfTools 文档在线预览demo

    1.概述 主要原理 1.通过第三方工具openoffice,将word.excel.ppt.txt等文件转换为pdf文件 2.通过swfTools将pdf文件转换成swf格式的文件 3.通过FlexP ...

  5. 判断IFeatureClass图形是否含有Z值信息,若有为IPoint赋Z值

    判断IFeatureClass图形是否含有Z值信息 IFeatureClass featureClass = this.pLayer.FeatureClass; string shapeFieldNa ...

  6. Linux SCSI回调IO的分析

    本文转载自:http://blog.csdn.net/xushiyan/article/details/6941640,如需参考,请访问原始链接地址. 没找到如何转载的入口,只好全文copy了. -- ...

  7. 模板与继承之艺术——奇特的递归模板模式(CRTP)

    一.什么是CRTP 奇特的模板递归模式(Curiously Recurring Template Pattern)即将派生类本身作为模板参数传递给基类. template<typename T& ...

  8. 基于TLS的反调试技术

    TLS(Thread Local Storage 线程局部存储) 一个进程中的每个线程在访问同一个线程局部存储时,访问到的都是独立的绑定于该线程的数据块.在PEB(进程环境块)中TLS存储槽共64个( ...

  9. =====关于swing的一些收集-swing大收集======

    一篇经典的 介绍netbeans中swing 应用程序框架的文章 http://blog.csdn.net/tangwing/article/details/5745075 Swing外观框架 Bea ...

  10. C#语言的Image和byte数组的互相转换

    /// <summary> /// 字节数组转换为图片 /// </summary> /// <param name="buffer">字节数组 ...