ExtJS4.2学习(三)Grid表格(转)
鸣谢: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表格(转)的更多相关文章
- ExtJS学习(三)Grid表格
表格说明 Ext中的表格功能非常强大,包括排序.缓存.拖动.隐藏某一列.自动显示行号.列汇总.单元格编辑等实用功能.表格由类Ext.grid.GridPanel定义,继承自Ext.Panel,其xty ...
- ExtJS4.2学习(四)Grid表格中文排序问题(转)
鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-07/173.html --------------- ...
- ExtJS4.2学习(九)属性表格控件PropertyGrid(转)
鸣谢网址:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-15/178.html ------------- ...
- ExtJS4.2学习(12)基于表格的右键菜单(转)
鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-24/181.html --------------- ...
- ExtJS4.2学习(14)基于表格的扩展插件(2)(转)
鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-26/184.html --------------- ...
- ExtJS4.2学习(13)基于表格的扩展插件---rowEditing
鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-24/182.html --------------- ...
- ExtJS4.2学习(10)分组表格控件--GroupingGrid(转)
鸣谢网址:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-17/179.html ------------- ...
- ExtJS4.2学习(15)树形表格(转)
鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-27/185.html --------------- ...
- [ExtJS5学习笔记]第三十三节 sencha extjs 5 grid表格导出excel
使用extjs肯定少不了使用表格控件,用到表格,领导们(一般)还是惯于使用excel看数据,所以用到extjs表格的技术猿们肯定也会有导出表格excel这一个需求,本文主要针对如何在用extjs将gr ...
随机推荐
- jBPM - Eclipse 安装 jBPM 插件
假设 jBPM 包的解压路径为 E:/jbpm-installer,Eclipse 的安装目录为 E:/eclipse. 安装 jBPM 插件 1. 将 E:/jbpm-installer/lib 目 ...
- asp自动补全html标签自动闭合(正则表达式)
Function closeHTML(strContent) Dim arrTags, i, OpenPos, ClosePos, re, strMatchs, j, Match Set re = N ...
- 谷歌(Chrome)安装Advanced REST Client插件
进入Extensions(工具——>扩展程序) 点击Get More extensions或新建标签页点击网上应用店 如果加载太慢,出现chrome网上应用店无法打开,显示暂时无法加载该应用的画 ...
- Yii Framework处理网站前后台文件的方法
此方法参考官方网站的cookbook,详细请看http://www.yiiframework.com/doc/cookbook/33/, 我在此基础上做了一些改动,人个感觉非常棒了,大家可以试一下! ...
- 双网卡route配置
目前仅适用于windows: 192.168.*.*网段适用于上外网的 10网段适用于内网 route add 10.0.0.0 mask 255.0.0.0 10.34.6.1route add 1 ...
- css笔记——关于 body/html 的高度百分比
body{ height:100%; 视窗的高度 min-height:100%;文档的具体高度} 这两个百分比的具体高度在页脚永远放在文档底部非常重要,此时用min-height:100% 具体 ...
- java实现的一个maven多模块项目自动生成工具
平时在做spring mvc web新项目时,都需要自己去搭建spring mvc的项目框架,包括基本pom 依赖引入,基本配置文件(web.xml,spring-mvc.xml,数据库配置文件等等) ...
- XPOSED-LUA
转载说明 本篇文章可能已经更新,最新文章请转:http://www.sollyu.com/xposed-lua/ 说明 Xposed Lua Module 是一个Xposed的模块,他有下面的优点 本 ...
- Dribbble客户端应用源码
简约大气的Dribbble客户端,帮你时刻紧跟潮流,版本描述,添加对Likes & Following的支持设计简约的Dribbble客户端,提供了全面的浏览功能,让你时刻紧跟潮流! A BE ...
- wp8 自定义相机+nokia滤镜+录制amr音频
demo截图: 代码量有点多,就不贴出来了. 备注: 1.自定义相机主要横竖屏时,对相机进行旋转. 2.播放amr格式可以在页面中直接添加MediaElement控件进行播放,或者使用Bac ...