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 相关文章推荐
JavaScript 学习笔记(十一)
Jan 19 Javascript
简介JavaScript中getUTCMonth()方法的使用
Jun 10 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 Javascript
向JavaScript的数组中添加元素的方法小结
Oct 24 Javascript
jquery插件之文字间歇自动向上滚动效果代码
Feb 25 Javascript
javascript时间差插件分享
Jul 18 Javascript
js 定义对象数组(结合)多维数组方法
Jul 27 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 Javascript
vue-router为激活的路由设置样式操作
Jul 18 Javascript
javascript利用canvas实现鼠标拖拽功能
Jul 23 Javascript
在vant中使用时间选择器和popup弹出层的操作
Nov 04 Javascript
JavaScript获取URL参数的方法分享
Apr 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
PHP开发框架总结收藏
2008/04/24 PHP
php empty函数判断mysql表单是否为空
2010/04/12 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
PHP strripos函数用法总结
2019/02/11 PHP
使用javascript访问XML数据的实例
2006/12/27 Javascript
新老版本juqery获取radio对象的方法
2010/03/01 Javascript
Javascript Object.extend
2010/05/18 Javascript
JavaScript基本编码模式小结
2012/05/23 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
新手简单了解vue
2019/05/29 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
JavaScript中跨域问题的深入理解
2021/03/04 Javascript
python实现爬虫下载美女图片
2015/07/14 Python
用Python设计一个经典小游戏
2017/05/15 Python
Python实现的归并排序算法示例
2017/11/21 Python
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
详解爬虫被封的问题
2019/04/23 Python
python pandas生成时间列表
2019/06/29 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
大学军训感言300字
2014/03/09 职场文书
在校大学生的职业生涯规划书
2014/03/14 职场文书
求职个人评价范文
2014/04/09 职场文书
员工试用期考核自我鉴定
2014/04/13 职场文书
《西门豹》教学反思
2016/02/23 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
浅谈MySql整型索引和字符串索引失效或隐式转换问题
2021/11/20 MySQL