1.数据从哪来?
由数据存储器Ext.data.Store定义。它把各种原始数据转换成Ext.data.Record类型的对象数组。
如果把Store看作是一张二维表,那么它的每一行就对应一个Record实例。
定义Store要包含以下两个部分:
a.proxy:获取数据的方式。他是一个DataProxy 对象,定义一个对象,就要看到的构造方法,如果没有构造方法,要看看他的子类。
b.reader:如何解析获取到的数据。他是一个Reader 对象,它的定义思路和proxy的一样
2.怎样显示出来?
要通过列信息显示,Ext.grid.ColumnModel,怎样定义呢?
看一下它的构造方法:ColumnModel ( Mixed config ) ,再看看他的配置项,怎样定义有思路了吧。
3.一切就绪,可以创建一个最基本的表格了。
<script type="text/javascript">
Ext.onReady(function(){
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
var data = [
['1','name1','descn1'],
['2','name2','descn2'],
['3','name3','descn3'],
['4','name4','descn4'],
['5','name5','descn5']
];
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: 'id'},
{name: 'name'},
{name: 'descn'}
])
});
store.load();
var grid = new Ext.grid.GridPanel({
autoHeight: true,
renderTo: 'grid',
store: store,
cm: cm
});
});
</script>
分享到:
相关推荐
extjsDemo2 form panel 一个extjs的demo。1、描绘了表格的属性;2、一个简单的页面布局。供参考。
"extjs 简单表格"这个主题,我们将探讨如何在ExtJS中创建和使用基本的表格。 首先,我们需要理解ExtJS表格的基本结构。表格由多个部分组成,包括Store(数据存储)、Model(数据模型)、Column Model(列模型)和...
这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》
4. **Renderer Function**: 渲染器函数是EXTjs中一个重要的概念,它允许我们根据数据动态地生成单元格的内容和样式。在合并表格的场景中,我们可以在渲染器中添加逻辑判断,根据数据决定是否合并单元格。 5. **...
动态生成表格是ExtJS中的一个重要功能,它允许开发者根据需求灵活地构造表格结构和数据。 首先,我们需要了解ExtJS中的核心组件之一——GridPanel。GridPanel是一个显示二维数据的组件,通常用于展示大量结构化的...
ExtJS 是一个强大的JavaScript 框架,专用于构建富客户端Web应用程序。它提供了一整套组件库,包括用于创建类似Excel的表格的功能。在本文中,我们将深入探讨如何使用ExtJS来模拟Excel表格,以及实现Excel的各种功能...
### Extjs4.2 入门详细文档及表格初级制作 #### 一、Extjs4.2 下载与安装 **1.1 Extjs4.2 文件结构介绍** 初次接触到Extjs4.2的同学可能会对下载下来的文件夹结构感到困惑。下面我们将详细解释各个目录的作用: ...
在ExtJS中,行级别的合并通常通过在数据模型中添加一个特殊字段来标记需要合并的行。这个字段的值可以是行的索引或合并范围。然后,我们需要自定义`cellTpl`模板,检查该字段并使用CSS隐藏不需要显示的单元格。 2....
EXTJS 是一个强大的JavaScript 库,专用于构建富客户端应用程序,尤其在数据网格和桌面式Web应用方面表现出色。在上述描述中,我们看到如何利用EXTJS的Grid组件来构造一个矩阵视图,通常用于数据展示,比如流量矩阵...
自己写的一个简单的EXTJS的例子,开发准备用.
用extjs技术显示表格的信息,不过首先要导入extjs所需的库文件
在实现"ExtJs Filter 表格过滤"的Demo中,开发者通常会创建一个数据网格,配置每个列的过滤器,然后通过用户界面或代码触发过滤操作。通过分析和学习这个Demo,你可以理解如何集成过滤功能到自己的应用程序中,从而...
总结来说,EXTJS 4的树形表格组件是一个强大且灵活的工具,它集成了树状结构和表格的特性,为开发者提供了一种高效展示和操作层次数据的方式。无论是在桌面端还是移动端的应用开发中,EXTJS 4的TreeGrid都是一个值得...
动态表格是ExtJS中的一个重要组件,它允许用户以灵活的方式展示和操作数据。在这个“ExtJS 动态表格完整版”中,我们可以期待学习到关于如何创建、配置和定制动态表格的深入知识。 首先,动态表格的核心组件是`Ext....
extjs 可编辑的表格树,每个单元格自定义编辑组件,可以自适应列宽,只有源码与例子,运行实例要修改路径,不然图片不能显示,注意etree.jsp的js引入路径 支持Ext2.x以上版本 如运行不了EmailTo : codeme9@gmail....
### EXTJS Panel 知识点解析 ...在本示例中,我们通过一段简单的HTML代码及JavaScript脚本创建了一个基本的EXTJS `Panel`实例。首先,我们需要引入EXTJS的核心样式表和脚本文件,如下所示: ```html ...
#### 一、ExtJs表格超链接渲染 在ExtJs框架中,我们经常需要在表格(`Ext.grid.Panel`)中显示超链接,并且当用户点击这些超链接时,能够获取到当前行的数据。为了实现这一功能,我们可以使用`renderer`函数对...
一款基于EXTJS插件风格的表格合并示例,界面不用说了,使用EXT本身的界面风格,很漂亮,EXT功能很强大,这个表格合并功能只是其中一个比较实用的功能,这个例子带给大家,希望通过这个例子你会对EXT有更多的了解。
这个“ExtJS树形框架(一个例子)”示例项目展示了如何利用ExtJS创建一个与后端Oracle数据库、iBATIS持久层框架和Struts MVC框架交互的树形界面。下面,我们将深入探讨这些技术以及它们在该项目中的应用。 1. **...
只要将解压的文件直接放置到myeclipse的webroot下面,启动tomcat访问。简单的EXTJS mvc框架,设计 store,model,controller,view,window等等,同时展示了一些基本的点击显示、修改等等操作,需要的同学自行下载