04_展示数据
来源:互联网 发布:h5数据可视化 编辑:程序博客网 时间:2024/06/06 01:11
展示数据
数据驱动组件是Ext JS最强大的特性之一,比如grid组件。通过将组件与数据源连接,你可以创建随数据改变而改变的动态程序。
你可以用很多种方法为组件提供数据。其中一个简单的方法是直接使用内联数据。
Ext.Viewport.add({ xtype: 'tabpanel', items: [{ title: 'Employee Directory', xtype: 'grid', iconCls: 'x-fa fa-users', store: { data: [{ "firstName": "Jean", "lastName": "Grey", "officeLocation": "Lawrence, KS", "phoneNumber": "(372) 792-6728" }, { "firstName": "Phillip", "lastName": "Fry", "officeLocation": "Lawrence, KS", "phoneNumber": "(318) 224-8644" }, { "firstName": "Peter", "lastName": "Quill", "officeLocation": "Redwood City, CA", "phoneNumber": "(718) 480-8560" }] }, columns: [{ text: 'First Name', dataIndex: 'firstName', flex: 1 }, { text: 'Last Name', dataIndex: 'lastName', flex: 1 }, { text: 'Phone Number', dataIndex: 'phoneNumber', flex: 1 }] }, { title: 'About Sencha', iconCls: 'x-fa fa-info-circle' }]});
你可以在上面的例子中看到,我们添加了一个grid组件作为第一个标签。Ext JS grid是一个功能强大的组件,创建它却仅需要少量的几行代码。该组件将数据转换为包含行和列的表格,这些行跟列内置了排序,和一组即插即用的功能组件,比如分组,过滤等等。
仓储室(Stores)
你或许已经注意到,我们的表格增加了一个新的配置项-‘store’。Ext JS的仓储室是用来存放你所有数据记录的仓库。仓储室是数据处理的强有力的工具。使用它们可以很容易地对存放在仓储室中的数据进行排序,过滤和查询。
多数情况下,你的仓储室里的数据是来自外部的。比如数据库或者是REST接口。然后,为了便于演示,我们在数据仓储室的数据配置项上,为其添加硬编码数据记录。
提示:你可以选择各种仓储室。这些仓储室允许你根据你的需求,使用不现类型的格式化数据。
记录(Records)
记录是由字段组成的单独的实体,很像在数据库中的表的构建。记录可以包含很多列,每列可以转化为不同的数据类型(整型,浮点型,字符串型等)。然而,默认情况下,Ext JS一般会将列转换为合适的类型。
字段(Fields)
在这个示例中,我们的记录包含了四个字段。他们是:
l firstName
l lastName
l phoneNumber
l officeLocation
在我们的表格中,我们有三个列配置有数据索引(dataIndex)。数据索引指示该列在列中显示哪个数据字段的值。
下一步
既然我们已经学习过数据,让我们继续当我们轻击或点击表格中的列,事件作出的反应吧。
深入研究
更多关于数据的信息,请查阅我们的数据概览章节(http://docs.sencha.com/extjs/6.2.1/guides/core_concepts/data_package.html)。
- 04_展示数据
- Android数据存储和访问_ 商品展示案例
- 数据展示
- 广告展示_无缝
- 04_数据存储
- 使用C#开发数据库应用系统_使用ListView控件展示数据
- JPivot入门 展示数据
- 使用Displaytag展示数据
- 树形数据层次展示
- 数据层级展示
- UITableView 数据展示
- UITableView 数据展示 cell
- 调取jSon数据--展示
- 分页数据展示
- 树形数据展示
- Ajax展示数据
- Geotool 展示shapefile数据
- Python数据分析、展示
- PCA的数学原理(非常值得阅读)!!!!
- 浅谈React实现评论框(三)
- 火狐网页访问https提示安全连接失败
- 最短路练习 8/poj/3660/Cow Contest
- spring aop的五种通知类型(基于XML)
- 04_展示数据
- 20170424memo
- 题目1207:质因数的个数 九度OJ
- 如何 简单确定系统 合理的线程数
- SLAM for Dummies 数据关联中的问题
- npm搭建React项目
- sk_buff 学习笔记
- Opencv4Android人脸识别之opencv_contrib编译
- 管道实现进程间通讯 、WaitNamedPipe