ExtJS使用ColumnModel创建表格和使用ArrayReader解析数组
本文由发表于7年前 | Javascript | 评论数 1 |  被围观 10,894 views+

在ExtJS创建表格可以按照以下几个基本步骤完成:

创建一个ColumnModel对象

Ext.grid.ColumnModel类描述了列的属性,具体列属性由列名和列索引组件组成,以下创建一个ColumnModel对象,并设置4个列的属性值:

var cm = new Ext.grid.ColumnModel([
	{header:'曲目编号', dataIndex:'music_id'},
	{header:'曲目名称', dataIndex:'music_name'},
	{header:'作曲家', dataIndex:'composer'},
	{header:'演奏乐器', dataIndex:'instrument'}
]);
准备好数据源

这里我们直接使用JavaScript数组来描述表格中的数据:

var data = [
	['001', 'Oasis', 'Kotaro Oshio', '吉他'],
	['002', 'Classical Gas', 'Tommy.Emmanuel','吉他'],
	['003', 'THIS WAY', 'Depapepe', '吉他']
];
创建store对象

在Store中,可以使用MemoryProxy对象封装上一步使用JavaScript创建的静态数组,并且使用Ext.data.ArrayReader将数组解析成记录集的形式:

var store = new Ext.data.Store({
	proxy:new Ext.data.MemoryProxy(data),
	reader:new Ext.data.ArrayReader([
		{name:'music_id'},
		{name:'music_name'},
		{name:'composer'},
		{name:'instrument'}
	])
});
store.load();
创建GridPanel用于显示表格
var gridPanel = new Ext.grid.GridPanel({
	renderTo:'gridPanel',
	autoHeight:true,
	store:store,
	cm:cm
});
HTML代码
<div id="gridPanel"></div>
除了文章中有特别说明,均为IT宅原创文章,转载请以链接形式注明出处。
本文链接:http://www.itzhai.com/extjs-to-create-tables-and-use-the-columnmodel-array-analysis-using-arrayreader.html
arthinking Java技术交流群:280755654,入门群:428693174 more
分享到:
 
2011 5/9
文章评论
    一条评论
  1. 俊逸 2013年05月21日10:18:09  #-49楼 回复 回复

    还好吧

给我留言

有人回复时邮件通知我
Javascript的相关文章
随机文章 本月热门 热评
1 Android中的常用控件及其基本用法 2011/7/12
2 Java Web笔记 – 简单的权限管理控制实现 2011/11/12
3 Intent的基本作用和在程序中的用法 2011/7/12
4 8251A查询法收发数据的通信程序 2011/4/27
5 使用call和ret实现汇编中的子程序 2011/4/18
6 ExtJS表格使用JsonStore条件查询参数不能传递参数给第二页的解决方法 2011/7/29
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
Mr.5's Life 白天是一名程序员,晚上就是个有抱负的探索者
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

IT宅中的文章除了标题注明转载或有特别说明的文章,均为IT宅的技术知识总结,学习笔记或随笔。如果喜欢,请使用文章下面提供的分享组件。转载请注明出处并加入文章的原链接。 感谢大家的支持。

联系我们:admin@itzhai.com

Theme by arthinking. Copyright © 2011-2015 IT宅.com 保留所有权利.