Extjs4 GridPanel 的几种样式使用介绍


Posted in Javascript onApril 18, 2013

简单表格

排序,显示某列,读取本地数据

Extjs4 GridPanel 的几种样式使用介绍

//本地数据 
var datas = [ 
['1', 'gao', 'man'], ['2', 'gao', 'man'], ['3', 'gao', 'man'] 
]; 
//创建面板 
Ext.create('Ext.grid.Panel', { 
title: 'easy grid', 
width: 400, 
height: 300, 
renderTo: Ext.getBody(), 
frame: true, 
viewConfig: { 
forceFit: true, 
stripRows: true 
}, 
store: {//配置数据代理 fields: ['id', 'name', 'gender'], 
proxy: { 
type: 'memory', 
data: datas, 
reader: 'array' //数据读取器为 数据读取 
}, 
autoLoad: true 
}, 
columns: [{ //自定义列信息 
header: 'id', 
width: 30, 
dataIndex: 'id', //绑定fields中得字段 
sortable: true 
}, { 
header: 'name', 
width: 80, 
dataIndex: 'name', 
sortable: true 
}, { 
header: 'gender', 
width: 80, 
dataIndex: 'gender', 
sortable: true 
} 
] 
})

表格列:
行号,   bool行转成是否,日期格式化输出(date,top day), number数据类型格式化输出(change,volume),Action列(操作列)

Extjs4 GridPanel 的几种样式使用介绍

代码;

Ext.tip.QuickTipManager.init(); 
Ext.create('Ext.data.Store', { 
storeId: 'sampleStore', 
fields: [{ 
name: 'framework', 
type: 'string' 
}, { 
name: 'rocks', 
type: 'boolean' 
}, { 
name: 'volume', 
type: 'number' 
}, { 
name: 'topday', 
type: 'date' 
}, { 
name: 'change', 
type: 'number' 
}, { 
name: 'date', 
type: 'date' 
}, { 
name: 'price', 
type: 'number' 
} ], 
data: { 
'items': [{ 
"framework": "Ext JS 1", 
"rocks": true, 
"symbol": "goog", 
"date": '2011/04/22', 
"change": 0.8997, 
"volume": 3053782, 
"topday": '04/11/2010', 
"price": 1000.23 
}, { 
"framework": "Ext JS 2", 
"rocks": true, 
"symbol": "goog", 
"date": '2011/04/22', 
"change": 0.8997, 
"volume": 3053782, 
"topday": '04/11/2010', 
"price": 1000.23 
}, { 
"framework": "Ext JS 3", 
"rocks": true, 
"symbol": "goog", 
"date": '2011/04/22', 
"change": 0.8997, 
"volume": 3053782, 
"topday": '04/11/2010', 
"price": 1000.23 
}] 
}, 
proxy: { 
type: 'memory', 
reader: { 
type: 'json', 
root: 'items' 
} 
} 
}); 
Ext.create('Ext.grid.Panel', { 
title: 'Boolean Column Demo', 
store: Ext.data.StoreManager.lookup('sampleStore'), 
columns: [ 
Ext.create('Ext.grid.RowNumberer', { text: '行号', width: 40 }), 
{ 
text: 'Framework', 
dataIndex: 'framework', 
width: 100 
}, { 
xtype: 'booleancolumn', 
text: 'Rocks', 
trueText: '是', 
falseText: '否', 
dataIndex: 'rocks' 
}, { 
text: 'Date', 
dataIndex: 'date', 
xtype: 'datecolumn', 
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: 'topday', 
xtype: 'datecolumn', 
format: 'l' 
}, { 
text: 'Current Price', 
dataIndex: 'price', 
renderer: Ext.util.Format.usMoney 
}, { 
header: '操作', 
xtype: 'actioncolumn', //操作列 
width: 100, 
items: [{ 
icon: 'e.gif', // 编辑图片地址 
tooltip: ‘编辑', //鼠标over显示的文字 使用此功能,必须 Ext.tip.QuickTipManager.init(); 
handler: function (grid, rowIndex, colIndex) { 
var rec = grid.getStore().getAt(rowIndex); 
alert("Edit " + rec.get('framework')); 
} 
}, { 
icon: 'd.gif', 
tooltip: 'Delete', 
handler: function (grid, rowIndex, 
colIndex) { 
var rec = grid.getStore().getAt(rowIndex); 
alert("Terminate " + rec.get('framework')); 
} 
}] 
}, { 
} 
], 
height: 200, 
width: 800, 
renderTo: Ext.getBody() 
});

