第一部分:阐述grid与store的关系、gird中的ColumnModel与store中的fields的关系。
grid,即列表,他的核心功能就是用来展现数据列表,包括列表各列的头信息和实际数据。
grid的各列头信息是由ColumnModel来定义的。
grid的实际数据列表是通过Store来展现的。
grid的实例化如下:
var grid = new Ext.grid.GridPanel({
cm:cm,
store:store
...
});
相关图片示例如下:
ColumnModel中有两个非常重要的配置选项:header和dataIndex,
header就是列头的文本信息,是个字符串。
dataIndex是store中对应的数据结构定义,即对应于fields中各项的name值。
ColumnModel的构造函数接收的是数组类型的参数。用于一次性创建多个列信息。
如下:
var cm = new Ext.grid.ColumnModel([
...
]);
下面我们再看一下Store,即数据存储器。
Store由数据结构定义和数据组成。
数据结构定义的最简单的模式如下:
var fields = ["id","name","email","sex","age"];
只标识了各名称。就像创建数据库表结构一样,可以只创建表中各字段的名称。
因此最简单的数据存储器如下:
var data = [...];
var store = new Ext.data.Store({
data:data,//此处为与数据结构定义相对应的数据
fields:fields
...
});
因为ColumnModel的dataIndex配置选项是对应于store中的数据结构定义fields,
因此可以如下实例化ColumnModel:
var cm = new Ext.grid.ColumnModel([{
header:"id",
dataIndex:"id"//对应于grid的store的fields中的id
},{
header:"姓名",
dataIndex:"name"//对应于grid的store的fields中的name
},{
header:"email",
dataIndex:"email"//对应于grid的store的fields中的email
},{
header:"性别",
dataIndex:"sex"//对应于grid的store的fields中的sex
},{
header:"年龄",
dataIndex:"age"//对应于grid的store的fields中的age
}
]);
分享到:
相关推荐
ExtJS grid过滤操作,可以动态操作本地的store更改筛选的内容
extjs4 对多种store数据 ,以多种方式绑定到界面上,以一例子以说明编写
EXTJS中grid控件数据导出excel示例。很好理解。
Extjs 4.2 --store grid form mvc模式等一些demo
第一讲:extjs4.0概述和HELLO WORD程序 [01]EXTJS4.0的概述和HELLOWORD程序.wmv 第二讲:extjs4.0的新特性(附件较大做了分包压缩大家只要下载3个包运行001就ok了) [02]EXTJS4.0的新特性.003.zip (14.41M)[02]...
第一讲:extjs4.0概述和HELLO WORD程序 [01]EXTJS4.0的概述和HELLOWORD程序.wmv 第二讲:extjs4.0的新特性(附件较大做了分包压缩大家只要下载3个包运行001就ok了) [02]EXTJS4.0的新特性.003.zip (14.41M)[02]EXTJS...
第一讲:extjs4.0概述和HELLO WORD程序 [01]EXTJS4.0的概述和HELLOWORD程序.wmv 第二讲:extjs4.0的新特性(附件较大做了分包压缩大家只要下载3个包运行001就ok了) [02]EXTJS4.0的新特性.003.zip (14.41M)[02]EXTJS...
第一讲: EXTJS4.0概述和HelloWorld程序 第二讲: EXTJS4.0的新特性 第三讲: EXTJS4.0数据模型——Model 第四讲: EXTJS4.0的数据代理——Proxy 第五讲: EXTJS4.0的读写器Reader, Writer 第六讲: EXTJS4.0的数据集Store...
1、关于加载和回调的问题 ExtJs的Store在加载时候一般是延迟加载的,这时候Grid就会先出现一片空白,等加载完成后才出现数据;因此,我们需要给它添加一个提示信息! 但是Store却没有waitMsg属性。 解决方案: 1.给...
一个关于GridPanel的使用例子 介绍了Proxy,JsonReader Store gridPanel等几个对象的简单使用
郁闷 我在鼠标左侧点击tree节点,在右侧创建一个标签页,这个已经能够实现,于是我再在新建的标签页里嵌套一个Grid。 奇怪的问题出现了。。 FF和IE下都没报错。但是Grid就是不显示。本来我以为我代码错误。于是我狂...
这是使用 ExjJS 搜索的示例 该示例包含一个搜索框,用于输入乐队的名称或部分名称,单击搜索时,结果显示在下面的网格中. 您可以在此处查看 Sencha Fiddle 预览 这是应用程序的屏幕截图: 该应用程序的结构非常...
1.使用ExtJS6.5.0+SSM 2.实现Grid表格的增删改查和分页,数据库使用的是MySql, 3.项目代码和数据脚本齐全 4.Jar齐全,加载即可运行 5.VX:humingxing可随时交流
一、关于魅族和M8 214 二、TabPanel概述 214 三、TabPanel标签操作 216 四、标签弹出菜单 217 五、小结 220 第二十八章:Viewport类 221 一、概述 221 二、Viewport的基本使用 221 三、小结 226 第二十九章:综合...
最后利用一个商品信息管理系统和一个企业任务管理系统,向读者演示了ExtJS在实际项目中的应用以及实现流程。 《精通JS脚本之ExtJS框架》附有配套光盘,提供了书中实例的源代码和视频教学文件。此外,读者还可以...
导出Extjs中的store的数据为excel,前段js导出。 Export store to Excel Well, here's an exporter that can export a grid, tree or simply a store to excel. It's a fork from another project, I adapted it ...
Extjs5.0从入门到实战... panel, tabpanel,Tree, grid, form表单(及其验证方法),数据组件: store,model等,讲解了动态菜单、单表和子父表模块等的开发方法以及后端spring,spring mvc,mybatis的整合和数据打通等。
在项目实践的过程中,遇到需要将grid中数据根据某一字段分组的要求,当然,这个功能在api中有,在此列出来以供大家查找: 两点需要注意的地方: 1、在创建store时,需要设置groupField属性的值,即为需要分组的值 ...
EXT-JS Grid 用法 用EXT Designer 工具设计,步骤清晰详尽。
实现treegrid组件的(CRUD)读取、新增、修改、删除 ...store.load({node:node}); //异步Ajax提交新增数据 insertdb:function(newrecords) //异步Ajax提交修改数据 updatedb:function(updaterecords)