ExtJS4学习笔记十－－Grid使用
2014-02-17 22:44
369 查看
一、grid的例：
Javascript代码
//配置表格列
{header: "姓名", width: 50, dataIndex: 'name'},
{header: "组长", width: 50, dataIndex: 'leader',
xtype: 'booleancolumn',//Ext.grid.column.Boolean布尔列
trueText: '是',
falseText: '否'
},
{header: "生日", width: 100, dataIndex: 'birthday',
xtype : 'datecolumn',//Ext.grid.column.Date日期列
format : 'Y年m月d日'//日期格式化字符串
},
{header: "薪资", width: 50, dataIndex: 'salary',
xtype: 'numbercolumn',//Ext.grid.column.Number数字列
format:'0,000'//数字格式化字符串
}
Javascript代码
xtype: 'actioncolumn',//Ext.grid.column.Action动作列
items: [{
icon: 'images/edit.gif',//指定编辑图标资源的URL
handler: function(grid, rowIndex, colIndex) {
//获取被操作的数据记录
var rec = grid.getStore().getAt(rowIndex);
alert("编辑 " + rec.get('name'));
}
},{
icon: 'images/del.gif',//指定编辑图标资源的URL
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("删除 " + rec.get('name'));
}
},{
icon: 'images/save.gif',//指定编辑图标资源的URL
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("保存 " + rec.get('name'));
}
}]
Javascript代码
{
header: "描述", width: 100,
xtype: 'templatecolumn',//Ext.grid.column.Template数字列
tpl : '{name}<tpl if="leader == false">不</tpl>是组长'
}
Javascript代码
Ext.create('Ext.grid.RowNumberer',{text : '行号', width : 35})
二、自定义渲染函数示例：
Javascript代码
//定义渲染函数，格式化性别显示
function formatSex(value){
return value=='man'?'男':'<font color=red>女</font>';
}
//定义渲染函数，格式化年龄显示
function formatAge(value,metadata){
if(value < 30){ //年龄小于30的设置背景颜色为#CCFFFF
metadata.style = 'background-color:#CCFFFF;';
}
return value;
}
Javascript代码
columns: [//配置表格列
{header: "id", width: 30, dataIndex: 'id'},
{header: "姓名", width: 50, dataIndex: 'name'},
{header: "性别", width: 50, dataIndex: 'sex',renderer:formatSex},
{header: "生日", width: 100, dataIndex: 'birthday',
//格式化生日显示
renderer:Ext.util.Format.dateRenderer('Y年m月d日') },
{header: "年龄", width: 50, dataIndex: 'age',renderer:formatAge}
]
三、Ext.selection.CellModel（单元格选择模式）示例
Javascript代码
//创建表格数据
var datas = [
[100,'张三',24], [200,'李四',30], [300,'王五',29]
];
//创建Grid表格组件
var grid = Ext.create('Ext.grid.Panel',{
title : '单元格选择模式示例',
renderTo: Ext.getBody(),
width:200,
height:170,
frame:true,
selType: 'cellmodel',//设置为单元格选择模式Ext.selection.CellModel
tbar : [{
text : '取得所选单元格',
handler : function(){
var cell = grid.getSelectionModel().getCurrentPosition();
alert(Ext.JSON.encode(cell));
}
}],
store: {//配置数据源
fields: ['id','name','age'],//定义字段
proxy: {
type: 'memory',//Ext.data.proxy.Memory内存代理
data : datas,//读取内嵌数据
reader : 'array'//Ext.data.reader.Array解析器
},
autoLoad: true//自动加载
},
columns: [//配置表格列
{header: "id", width: 30, dataIndex: 'id', sortable: true},
{header: "姓名", width: 80, dataIndex: 'name', sortable: true},
{header: "年龄", width: 80, dataIndex: 'age', sortable: true}
]
});
四、Ext.selection.RowModel（行选择模式）示例－－主要相关代码
Javascript代码
simpleSelect : true,//启用简单选择功能
multiSelect : true,//支持多选
selType: 'rowmodel',//设置为单元格选择模式Ext.selection.RowModel
tbar : [{
text : '取得所选行',
handler : function(){
var msg = '';
var rows = grid.getSelectionModel().getSelection();
for(var i = 0; i < rows.length; i++){
msg = msg + rows[i].get('name') + '\n';
}
alert(msg);
}
}]
五、Ext.selection.CheckboxModel（复选框选择模式）示例－－关键代码
Javascript代码
//注册复选框选择模式别名为selection.checkboxmodel
Ext.ClassManager.setAlias('Ext.selection.CheckboxModel','selection.checkboxmodel');
Javascript代码
multiSelect : true,//支持多选
selModel: {
selType : 'checkboxmodel'//复选框选择模式Ext.selection.CheckboxModel
},
tbar : [{
text : '取得所选行',
handler : function(){
var msg = '';
var rows = grid.getSelectionModel().getSelection();
for(var i = 0; i < rows.length; i++){
msg = msg + rows[i].get('name') + '\n';
}
alert(msg);
}
}]
六、grid中的features使用
Ext.grid.feature.RowBody示例－－关键代码
Javascript代码
features: [Ext.create('Ext.grid.feature.RowBody',{
getAdditionalData: function(data, idx, record, orig) {
var headerCt = this.view.headerCt,
colspan = headerCt.getColumnCount();//获取表格的列数
return {
rowBody: record.get('introduce'),//指定行体内容
rowBodyCls: 'rowbodyColor',//指定行体样式
rowBodyColspan: colspan//指定行体跨列的列数
};
}
})]
Ext.grid.feature.Summary示例－－关键代码
Javascript代码
features: [{
ftype: 'summary'//Ext.grid.feature.Summary表格汇总特性
}],
columns: [//配置表格列
{header: "姓名", flex: 1, dataIndex: 'name',
summaryType: 'count',//求数量
summaryRenderer: function(value){
return '员工总数：'+value
}
},
{header: "薪资", flex: 1, dataIndex: 'salary',
summaryType: 'average',//求平均值
summaryRenderer: function(value){
return '平均薪资：'+value
}
}
]
Ext.grid.feature.Grouping示例－－关键代码
Javascript代码
features: [Ext.create('Ext.grid.feature.Grouping', {
groupByText : '用本字段分组',
showGroupsText : '显示分组',
groupHeaderTpl: '性别: {name} ({rows.length})', //分组标题模版
startCollapsed: true //设置初始分组是否收起
})],
columns: [//配置表格列
{header: "姓名", flex: 1, dataIndex: 'name'},
{header: "性别", flex: 1, dataIndex: 'sex'},
{header: "年龄", flex: 1, dataIndex: 'age'}
]
Ext.grid.feature.GroupingSummary示例－－关键代码
Javascript代码
features: [Ext.create('Ext.grid.feature.GroupingSummary', {
groupByText : '用本字段分组',
showGroupsText : '显示分组',
groupHeaderTpl: '性别: {name} ({rows.length})', //分组标题模版
startCollapsed: true //设置初始分组是否收起
})],
columns: [//配置表格列
{header: "姓名", width: 100, dataIndex: 'name',
summaryType: 'count',//求数量
summaryRenderer: function(value){
return '员工总数：'+value
}
},
{header: "性别", width: 50, dataIndex: 'sex'},
{header: "年龄", width: 110, dataIndex: 'age',
summaryType: 'average',//求数量
summaryRenderer: function(value){
return '平均年龄：'+value
}
}
]
七、Ext.grid.plugin.CellEditing示例－－关键代码
Javascript代码
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1//设置鼠标单击1次进入编辑状态
})
],
selType: 'cellmodel',//设置为单元格选择模式
columns: [//配置表格列
Ext.create('Ext.grid.RowNumberer',{text : '行号', width : 35}),
{header: "姓名", width: 50, dataIndex: 'name',
editor: {//文本字段
xtype:'textfield',
allowBlank:false
}
},
{header: "生日", width: 100, dataIndex: 'birthday',
xtype : 'datecolumn',//Ext.grid.column.Date日期列
format : 'Y年m月d日',//日期格式化字符串
editor: {//日期字段
xtype:'datefield',
allowBlank:false
}
},
{header: "薪资", width: 50, dataIndex: 'salary',
xtype: 'numbercolumn',//Ext.grid.column.Number数字列
format:'0,000',//数字格式化字符串
editor: {//数字字段
xtype:'numberfield',
allowBlank:false
}
}
]
八、Ext.grid.plugin.RowEditing示例－－关键代码
Javascript代码
plugins: [
//行编辑模式
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
})
],
selType: 'rowmodel',//设置为单元格选择模式
columns: [//配置表格列
Ext.create('Ext.grid.RowNumberer',{text : '行号', width : 35}),
{header: "姓名", width: 50, dataIndex: 'name',
editor: {//文本字段
xtype:'textfield',
allowBlank:false
}
},
{header: "生日", width: 100, dataIndex: 'birthday',
xtype : 'datecolumn',//Ext.grid.column.Date日期列
format : 'Y年m月d日',//日期格式化字符串
editor: {//日期字段
xtype:'datefield',
allowBlank:false
}
},
{header: "薪资", width: 50, dataIndex: 'salary',
xtype: 'numbercolumn',//Ext.grid.column.Number数字列
format:'0,000',//数字格式化字符串
editor: {//数字字段
xtype:'numberfield',
allowBlank:false
}
}
]
九、Ext.grid.plugin.DragDrop示例－－关键代码
Javascript代码
viewConfig: {
plugins: [
//行编辑模式
Ext.create('Ext.grid.plugin.DragDrop',{
dragGroup: 'grid1',//拖拽组名称
dropGroup: 'grid2'//拖放组名称
})
]
}
十、Ext.grid.property.Grid示例
Javascript代码
//创建属性表格
var grid = new Ext.grid.property.Grid({
title: 'Ext.grid.property.Grid示例',
width: 300,
height: 200,
renderTo: Ext.getBody(),
//自定义属性编辑器
customEditors : {
"性别" : new Ext.form.ComboBox({
editable : false,
displayField:'sex',
mode: 'local',
triggerAction: 'all',
store:new Ext.data.SimpleStore({
fields: ['sex'],
data : [['男'],['女']]
})
}),
"出生日期": new Ext.form.DateField({
format : 'Y年m月d日',
selectOnFocus:true,
allowBlank : false
})
},
//自定义渲染函数
customRenderers: {
//格式化布尔值显示
"是否已婚": function(v){
return v?'是':'否';
},
//格式化日期显示
"出生日期": Ext.util.Format.dateRenderer('Y年m月d日')
},
source: {
"员工名称" : "张三",
"出生日期" : Ext.Date.parse('10/15/2006', 'm/d/Y'),
"性别" : '男',
"是否已婚" : false,
"年龄" : 29
}
});
Javascript代码
//配置表格列
{header: "姓名", width: 50, dataIndex: 'name'},
{header: "组长", width: 50, dataIndex: 'leader',
xtype: 'booleancolumn',//Ext.grid.column.Boolean布尔列
trueText: '是',
falseText: '否'
},
{header: "生日", width: 100, dataIndex: 'birthday',
xtype : 'datecolumn',//Ext.grid.column.Date日期列
format : 'Y年m月d日'//日期格式化字符串
},
{header: "薪资", width: 50, dataIndex: 'salary',
xtype: 'numbercolumn',//Ext.grid.column.Number数字列
format:'0,000'//数字格式化字符串
}
Javascript代码
xtype: 'actioncolumn',//Ext.grid.column.Action动作列
items: [{
icon: 'images/edit.gif',//指定编辑图标资源的URL
handler: function(grid, rowIndex, colIndex) {
//获取被操作的数据记录
var rec = grid.getStore().getAt(rowIndex);
alert("编辑 " + rec.get('name'));
}
},{
icon: 'images/del.gif',//指定编辑图标资源的URL
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("删除 " + rec.get('name'));
}
},{
icon: 'images/save.gif',//指定编辑图标资源的URL
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("保存 " + rec.get('name'));
}
}]
Javascript代码
{
header: "描述", width: 100,
xtype: 'templatecolumn',//Ext.grid.column.Template数字列
tpl : '{name}<tpl if="leader == false">不</tpl>是组长'
}
Javascript代码
Ext.create('Ext.grid.RowNumberer',{text : '行号', width : 35})
二、自定义渲染函数示例：
Javascript代码
//定义渲染函数，格式化性别显示
function formatSex(value){
return value=='man'?'男':'<font color=red>女</font>';
}
//定义渲染函数，格式化年龄显示
function formatAge(value,metadata){
if(value < 30){ //年龄小于30的设置背景颜色为#CCFFFF
metadata.style = 'background-color:#CCFFFF;';
}
return value;
}
Javascript代码
columns: [//配置表格列
{header: "id", width: 30, dataIndex: 'id'},
{header: "姓名", width: 50, dataIndex: 'name'},
{header: "性别", width: 50, dataIndex: 'sex',renderer:formatSex},
{header: "生日", width: 100, dataIndex: 'birthday',
//格式化生日显示
renderer:Ext.util.Format.dateRenderer('Y年m月d日') },
{header: "年龄", width: 50, dataIndex: 'age',renderer:formatAge}
]
三、Ext.selection.CellModel（单元格选择模式）示例
Javascript代码
//创建表格数据
var datas = [
[100,'张三',24], [200,'李四',30], [300,'王五',29]
];
//创建Grid表格组件
var grid = Ext.create('Ext.grid.Panel',{
title : '单元格选择模式示例',
renderTo: Ext.getBody(),
width:200,
height:170,
frame:true,
selType: 'cellmodel',//设置为单元格选择模式Ext.selection.CellModel
tbar : [{
text : '取得所选单元格',
handler : function(){
var cell = grid.getSelectionModel().getCurrentPosition();
alert(Ext.JSON.encode(cell));
}
}],
store: {//配置数据源
fields: ['id','name','age'],//定义字段
proxy: {
type: 'memory',//Ext.data.proxy.Memory内存代理
data : datas,//读取内嵌数据
reader : 'array'//Ext.data.reader.Array解析器
},
autoLoad: true//自动加载
},
columns: [//配置表格列
{header: "id", width: 30, dataIndex: 'id', sortable: true},
{header: "姓名", width: 80, dataIndex: 'name', sortable: true},
{header: "年龄", width: 80, dataIndex: 'age', sortable: true}
]
});
四、Ext.selection.RowModel（行选择模式）示例－－主要相关代码
Javascript代码
simpleSelect : true,//启用简单选择功能
multiSelect : true,//支持多选
selType: 'rowmodel',//设置为单元格选择模式Ext.selection.RowModel
tbar : [{
text : '取得所选行',
handler : function(){
var msg = '';
var rows = grid.getSelectionModel().getSelection();
for(var i = 0; i < rows.length; i++){
msg = msg + rows[i].get('name') + '\n';
}
alert(msg);
}
}]
五、Ext.selection.CheckboxModel（复选框选择模式）示例－－关键代码
Javascript代码
//注册复选框选择模式别名为selection.checkboxmodel
Ext.ClassManager.setAlias('Ext.selection.CheckboxModel','selection.checkboxmodel');
Javascript代码
multiSelect : true,//支持多选
selModel: {
selType : 'checkboxmodel'//复选框选择模式Ext.selection.CheckboxModel
},
tbar : [{
text : '取得所选行',
handler : function(){
var msg = '';
var rows = grid.getSelectionModel().getSelection();
for(var i = 0; i < rows.length; i++){
msg = msg + rows[i].get('name') + '\n';
}
alert(msg);
}
}]
六、grid中的features使用
Ext.grid.feature.RowBody示例－－关键代码
Javascript代码
features: [Ext.create('Ext.grid.feature.RowBody',{
getAdditionalData: function(data, idx, record, orig) {
var headerCt = this.view.headerCt,
colspan = headerCt.getColumnCount();//获取表格的列数
return {
rowBody: record.get('introduce'),//指定行体内容
rowBodyCls: 'rowbodyColor',//指定行体样式
rowBodyColspan: colspan//指定行体跨列的列数
};
}
})]
Ext.grid.feature.Summary示例－－关键代码
Javascript代码
features: [{
ftype: 'summary'//Ext.grid.feature.Summary表格汇总特性
}],
columns: [//配置表格列
{header: "姓名", flex: 1, dataIndex: 'name',
summaryType: 'count',//求数量
summaryRenderer: function(value){
return '员工总数：'+value
}
},
{header: "薪资", flex: 1, dataIndex: 'salary',
summaryType: 'average',//求平均值
summaryRenderer: function(value){
return '平均薪资：'+value
}
}
]
Ext.grid.feature.Grouping示例－－关键代码
Javascript代码
features: [Ext.create('Ext.grid.feature.Grouping', {
groupByText : '用本字段分组',
showGroupsText : '显示分组',
groupHeaderTpl: '性别: {name} ({rows.length})', //分组标题模版
startCollapsed: true //设置初始分组是否收起
})],
columns: [//配置表格列
{header: "姓名", flex: 1, dataIndex: 'name'},
{header: "性别", flex: 1, dataIndex: 'sex'},
{header: "年龄", flex: 1, dataIndex: 'age'}
]
Ext.grid.feature.GroupingSummary示例－－关键代码
Javascript代码
features: [Ext.create('Ext.grid.feature.GroupingSummary', {
groupByText : '用本字段分组',
showGroupsText : '显示分组',
groupHeaderTpl: '性别: {name} ({rows.length})', //分组标题模版
startCollapsed: true //设置初始分组是否收起
})],
columns: [//配置表格列
{header: "姓名", width: 100, dataIndex: 'name',
summaryType: 'count',//求数量
summaryRenderer: function(value){
return '员工总数：'+value
}
},
{header: "性别", width: 50, dataIndex: 'sex'},
{header: "年龄", width: 110, dataIndex: 'age',
summaryType: 'average',//求数量
summaryRenderer: function(value){
return '平均年龄：'+value
}
}
]
七、Ext.grid.plugin.CellEditing示例－－关键代码
Javascript代码
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1//设置鼠标单击1次进入编辑状态
})
],
selType: 'cellmodel',//设置为单元格选择模式
columns: [//配置表格列
Ext.create('Ext.grid.RowNumberer',{text : '行号', width : 35}),
{header: "姓名", width: 50, dataIndex: 'name',
editor: {//文本字段
xtype:'textfield',
allowBlank:false
}
},
{header: "生日", width: 100, dataIndex: 'birthday',
xtype : 'datecolumn',//Ext.grid.column.Date日期列
format : 'Y年m月d日',//日期格式化字符串
editor: {//日期字段
xtype:'datefield',
allowBlank:false
}
},
{header: "薪资", width: 50, dataIndex: 'salary',
xtype: 'numbercolumn',//Ext.grid.column.Number数字列
format:'0,000',//数字格式化字符串
editor: {//数字字段
xtype:'numberfield',
allowBlank:false
}
}
]
八、Ext.grid.plugin.RowEditing示例－－关键代码
Javascript代码
plugins: [
//行编辑模式
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
})
],
selType: 'rowmodel',//设置为单元格选择模式
columns: [//配置表格列
Ext.create('Ext.grid.RowNumberer',{text : '行号', width : 35}),
{header: "姓名", width: 50, dataIndex: 'name',
editor: {//文本字段
xtype:'textfield',
allowBlank:false
}
},
{header: "生日", width: 100, dataIndex: 'birthday',
xtype : 'datecolumn',//Ext.grid.column.Date日期列
format : 'Y年m月d日',//日期格式化字符串
editor: {//日期字段
xtype:'datefield',
allowBlank:false
}
},
{header: "薪资", width: 50, dataIndex: 'salary',
xtype: 'numbercolumn',//Ext.grid.column.Number数字列
format:'0,000',//数字格式化字符串
editor: {//数字字段
xtype:'numberfield',
allowBlank:false
}
}
]
九、Ext.grid.plugin.DragDrop示例－－关键代码
Javascript代码
viewConfig: {
plugins: [
//行编辑模式
Ext.create('Ext.grid.plugin.DragDrop',{
dragGroup: 'grid1',//拖拽组名称
dropGroup: 'grid2'//拖放组名称
})
]
}
十、Ext.grid.property.Grid示例
Javascript代码
//创建属性表格
var grid = new Ext.grid.property.Grid({
title: 'Ext.grid.property.Grid示例',
width: 300,
height: 200,
renderTo: Ext.getBody(),
//自定义属性编辑器
customEditors : {
"性别" : new Ext.form.ComboBox({
editable : false,
displayField:'sex',
mode: 'local',
triggerAction: 'all',
store:new Ext.data.SimpleStore({
fields: ['sex'],
data : [['男'],['女']]
})
}),
"出生日期": new Ext.form.DateField({
format : 'Y年m月d日',
selectOnFocus:true,
allowBlank : false
})
},
//自定义渲染函数
customRenderers: {
//格式化布尔值显示
"是否已婚": function(v){
return v?'是':'否';
},
//格式化日期显示
"出生日期": Ext.util.Format.dateRenderer('Y年m月d日')
},
source: {
"员工名称" : "张三",
"出生日期" : Ext.Date.parse('10/15/2006', 'm/d/Y'),
"性别" : '男',
"是否已婚" : false,
"年龄" : 29
}
});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ExtJS4学习笔记十－－Grid使用
- extjs学习笔记（四）带分页的grid
- extjs 学习笔记（三） 最基本的grid
- ExtJS4学习笔记(六)---多表头Grid
- [转] EXTJS学习笔记：grid之gridview
- extjs 学习笔记（三） 最基本的grid
- ExtJS4学习笔记八－－Template的使用
- ExtJs学习笔记(2)_Basic GridPanel[基本网格]
- 【Extjs学习笔记01】使用Sencha Cmd构建项目
- ExtJs学习笔记(2)_Basic GridPanel[基本网格]
- SilverLight学习笔记--Silverlight中GridSplitter控件的使用
- Extjs学习笔记1----------消息框，文本框，文本域，进度条的使用
- Extjs学习笔记——Grid表格
- EXTJS学习笔记：grid之gridview
- ZP的EXTJS学习笔记（四）——图表的简单使用（图表点击事件）
- Extjs学习笔记——Ext.data.JsonStore使用说明
- EXTJS学习笔记：grid之gridview
- ExtJS学习笔记（七） 使用树控件TreeNode
- ExtJS学习笔记2：响应事件、使用AJAX载入数据
- EXTJS学习笔记：grid之分组实现groupingview