下面这个图是 单击 操作(编辑,删除)按钮触发的回调函数的详细信息.

Extjs4 GridPanel 的几种样式使用介绍

下面演示  自定义 渲染函数

效果:Extjs4 GridPanel 的几种样式使用介绍

Ext.tip.QuickTipManager.init(); 
function customFunction(value, metadata) { 
if (value > 10) { 
metadata.style = 'color:red'; } 
return value; 
} 
Ext.create('Ext.data.Store', { 
storeId: 'sampleStore', 
fields: [ { 
name: 'custom', 
type: 'number' 
} 
], 
data: { 
'items': [{ 
"custom": 10 
}, { 
"custom": 100 
}, { 
"custom": 1000 
}] 
}, 
proxy: { 
type: 'memory', 
reader: { 
type: 'json', 
root: 'items' 
} 
} 
}); 
Ext.create('Ext.grid.Panel', { 
title: 'Boolean Column Demo', 
store: Ext.data.StoreManager.lookup('sampleStore'), 
columns: [ 
Ext.create('Ext.grid.RowNumberer', { text: '行号', width: 40 }), 
{ 
text: 'custom', 
dataIndex: 'custom', 
renderer: customFunction //调用自定义函数 来渲染 
} 
], 
height: 200, 
width: 800, 
renderTo: Ext.getBody() 
});

选择模式:Selection

选择模式分为三类:

1,行选择(默认)

2.单元格选择

3.复选框选择(checkbox组)

演示单元格选择代码:

Extjs4 GridPanel 的几种样式使用介绍

只需在上述代码配置节当中,加入

tbar: [ 
{ 
text: '取得所选单元格', 
handler: function () { var cell = grid.getSelectionModel().getCurrentPosition(); //getSelectionModel()获取当前选择模式,getCurrentPosition()获取当前选择的单元格 
alert(Ext.JSON.encode(cell)); 
} 
} 
], 
selType:'cellmodel' //设置 选择模式 为 单元格选择

行选择:

效果:Extjs4 GridPanel 的几种样式使用介绍

tbar: [ 
{ 
text: '取得所选行', 
handler: function () { var rows = grid.getSelectionModel().getSelection(); //getSelection();获取当前选中的记录数组 
var msg = []; 
for (var i = 0; i < rows.length; i++) { 
var row = rows[i]; 
var myDate = new Date(row.get('date')); 
msg.push('选中行的Date列:' + myDate.toLocaleString()); //转换时间格式 
} 
alert(msg.join('\n')); 
} 
} 
], 
selType: 'rowmodel', //选择模式为 行选择 
simpleSelect: true, //简单选择功能开启 
multiSelect: true, // 启用多行选择 
enableKeyNav: true //启用键盘导航

复选框选择:

效果:Extjs4 GridPanel 的几种样式使用介绍

tbar: [ 
               { 
                   text: '取得所选行', 
                   handler: function () {
                       var rows = grid.getSelectionModel().getSelection(); //getSelection();获取当前选中的记录数组
                       var msg = []; 
                       for (var i = 0; i < rows.length; i++) {
                           var row = rows[i]; 
                           var myDate = new Date(row.get('date'));
                           var s = grid.getStore();            //获取grid的数据源 
                           var number = s.indexOf(row) + 1;       //获取行号+1  因为行号从0开始
                           msg.push('选中第' + number + '行的Date列:' + myDate.toLocaleString());
                       } 
                       alert(msg.join('\n'));
                   } 
               } 
               ], 
               selType: 'checkboxmodel',  //选择模式为 行选择 
               simpleSelect: true,    //简单选择功能开启 
               multiSelect: true,       // 启用多行选择 
               enableKeyNav: true     //启用键盘导航

表格特性: Feature

表格汇总 Ext.grid.feature.Summary

Extjs4 GridPanel 的几种样式使用介绍

汇总值计算 根据表格的每一列进行计算,计算方式 有指定的 summaryType决定.默认的有

上图5种.

此例应用 sum和average

Extjs4 GridPanel 的几种样式使用介绍

