Extjs4 GridPanel的几种样式使用介绍

简单表格排序，显示某列，读取本地数据

复制代码代码如下：//本地数据定义变量数据=[ ['1 '，'高'，'人']，['2 '，'高'，'人']，['3 '，'高'，'人']；//创建面板Ext.create('Ext.grid.Panel '，{ title: 'easy grid '，width: 400，height: 300，renderTo: Ext.getBody()，frame: true，view config : { force fit : true，stripRows: true }，store: {//配置数据代理fields: ['id '，' name '，' gender']，proxy: { type: 'memory '，data: datas，reader: 'array' //数据读取器为数据读取}，autoLoad: true }，第3360列[{//自定义列信息header: 'id '，width: 30，dataIndex: 'id '，//绑定田地（复数);场；域；字段中得字段sortable: true }，{ header: 'name '，width: 80，dataIndex: 'name '，sortable: true }，{ header: 'gender '，width: 80，dataIndex: 'gender '，sortable: true } ] })表格列：行号布尔行转成是否，日期格式化输出（日期，首日),数字数据类型格式化输出（变化、音量)、动作列（操作列)9501.163.com

代码；复制代码代码如下：分机。小费。快速小费经理。init()；Ext.create('Ext.data.Store '，{ storeId: 'sampleStore '，字段s :[{ name : ' framework '，type: 'string' }，{ name: 'rocks '，type: 'boolean' }，{ name: 'volume '，type: 'number' }，{ name: ' topday '，type 3: ' date ' }，{ name : '数据。商店经理。查找('示例存储')，列3360[ext。创建(' ext。网格。行号'，{ text: '行号，width: 40 })，{ text: 'Framework '，dataIndex: 'framework '，width: 100 }，{ xtype: 'booleancolumn '，text: 'Rocks '，trueText: '是，错误文本： '否，数据索引： '岩石' }，{ text: '日期'，数据索引： '日期'，xtype: '日期栏'，format: 'Y '年m月d日}、{ text: 'Change '、dataIndex: 'change '、xtype: 'numbercolumn '、format: '0.000' }、{ text: 'Volume '、dataIndex: 'volume '、xtype: 'numbercolumn '、format: '0，000' }、{ text: ' Top Day '、dataIndex:当前价格，数据索引： '价格，渲染： ext。乌提尔。格式。usmoney }，{ header: '操作，xtype: 'actioncolumn '，//操作列width: 100，items: [{ icon: 'e.gif '，//编辑图片地址tooltip: '编辑', //鼠标超过显示的文字使用此功能，必须延伸文件系统小费。快速小费经理。init()；手柄：函数(grid，rowIndex，colIndex) { var rec=grid.getStore().GetAT(RowIndex)；警报(‘编辑’rec。get(' framework ')；} }，{ icon: 'd.gif '，tooltip: 'Delete '，handler:函数(grid，rowIndex，colIndex) { var rec=grid.getStore().GetAT(RowIndex)；警报('终止rec。' get('框架'));} }] },{ } ],高： 200,宽： 800转：分机。getbody()})；下面这个图是单击操作（编辑，删除)按钮触发的回调函数的详细信息

下面演示自定义渲染函数效果：

复制代码代码如下：分机。小费。快速小费经理。init()；函数customFunction(值，元数据){ if(值10){元数据。style=' color : red}返回值；} Ext.create('Ext.data.Store '，{ storeId: 'sampleStore '，fields: [ { name: 'custom '，type: 'number' } ]，data : { ' items ' :[{ ' custom ' : 10 }，{ 'custom': 100 }，{ ' custom ' : 1000 } }，proxy 3360 { type : }数据。商店经理。查找('示例存储')，列3360[ext。创建(' ext。网格。行号'，{ text: '行号，宽度： 40 })，{ text: '自定义，数据索引： '自定义，render :自定义函数/调用自定义函数来渲染} ],高： 200,宽： 800转：分机。getbody()})；选择模式：选举选择模式分为三类： 1,行选择（默认)2.单元格选择3.复选框选择（复选框组)演示单元格选择代码：

