使用Ext.grid.Panel生成表格
使用Ext.grid.Panel生成表格
Ext.grid.Panel继承了Ext.panel.Panel,因此它的很多地方都类似于Ext.panel.Panel,但定义Ext.grid.Panel时必须指定如下两个选项。
- Ø store:该选项指定的Store对象负责为该表格提供数据。
- Ø columns:指定Ext.grid.column.Column数组或一个包含items属性(该属性值为Ext.grid.column.Column数组)的对象,该Ext.grid.column.Column数组指定Ext.grid.Panel生成的表格包含的所有列。
如下代码示范了如何使用Ext.grid.Panel来生成表格。
程序清单:codes\06\6.8\Ext.grid\Ext.grid.Panel.html
<body>
<script type="text/javascript">
Ext.onReady(function(){
Ext.define('Book', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'author', type: 'string'},
{name: 'price', type: 'float'},
{name: 'publishDate', type: 'date'}
]
});
// 创建一个Ext.data.Store对象
var bookStore = Ext.create('Ext.data.Store',
{
// 指定使用Book Model管理记录
model: 'Book',
// 直接使用data指定数据
data : [
{"id": 1, name: "疯狂Java讲义",
author:'李刚' , price: 109, publishDate:'2012-01-01'},
{"id": 2, name:"轻量级Java EE企业应用实战",
author:'李刚' , price: 99, publishDate:'2011-09-02'},
{"id": 3, name: "疯狂Ajax讲义",
author:'李刚' , price: 69, publishDate:'2012-09-08'},
]
});
Ext.create('Ext.grid.Panel', {
title: '查看图书',
width: 550, // 指定表单宽度
renderTo: Ext.getBody(),
// 定义该表格包含的所有数据列
columns: [
{ text: '书名', dataIndex: 'name' , flex: 1 }, // 第1个数据列
{ text: '作者', dataIndex: 'author', flex: 1 }, // 第2个数据列
{ text: '价格', dataIndex: 'price' , flex: 1 }, // 第3个数据列
// 第4个数据列
{ text: '出版时间', dataIndex: 'publishDate',
xtype:'datecolumn' , format:'Y年m月d日' , flex: 1},
],
store: bookStore
});
});
</script>
</body>
上面的示例创建了一个Ext.grid.Panel,这个Panel对象将会在页面上生成一个表格。定义该Ext.grid.Panel对象时指定了columns、store两个选项,其中columns选项指定该表格包含的数据列,以及各列所显示的数据;store选项指定一个Store对象,该Store负责提供该表格显示的数据。
在浏览器中浏览该页面,可以看到如图6.71所示效果。
图6.71 使用Ext.grid.Panel生成表格
从图6.71可以看出,使用Ext.grid.Panel生成的表格比普通HTML表格更美观,而且该表格默认可以对各列进行排序,并且可以自由控制各列的显示、隐藏。除此之外,Ext.grid.Panel生成表格的列默认允许通过拖动改变列宽、通过拖动改变列与列之间的排列顺序。
本文节选自
《疯狂Ajax讲义(第3版)》
李刚 编著
电子工业出版社出版
转载于:https://blog.51cto.com/bvbroadview/1139444
使用Ext.grid.Panel生成表格相关推荐
- Ext.grid.Panel表格分页
Ext.grid.Panel表格分页示例 代码: cshtml @{Layout = null; } <!DOCTYPE html> <html> <head>&l ...
- 使用Ext.grid.Panel显示远程数据
使用Ext.grid.Panel显示远程数据 对于Ext.grid.Panel而言,它只是负责显示Store数组中心的数据,至于Store保存的数据到底是浏览器本地数据,还是远程服务器的数据,Ext. ...
- 完善ext.grid.panel中的查询功能(紧接上一篇)
今天的代码主要是实现,Ext.grid.panel中的查询,其实我也是一名extjs新手,开始想的实现方式是另外再创建一个新的grid类来存放查询出的数据(就是有几个分类查询就创建几个grid类),这 ...
- Ext.grid.Panel一定要有renderTo或autoRender属性,不然页面为空
Ext.grid.Panel一定要有renderTo或autoRender属性,不然页面为空 Ext4.0.2 转载于:https://www.cnblogs.com/rav009/archive/2 ...
- Ext.js5的分组表格(4)
代码来源:Ext.js5资源包 /*** 这个例子是说明怎么使用表格的分组功能的,再一次用到了store.model,多整几次*/ Ext.define('KitchenSink.view.grid. ...
- Ext grid columns隐藏列
获取列对象 grid.getHeaderAtIndex(columnIndex): 获取类的dataIndex,text var fieldName = grid.getHeaderAtIndex(c ...
- 【翻译】将Ext JS Grid转换为Excel表格
原文:Converting an Ext 5 Grid to Excel Spreadsheet 稍微迟来的礼物--Ext JS Grid转为Excel代码,现在支持Ext JS 5! 功能包括: - ...
- Extjs 动态生成表格
在web显示数据时,会遇到grid的列数和行数不确定的这种情况.如何来根据数据动态的创建表格呢? Extjs 的json data给我们带来了一个很好的比较简单的方法. 要创建一个grid需要确定它的 ...
- [转]Ext Grid控件的配置与方法
http://www.blogjava.net/wangdetian168/archive/2011/04/12/348651.html 1.Ext.grid.GridPanel 主要配置项: sto ...
最新文章
- kubernetes学习笔记之十三:基于calico的网络策略入门
- AS1.0(2.0)中的XML示例
- 【计算理论】下推自动机 PDA ( 设计下推自动机 | 上下文无关语法 CFG 等价于 下推自动机 PDA )
- js浏览器和浏览器插件检测的方法总结
- linux grep -11,11个高级Linux字符类和括号表达式的grep命令
- c++ amp vs2017 报错_opencv4教程-1 opencv的安装与调试Windows10+vs2017
- 嵌入式操作系统内核原理和开发(通用优先级调度)
- delphi 停电文本数据丢失_河南照片数据恢复怎么联系
- 帆软报表重要Activator之DesignerInitActivator之四WestRegionContainerPane 设计器的左边部分文件列表以及数据集的部分
- 数据结构——>线索化二叉树
- 恒强制版系统980_恒强制版软件操作答疑
- 初始单片机 ----自学笔记
- iphone拍照标注转发微博应用--Gurgle 发布
- 三角函数逼近锯齿函数和阶梯函数
- net stop sharedaccess命令 2009-1-15 11:10
- 约当标准型_约当标准型.ppt
- 十大管理概念(背诵)
- MySQL 行级锁(行锁、临键锁、间隙锁) 小白教程
- linux 通过命令行打印本机IP
- Review of Software Construction
热门文章
- axure9数据统计插件_数据分析太棘手?常用8大统计软件解决难题!
- windows7安装com口驱动_windows7系统u盘插电脑没有反应的解决方法
- 栈溢出脚本_污点分析挖掘漏洞演示——如何在8小时内从零发现cve20120158(word溢出漏洞)...
- 中过滤记录中时间_初效板式过滤器使用中这些事情你要知道?
- 介绍一种在Xcode中删除一整行代码的快捷键设置,
- 4复数与复变函数(四)
- DenseNet细节
- GPU配置与使用策略
- mysql读写分离 存储过程_MySQL读写分离 · wang-y/Technical-Information Wiki · GitHub
- 金融数据分析之财务分析表要填数据怎么办?(学习理财课程后开发的助手工具)