extjs4GridPanel的几种风格介绍
简单的形式排序、显示列、读取本地数据
复制代码代码如下所示：
本地数据
var数据{
{ 1，'gao '，'}，{ 2，'gao '，'}，{3，'gao '，' ' }
}；
创建面板
ext.create（'ext.grid。面板，{
标题：简单网格，
宽度：400，
身高：300，
render（）：Ext.getBody，
框架：真实，
ViewConfig：{
forcefit：真，
striprows：真
}，
存储：{代理配置数据
领域：{ 'id'，'name'，}，
代理：{
类型：记忆，
数据：数据，
读者：'array ' / /数据读取器读取数据
}，
加载：真
}，
列：自定义列信息
标题：'id'，
宽度：30，
数据的索引：田间'id' / /字段绑定
分类：真实
{ }。
标题：'name'，
宽度：80，
数据的索引：'name'，
分类：真实
{ }。
标题：'，
宽度：80，
数据的索引：'，
分类：真实
}
}
}）
表列：
线数、布尔线或没有，日期格式输出（日期前天），数字数据类型的格式输出（变化量）、行动（操作柱）柱
代码；
复制代码代码如下所示：
Ext.tip.QuickTipManager.init（）；
ext.create（'ext.data。店，{
storeid：'samplestore，
字段：{
名称：'framework，
类型：'String'
{ }。
名称：'rocks，
类型：'boolean
{ }。
名称：，
类型：数
{ }。
名称：'topday，
类型：'date
{ }。
名称：‘变'，
类型：数
{ }。
名称：'date，
类型：'date
{ }。
名称：'price，
类型：数
}
}，
数据：{
项目：{
框架：扩展JS 1
岩石：是真的吗，
符号：Google
日期： / 04 / 22，
更改：0.8997，
卷：3053782，
鼎力达：2004 / 11 / 2010，
价格：1000.23
{ }。
框架：扩展JS 2
岩石：是真的吗，
符号：Google
日期： / 04 / 22，
更改：0.8997，
卷：3053782，
鼎力达：2004 / 11 / 2010，
价格：1000.23
{ }。
框架：扩展JS 3
岩石：是真的吗，
符号：Google
日期： / 04 / 22，
更改：0.8997，
卷：3053782，
鼎力达：2004 / 11 / 2010，
价格：1000.23
} }
}，
代理：{
类型：记忆，
读者：{
类型：'json，
根：'items
}
}
}）；
ext.create（'ext.grid。面板，{
标题：'boolean柱演示，
店：Ext.data.StoreManager.lookup（'samplestore），
列：{
ext.create（'ext.grid。rownumberer，{文字：'行'，宽度：40 }）），
{
正文：'framework，
数据的索引：'framework，
宽度：100
{ }。
Xtype：'booleancolumn，
正文：'rocks，
truetext：'是'，
falsetext：'不'，
数据的索引：'rocks
{ }。
正文：'date，
数据的索引：'date，
Xtype：'datecolumn，
格式：Y M月D日
{ }。
文字：‘变'，
数据的索引：‘变'，
Xtype：'numbercolumn，
格式：'0.000
{ }。
正文：'，
数据的索引：'，
Xtype：'numbercolumn，
格式：'0000
{ }。
文字：'天'，
数据的索引：'topday，
Xtype：'datecolumn，
格式：L
{ }。
正文：当前价格，
数据的索引：'price，
渲染：ext.util.format.usmoney
{ }。
标题：操作，
Xtype：'actioncolumn ' / /塔的操作
宽度：100，
项目：{
图标：'e.gif，编辑/图片。
提示：编辑 / /鼠标显示文字使用这种功能，Ext.tip.QuickTipManager.init（必须）；
汉德勒：功能（网格，开始，colindex）{
VaR REC = grid.getstore（）GetAt（开始）；
警报（编辑+ rec.get（'framework '））；
}
{ }。
'd.gif图标，
提示：'delete，
汉德勒：功能（网格，开始，
colindex）{
VaR REC = grid.getstore（）GetAt（开始）；
警报（终止+ rec.get（'framework '））；
}
} }
{ }。
}
}，
身高：200，
宽度：800，
render（）：Ext.getBody
}）；
下面的图表是单击操作（编辑，删除）按钮触发的回调函数的详细信息。
下面是一个自定义渲染函数的演示
影响：
复制代码代码如下所示：
Ext.tip.QuickTipManager.init（）；
自定义函数（函数值，元数据）{
如果（值> 10）{
metadata.style =颜色：红色；
}
返回值；
}
ext.create（'ext.data。店，{
storeid：'samplestore，
字段：{
名称：定制的，
类型：数
}
}，
数据：{
项目：{
自定义：10
{ }。
自定义：100
{ }。
自定义：1000
} }
}，
代理：{
类型：记忆，
读者：{
类型：'json，
根：'items
}
}
}）；
ext.create（'ext.grid。面板，{
标题：'boolean柱演示，
店：Ext.data.StoreManager.lookup（'samplestore），
列：{
ext.create（'ext.grid。rownumberer，{文字：'行'，宽度：40 }）），
{
正文：定制的，
数据的索引：定制的，
渲染： / /调用自定义函数显示一个自定义函数
}
}，
身高：200，
宽度：800，
render（）：Ext.getBody
}）；
选择模式：选择
选择模式分为三类：
1，行选择（默认）
2。细胞的选择
三.复选框选择（复选框组）
演示单元选择码：
仅在上面的代码配置部分中添加
复制代码代码如下所示：
对象：{
{
文本：获得选定单元格，
汉德勒：函数（）{
VaR细胞= grid.getselectionmodel（）GetCurrentPosition（）； / / getselectionmodel（）获取当前选择模式，和getCurrentPosition（）获取当前选定的单元格。
警报（Ext.JSON.encode（细胞））；
}
}
}，
SelType：'cellmodel ' / /设置选择模式的细胞选择
选线：
影响：
复制代码代码如下所示：
对象：{
{
文本：获得选定的行，
汉德勒：函数（）{
无功行= grid.getselectionmodel（）GetSelection（）； / / getSelection（）；获取所选记录当前数组
var；
对于（var i = 0；i < rows.length；i++）{
var行=行{ }；
var创建=新日期（row.get（'date '））；
Msg.push（'date选定的行列：mydate.tolocalestring（+））； / /时间格式转换
}
警报（msg.join（' ；
}
}
}，
SelType：'rowmodel ' / /选择线选择模式
simpleselect： / /真简单选择启用
多选：真实 / /启用多线选择
enablekeynav： /真实启用键盘导航
复选框选择：
影响：
复制代码代码如下所示：
对象：{
{
文本：获得选定的行，
汉德勒：函数（）{
无功行= grid.getselectionmodel（）GetSelection（）； / / getSelection（）；获取所选记录当前数组
var；
对于（var i = 0；i < rows.length；i++）{
var行=行{ }；
var创建=新日期（row.get（'date '））；
var = grid.getstore（网格）； / /获取数据源
VaR值= s.indexof（行）+ 1； / / + 1因为线从0开始的行数
Msg.push（选中+数+线+ mydate.tolocalestring日期栏：（））；
}
警报（msg.join（' ；
}
}
}，
SelType：'checkboxmodel ' / /选择线选择模式
simpleselect： / /真简单选择启用
多选：真实 / /启用多线选择
enablekeynav： /真实启用键盘导航
表格功能：特性
表格总结ext.grid.feature.summary
聚合值计算是根据表的每一列计算的。计算指定的summarytype决策。
5以上。
在这种情况下，求和和平均的应用
复制代码代码如下所示：
Ext.define（'testresult，{
延伸：'ext.data模型，
领域：{ 'student，{
姓名：马克，
类型：'int
} }
}）；
无功网= ext.create（'ext.grid。面板，{
宽度：200，
身高：140，
render：document.body，
特性：{
Ftype：'summary
} }，
商店：{
模型：'testresult，
数据：{
学生：'student 1，
马克：84
{ }。
学生：'student 2，
马克：72
{ }。
学生：'student 3，
马克：96
{ }。
Student:'Student 4',
马克：68
} }
}，
列：{
数据的索引：'student，
正文：'name'，
summarytype：count， / /汇总列
summaryrenderer：函数（值）{
Grid.getStore（）
返回ext.string.format（{ 0 }生{ 1 }，值，值！s：= 1）；
}
{ }。
数据的索引：马克，
正文：马克，
summarytype：平均
} }
}）
无功网= ext.create（'ext.grid。面板，{
宽度：200，
身高：140，
RenderTo: document.body,
特性：{
Ftype：'summary
} }，
商店：{
模型：'testresult，
数据：{
学生：'student 1，
马克：84
{ }。
学生：'student 2，
马克：72
{ }。
学生：'student 3，
马克：96
{ }。
学生：'student 4，
马克：68
} }
}，
列：{
数据的索引：'student，
name'text，
summarytype：count， / /汇总列
summaryrenderer：函数（值）{
（ / /网格。getStore）
返回ext.string.format（{ 0 }生{ 1 }，值，值！s：= 1）；
}
{ }。
数据的索引：马克，
正文：马克，
summarytype：平均，
，
summaryrenderer：函数（值）{
（ / /网格。getStore）
返回ext.string.format（平均分为：{ 0 }，值）；
} }
}）
表分组：ext.grid.feature.grouping
代码：
复制代码代码如下所示：
Ext.define（'testresult，{
延伸：'ext.data模型，
领域：{ 'student '，' '，{
姓名：马克，
类型：'int
} }
}）；
无功网= ext.create（'ext.grid。面板，{
宽度：400，
身高：300，
render：document.body，
特点：{
ext.create（'ext.grid。特征分组，
{
groupbytext：是集中在这一领域的，
showgroupstext：显示组，
groupheadertpl：班级：{姓名}（{行。长度}）， / /分组显示模板
startcollapsed真实 / /：设置初始包不起来
}）
}，
商店：{
模型：'testresult，
groupfield：' '，
数据：{
学生：'student 1，
类：1，
马克：84
{ }。
学生：'student 2，
类：1，
马克：72
{ }。
学生：'student 3，
班：2，
马克：96
{ }。
学生：'student 4，
班：2，
马克：68
} }
}，
列：{
数据的索引：'student，
正文：'name'，
summarytype：count， / /汇总列
summaryrenderer：函数（值）{
Grid.getStore（）
返回ext.string.format（{ 0 }生{ 1 }，值，值！s：= 1）；
}
{ }。
数据的索引：马克，
正文：马克，
summarytype：平均
}，
{ dataIndex：' '，
文字：' '
} }
}）
在下面的列中，单击/单击表，这样字段组将立即更改分组规则。
表的总结：ext.grid.feature.groupsummary
代码只需要在上面。
表插件：插件
ext.grid.plugin.cellediting细胞编辑
代码：
复制代码代码如下所示：
VaR数据= { { 'gao，日期（1922, 02，03，2000）} }；
ext.create（'ext.grid。面板，{
题目：演示，
框架：真实，
render（）：Ext.getBody，
宽度：400，
身高：300，
商店：{
领域：{ 'name'，'birth '，'salary}，
数据：数据，
代理：{
类型：记忆，
数据：数据，
Reader:'array'
}，
加载：真
}，
插件：{
ext.create（'ext.grid。插件。cellediting，{
clickstoedit：1
}）
}，
SelType：'cellmodel，
列：{ ext.create（'ext.grid。rownumberer，{文字：'行'，宽度：40 }）），
{
标题：名称，
宽度：80，
数据的索引：'name'，
编辑程序：定义的字段
Xtype：'textfield，
allowblank：假，
}
}
，
{
头球：生日，
宽度：100，
数据的索引：'birth，
Xtype：'datecolumn，
编辑程序：定义的字段
Xtype：'datefield，
格式：'y-m-d，
allowblank：假
}
}
，
{
标题：工资，
宽度：100，
数据的索引：'salary，X型：'numbercolumn，
编辑程序：定义的字段
Xtype：'numberfield，
格式：0000美元，
allowblank：假
}
}
}
}）
表行编辑ext.grid.plugin.rowediting
代码只需要：
为了获得修改后的数据，Ajax请求服务器做出响应。
复制代码代码如下所示：
Grid.on（'edit，Onedit，这）； / /添加编辑事件数据
功能Onedit（e）{
警报（e.record.get（'name'））； / /得到（）的参数字段的名称。
}
在GridPanel CheckBox列初始化是否是基于数据库的价值选择
复制代码代码如下所示：
听众：{
加载：函数（存储）{
var指数= 0；
store.each（功能（记录）{）
如果（record.data.column_name = = 1）{ / / column_name取代你的名字‘取代你的价值
Grid.selModel.selectRow（索引，真的）；
}
索引+；
}）
}
}