没有合适的资源?快使用搜索试试~ 我知道了~
ExtJS框架
资源推荐
资源详情
资源评论
Guide applies to:classic
Contents
Basic Grid Panel Model and Store Grid Panel Renderers Navigation Selection
Models Editing Cell Editing Row Editing Grouping Paging Store Setup Paging
Toolbar Buffered Rendering Embedded components.
Grids
Ext.grid.Panelis one of the centerpieces of ExtJS. It's an incredibly versatile
component that provides an easy way to display, sort, group, and edit data.
Basic Grid Panel
Let's get started by creating a basicExt.grid.Panel. Here's all you need to know to
get a simple grid up and running:
Model and Store
Ext.grid.Panelis simply a component that displays data contained in
aExt.data.Store.Ext.data.Storecan be thought of as a collection of records,
orExt.data.Modelinstances.
The benefit of this setup is separating our concerns.Ext.grid.Panelis only
concerned with displaying the data, whileExt.data.Storetakes care of fetching
and saving the data usingExt.data.proxy.Proxy.
First, we need to define aExt.data.Model. A model is just a collection
offieldsthat represents a type of data. Let's define a model that represents
a"User":
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [ 'name', 'email', 'phone' ]
});
Next let's create aExt.data.Storethat contains several"User"instances.
var userStore = Ext.create('Ext.data.Store', {
model: 'User',
data: [
{ name: 'Lisa', email: 'lisa@simpsons.com',
phone: '555-111-1224' },
{ name: 'Bart', email: 'bart@simpsons.com',
phone: '555-222-1234' },
{ name: 'Homer', email: 'homer@simpsons.com',
phone: '555-222-1244' },
{ name: 'Marge', email: 'marge@simpsons.com',
phone: '555-222-1254' }
]
});
For sake of ease, we configuredExt.data.Storeto load its data inline. In a real
world application, you would most likely configure theExt.data.Storeto use
anExt.data.proxy.Proxyto load data from the server.
Grid Panel
Now, we have a model, which defines our data structure. We have also loaded
several model instances into anExt.data.Store. Now we're ready to display the
data usingExt.grid.Panel.
In this example, we configured the Grid withrenderToto immediately render the
Grid into the HTML document.
In many situations, the grid will be a descendant ofExt.container.Viewport, which
means rendering is already handled.
Ext.create('Ext.grid.Panel', {
renderTo: document.body,
store: userStore,
width: 400,
height: 200,
title: 'Application Users',
columns: [
{
text: 'Name',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'name'
},
{
text: 'Email Address',
width: 150,
dataIndex: 'email',
hidden: true
},
{
text: 'Phone Number',
flex: 1,
dataIndex: 'phone'
}
]
});
And that's all there is to it.
We just created anExt.grid.Panelthat renders itself to the body element. We also
told the Grid panel to get its data from theuserStorethat we previously created.
剩余12页未读,继续阅读
资源评论
天水一方_sky
- 粉丝: 19
- 资源: 32
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- Unity适用于Windows与移动平台双端的轮盘交互式提示菜单
- UE5/UE4超详细教程接入科大讯飞语音唤醒SDK并初始持久监听(10102错误码解决)
- 靠搬运古装剧解说视频,日收益200+,作品原创度90%以上,超详细教程-教程网盘链接提取码下载 .txt
- 2024最强数学建模之美赛攻略.md
- STM32单片机FPGA毕设电路原理论文报告一种机器人寻线控制系统
- STM32单片机FPGA毕设电路原理论文报告一种光电编码器位置检测系统研究与应用
- linux常用命令大全
- ACM题库,分类整理.md
- STM32单片机FPGA毕设电路原理论文报告一种高速折刀运动控制系统的设计与实现
- ZYWIFI0939C循迹、红外避障、遥控综合程序.plg
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功