ExtJS使用ColumnModel创建表格和使用ArrayReader解析数组
本文由发表于7年前 | Javascript | 评论数 1 |  被围观 9,348 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 指弹吉他 && 技术 more
分享到:
 
2011 5/9
文章评论
    一条评论
  1. 俊逸 2013年05月21日10:18:09  #-49楼 回复 回复

    还好吧

给我留言

有人回复时邮件通知我
Javascript的相关文章
随机文章 本月热门 热评
1 Java笔记 – 正则表达式 matches()与lookingAt() 2013/12/15
2 JVM笔记 – 高效并发(Java内存模型与线程) 2015/3/1
3 文件管理-外存分配方式 目录管理 存储空间管理 2011/6/30
4 Android中的常用控件之Spinner DatePicker AutoCompleteTextView 2011/7/13
5 JavaScript设计模式笔记 – 职责链模式 2012/12/28
6 web网站项目编写页面时需要注意的事项 2011/5/15
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

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

联系我们:admin@itzhai.com

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