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 相关文章推荐
firefox中JS读取XML文件
Dec 21 Javascript
JavaScript面象对象设计
Apr 28 Javascript
JS获取下拉框显示值和判断单选按钮的方法
Jul 09 Javascript
jQuery基础知识点总结(必看)
May 31 Javascript
javascript实现任务栏消息提示的简单实例
May 31 Javascript
JavaScript与ActionScript3两者的同性与差异性
Sep 22 Javascript
vue.js从安装到搭建过程详解
Mar 17 Javascript
微信小程序网络请求wx.request详解及实例
May 18 Javascript
node.js支持多用户web终端实现及安全方案
Nov 29 Javascript
微信小程序实现手势图案锁屏功能
Jan 30 Javascript
Vue下路由History模式打包后页面空白的解决方法
Jun 29 Javascript
vue-resourc发起异步请求的方法
Feb 11 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函数(简单整理)
2010/04/30 PHP
用PHP编写和读取XML的几种方式
2013/01/12 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
PHP设计模式之命令模式示例详解
2020/12/20 PHP
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
2015/05/14 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
使用Angular.js实现简单的购物车功能
2016/11/21 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
2017/03/09 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
2017/08/04 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
vue中锚点的三种方法
2018/07/06 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
python生成指定长度的随机数密码
2014/01/23 Python
python实现在windows服务中新建进程的方法
2015/06/30 Python
Python爬取个人微信朋友信息操作示例
2018/08/03 Python
python 实现读取一个excel多个sheet表并合并的方法
2019/02/12 Python
django认证系统 Authentication使用详解
2019/07/22 Python
利用django model save方法对未更改的字段依然进行了保存
2020/03/28 Python
python能开发游戏吗
2020/06/11 Python
Django项目创建及管理实现流程详解
2020/10/13 Python
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
个人近期表现材料
2014/02/11 职场文书
销售主管岗位职责范本
2014/02/14 职场文书
关于旅游的活动方案
2014/08/15 职场文书
国际政治学专业推荐信
2014/09/26 职场文书
领导欢迎词致辞
2015/01/23 职场文书
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers
pycharm debug 断点调试心得分享
2021/04/16 Python