Ext.define('TestResult', { 
                extend: 'Ext.data.Model', 
                fields: ['student', { 
                    name: 'mark', 
                    type: 'int' 
                }] 
            });
            var grid = Ext.create('Ext.grid.Panel', { 
                width: 200, 
                height: 140, 
                renderTo: document.body, 
                features: [{ 
                    ftype: 'summary' 
                }], 
                store: { 
                    model: 'TestResult', 
                    data: [{ 
                        student: 'Student 1', 
                        mark: 84 
                    }, { 
                        student: 'Student 2', 
                        mark: 72 
                    }, { 
                        student: 'Student 3', 
                        mark: 96 
                    }, { 
                        student: 'Student 4', 
                        mark: 68 
                    }] 
                }, 
                columns: [{ 
                    dataIndex: 'student', 
                    text: 'Name', 
                    summaryType: 'count',  //进行汇总的列名 
                    summaryRenderer: function (value) { 
                        grid.getStore() 
                        return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : '');
                    } 
                }, { 
                    dataIndex: 'mark', 
                    text: 'Mark', 
                    summaryType: 'average' 
                }] 
            }) 
            var grid = Ext.create('Ext.grid.Panel', { 
                width: 200, 
                height: 140, 
                renderTo: document.body, 
                features: [{ 
                    ftype: 'summary' 
                }], 
                store: { 
                    model: 'TestResult', 
                    data: [{ 
                        student: 'Student 1', 
                        mark: 84 
                    }, { 
                        student: 'Student 2', 
                        mark: 72 
                    }, { 
                        student: 'Student 3', 
                        mark: 96 
                    }, { 
                        student: 'Student 4', 
                        mark: 68 
                    }] 
                }, 
                columns: [{ 
                    dataIndex: 'student', 
                    text: 'Name', 
                    summaryType: 'count',  //进行汇总的列名 
                    summaryRenderer: function (value) { 
                      //  grid.getStore() 
                        return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : '');
                    } 
                }, { 
                    dataIndex: 'mark', 
                    text: 'Mark', 
                    summaryType: 'average',
, 
                    summaryRenderer: function (value) { 
                        // grid.getStore() 
                        return Ext.String.format(' 平均分为:{0}', value);

                }] 
            })

表格分组:Ext.grid.feature.Grouping

Extjs4 GridPanel 的几种样式使用介绍

代码:

Ext.define('TestResult', { 
extend: 'Ext.data.Model', 
fields: ['student', 'class', { 
name: 'mark', 
type: 'int' 
}] 
}); var grid = Ext.create('Ext.grid.Panel', { 
width: 400, 
height: 300, 
renderTo: document.body, 
features: [ 
Ext.create('Ext.grid.feature.Grouping', 
{ 
groupByText: '用本字段分组', 
showGroupsText: '显示分组', 
groupHeaderTpl: '班级: {name} ({rows.length})', //分组显示的模板 
startCollapsed: true //设置初始分组是不是收起 
}) 
], 
store: { 
model: 'TestResult', 
groupField: 'class', 
data: [{ 
student: 'Student 1', 
class: '1', 
mark: 84 
}, { 
student: 'Student 2', 
class: '1', 
mark: 72 
}, { 
student: 'Student 3', 
class: '2', 
mark: 96 
}, { 
student: 'Student 4', 
class: '2', 
mark: 68 
}] 
}, 
columns: [{ 
dataIndex: 'student', 
text: 'Name', 
summaryType: 'count', //进行汇总的列名 
summaryRenderer: function (value) { 
grid.getStore() 
return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : ''); 
} 
}, { 
dataIndex: 'mark', 
text: 'Mark', 
summaryType: 'average' 
}, 
{ dataIndex: 'class', 
text: 'class' 
}] 
}) 
//在不同的列下面点击 “用本字段分组”那么表格就会立即改变分组规则.

表格的分组汇总:Ext.grid.feature.GroupSummary

Extjs4 GridPanel 的几种样式使用介绍

代码只需要把上面的Extjs4 GridPanel 的几种样式使用介绍  Grouping 改成 GroupingSummary

表格插件: plugin

单元格编辑 Ext.grid.plugin.CellEditing

Extjs4 GridPanel 的几种样式使用介绍Extjs4 GridPanel 的几种样式使用介绍Extjs4 GridPanel 的几种样式使用介绍