只需在上述代码配置节当中，加入复制代码代码如下：tbar: [ { text: '取得所选单元格，处理程序：函数(){ var cell=grid。getselectionmodel().getCurrentPosition()；//getSelectionModel()获取当前选择模式，getCurrentPosition()获取当前选择的单元格警报（分机JSON。编码(细胞))；} } ]，selType:'cellmodel' //设置选择模式为单元格选择行选择：效果：

复制代码代码如下：tbar: [ { text: '取得所选行，手柄：函数(){ var rows=grid。getselectionmodel().getSelection()；//GetSelection()；获取当前选中的记录数组var msg=[]；for(var I=0；我行。长度；I){ var row=row[I]；var myDate=新日期(排。get(' Date ')；msg.push('选中行的日期列： ' MyDate。ToLocalString())；//转换时间格式}警报(消息。联接(' \ n ')；} } ]，selType: 'rowmodel '，//选择模式为行选择simpleSelect: true，//简单选择功能开启多选：真，//启用多行选择enableKeyNav: true //启用键盘导航复选框选择：效果：

复制代码代码如下：tbar: [ { text: '取得所选行，手柄：函数(){ var rows=grid。getselectionmodel().getSelection()；//GetSelection()；获取当前选中的记录数组var msg=[]；for(var I=0；我行。长度；I){ var row=row[I]；var myDate=新日期(排。get(' Date ')；var s=网格。GetStore()；//获取格子的数据源var number=s.indexOf(行)1;//获取行号一因为行号从0开始msg.push('选中第数字'行的日期列： ' MyDate。ToLocalString())；}警报(消息。联接(' \ n ')；} } ]，selType: 'checkboxmodel '，//选择模式为行选择simpleSelect: true，//简单选择功能开启多选：真，//启用多行选择enableKeyNav: true //启用键盘导航表格特性：功能表格汇总分机：网格。功能。摘要

汇总值计算根据表格的每一列进行计算，计算方式有指定的摘要类型决定。默认的有上图5种。此例应用总额和平均值

复制代码代码如下：Ext.define('TestResult '，{ extend: 'Ext.data.Model '，fields: ['student '，{ name: 'mark '，type : ' int ' }]})；var网格=ext。创建(' ext。网格。panel '，{ width: 200，height: 140，renderTo: document.body，feature 3360[{ ftype : ' summary ' }]，store : { model : ' test result '，data :[{ Student : ' Student 1 '，mark: 84 }，{ student: ' Student 2 '，进行汇总的列名摘要编辑器：函数（值){网格。getstore()}返回分机.String.format('{0}学生{1} ',值，值！==1 ?s ' : ' ')；} }，{ dataIndex: 'mark '，text: 'Mark '，summarytype3360 ' average ' }]})var grid=ext。创建(' ext。网格。panel '，{ width: 200，height: 140，renderTo: document.body，features 3360[{ ftype : ' summary ' }]，store : { model 33: ' test result '，data:进行汇总的列名摘要编辑器：函数（值){ //grid.getStore()返回分机.String.format('{0}学生{1} ',值，值！==1 ?s ' : ' ')；} }，{ dataIndex: 'mark '，text: 'Mark '，summaryType: 'average '，summaryRenderer:函数（值){ //grid.getStore()返回分机.String.format('平均分为：{0},值);}] })表格分组：外部网格特征分组

代码：复制代码代码如下：Ext.define('TestResult '，{ extend: 'Ext.data.Model '，fields: ['student '，' class '，{ name: 'mark '，type : ' int ' }]})；var网格=ext。创建(' ext。网格。panel '，{ width: 400，height: 300，renderTo: document.body，features 3360[ext。创建(' ext。网格。特色。分组'，{ groupByText: '用本字段分组，showGroupsText: '显示分组，groupHeaderTpl: '班级： {name} ({rows.length})'，//分组显示的模板startCollapsed: true //设置初始分组是不是收起}) ]、存储： {模型： '测试结果'、组字段： '类'、数据：[{学生： '学生1 '、类： '1 '、标记： 84 }、{学生： '学生2 '、类： '1 '、标记： 72 }、{学生： '学生3 '、进行汇总的列名摘要编辑器：函数（值){网格。getstore()}返回分机.String.format('{0}学生{1} ',值，值！==1 ?s ' : ' ')；} }，{ dataIndex: 'mark '，text: 'Mark '，summaryType: 'average' }，{ dataIndex: 'class '，text: 'class' }] }) //在不同的列下面点击"用本字段分组"那么表格就会立即改变分组规则。表格的分组汇总：分机。网格。特色。群组摘要

代码只需要把上面的

分组改成群组摘要表格插件：插件单元格编辑延伸文件系统网格。插件。cell edition(9512 . 163.com)

代码：复制代码代码如下： var数据=[['高'，日期(1922，02，03)，2000]]；Ext.create('Ext.grid.Panel '，{ title: '演示，frame: true，renderTo: Ext.getBody()，width: 400，height: 300，store: { fields: ['name '，' birth '，' salary']，data : data，proxy: { type: 'memory '，data : data，reader: 'array' }，autoLoad: true }，plugins:行号宽度： 40 }),{头部： '姓名，width: 80，dataIndex: 'name '，editor: {//定义字段xtype: 'textfield '，allowBlank: false，} }，{ header: '生日，width: 100，dataIndex: 'birth '，xtype: 'datecolumn '，editor: {//定义字段xtype: 'datefield '，format: 'Y-m-d '，allowBlank: false } }，header: '工资，宽度： 100，数据索引： '薪资，xtype: 'numbercolumn '，editor: {//定义字段xtype :“数字字段”，格式：“$ 0，000”，allowblank 3360 false } }]})表格行编辑器9515.163.com

代码只需：

把单元格编辑改成划水想要获取修改后的数据，ajax请求服务器，做出响应。复制代码代码如下：grid.on('edit '，onEdit，this)；//添加编辑事件，获取数据函数onEdit(e){ alert(e)记录。get(' name ')；//get()参数是字段名字} gridpanel中的检验盒列根据数据库值来初始化是否被选复制代码代码如下：listeners: { load:函数(store){ var index=0；store .每个(函数（记录){ if(记录。数据。column _ name==' 1 '){//column _ name替换成你的列名， '1' 替换成你的值grid.selModel.selectRow(index，true)；}索引；}) } }