ExtJS使用ColumnModel创建表格和使用ArrayReader解析数组
本文由发表于8年前 | Javascript

在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 8255A芯片的初始化程序流程 2011/4/28
2 JSF笔记 – 导航模型 静态导航和动态导航 2011/12/3
3 EXT的核心组件,相关的处理事件和类的使用 2011/7/24
4 ExecutorService常用方法和newFixedThreadPool创建固定大小的线程池 2012/7/30
5 Java基础笔记 – Java IO介绍以及File类的介绍和基本使用 2011/10/20
6 Java基础笔记 – 对象的序列化和反序列化及其实现和使用 2011/10/23
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

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

联系我们:admin@itzhai.com

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