代码:

var datas = [['gao', Date(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: datas, 
proxy: { 
type: 'memory', 
data: datas, 
reader: 'array' 
}, 
autoLoad: true 
}, 
plugins: [ 
Ext.create('Ext.grid.plugin.CellEditing', { 
clicksToEdit: 1 
}) 
], 
selType: 'cellmodel', 
columns: [Ext.create('Ext.grid.RowNumberer', { text: '行号', width: 40 }), 
{ 
header: '姓名', 
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: '工资', 
width: 100, 
dataIndex: 'salary', xtype: 'numbercolumn', 
editor: {//定义字段 
xtype: 'numberfield', 
format: '$0,000', 
allowBlank: false 
} 
} 
] 

})

表格 行编辑器Ext.grid.plugin.RowEditing

Extjs4 GridPanel 的几种样式使用介绍

代码只需:Extjs4 GridPanel 的几种样式使用介绍把 CellEditing 改成 RowEditing

想要获取修改后的数据,ajax请求服务器,做出响应.

grid.on('edit', onEdit, this);  //添加编辑事件,获取数据 
          function onEdit(e) { 
              alert(e.record.get('name'));  //get()参数是字段名字. 
          }

gridpanel中的checkbox列 根据数据库值 来初始化是否被选
listeners: { 
load: function(store) { 
var index = 0; 
store.each(function(record) { 
if(record.data.column_name == '1') { //column_name 替换成你的列名, '1' 替换成你的值 
grid.selModel.selectRow(index,true); 
} 
index++; 
}) 
} 
}
Javascript 相关文章推荐
使用jQuery仿苹果官网焦点图特效
Dec 23 Javascript
jQuery中append()方法用法实例
Jan 08 Javascript
使用BootStrap实现用户登录界面UI
Aug 10 Javascript
js接收并转化Java中的数组对象的方法
Aug 11 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
Oct 31 Javascript
javascript prototype原型详解(比较基础)
Dec 26 Javascript
你真的了解BOM中的history对象吗
Feb 13 Javascript
Express框架之connect-flash详解
May 31 Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 Javascript
JavaScript根据json生成html表格的示例代码
Oct 24 Javascript
如何从头实现一个node.js的koa框架
Jun 17 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
Aug 07 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 #Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
Apr 18 #Javascript
JQuery 常用方法和事件详细介绍
Apr 18 #Javascript
基于JQuery 滑动与动画的说明介绍
Apr 18 #Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
Apr 18 #Javascript
基于JQuery 选择器使用说明介绍
Apr 18 #Javascript
关于jquery css的使用介绍
Apr 18 #Javascript
You might like
全国FM电台频率大全 - 10 江苏省
2020/03/11 无线电
PHP面向对象的使用教程 简单数据库连接
2006/11/25 PHP
PHP全概率运算函数(优化版) Webgame开发必备
2011/07/04 PHP
利用PHP实现智能文件类型检测的实现代码
2011/08/02 PHP
destoon实现底部添加你是第几位访问者的方法
2014/07/15 PHP
PHP生成网站桌面快捷方式代码分享
2014/10/11 PHP
PHP简单实现上一页下一页功能示例
2016/09/14 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
原生JS可拖动弹窗效果实例代码
2013/11/09 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
jQuery表格排序组件-tablesorter使用示例
2014/05/26 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
2014/08/19 Javascript
jquery点击改变class并toggle的实现代码
2016/05/15 Javascript
node.js 动态执行脚本
2016/06/02 Javascript
js生成word中图片处理方法
2018/01/06 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
js+css3实现简单时钟特效
2020/09/13 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
vue3.0中setup使用(两种用法)
2020/12/02 Vue.js
python中的一些类型转换函数小结
2013/02/10 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
将Python字符串生成PDF的实例代码详解
2019/05/17 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
tensorflow常用函数API介绍
2020/04/19 Python
Python os库常用操作代码汇总
2020/11/03 Python
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
美国高级工作服品牌:Carhartt
2018/01/25 全球购物
输入N,打印N*N矩阵
2012/02/20 面试题
Unix/Linux开发面试题
2016/08/16 面试题
区域总监的岗位职责
2013/11/21 职场文书
五四青年节比赛演讲稿
2015/03/18 职场文书
世界文化遗产导游词
2019/08/07 职场文书
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers