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匿名函数的问题分析
Mar 30 Javascript
jquery制作select列表双向选择示例代码
Sep 02 Javascript
JQuery复制DOM节点的方法
Jun 11 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
Aug 31 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
jQuery获取剪贴板内容的方法
Jun 16 Javascript
解决vue+webpack打包路径的问题
Mar 06 Javascript
详解React 的几种条件渲染以及选择
Oct 23 Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 Javascript
微信小程序实现两个页面传值的方法分析
Dec 11 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
Mar 17 Javascript
如何在 Vue 表单中处理图片
Jan 26 Vue.js
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
第1次亲密接触PHP5(1)
2006/10/09 PHP
php实现带读写分离功能的MySQL类完整实例
2016/07/28 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
laravel 使用auth编写登录的方法
2019/09/30 PHP
js对象的构造和继承实现代码
2010/12/05 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
2014/05/14 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
2014/06/04 Javascript
js实现按Ctrl+Enter发送效果
2014/09/18 Javascript
jQuery实现ichat在线客服插件
2014/12/29 Javascript
jQuery根据元素值删除数组元素的方法
2015/06/24 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
详解Python中logging日志模块在多进程环境下的使用
2016/12/26 Javascript
vue如何判断dom的class
2018/04/26 Javascript
nodejs实现日志读取、日志查找及日志刷新的方法分析
2019/05/20 NodeJs
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
python中定义结构体的方法
2013/03/04 Python
解决Python中由于logging模块误用导致的内存泄露
2015/04/23 Python
Python制作简单的网页爬虫
2015/11/22 Python
Python实现的双色球生成功能示例
2017/12/18 Python
python 读取文件并替换字段的实例
2018/07/12 Python
python实现简单的单变量线性回归方法
2018/11/08 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
ORACLE十问
2015/04/20 面试题
技校毕业生的自我评价
2013/12/27 职场文书
澳大利亚商务邀请函
2014/01/17 职场文书
竞选纪律委员演讲稿
2014/09/13 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书
python3.7.2 tkinter entry框限定输入数字的操作
2021/05/22 Python
Opencv中cv2.floodFill算法的使用
2021/06/18 Python
Elasticsearch 聚合查询和排序
2022/04/19 Python
GoFrame gredis缓存DoVar Conn连接对象 自动序列化GoFrame gredisDo/DoVar方法Conn连接对象自动序列化/反序列化总结
2022/06/14 Golang
Win10服务主机占用内存怎么办?Win10服务主机进程占用大量内存解决方法
2022/09/23 数码科技