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中清空数组的三种方法分享
Apr 07 Javascript
让table变成exls的示例代码
Mar 24 Javascript
用C/C++来实现 Node.js 的模块(一)
Sep 24 Javascript
js实现图片放大和拖拽特效代码分享
Sep 05 Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 Javascript
JavaScript事件代理和委托详解
Apr 08 Javascript
老生常谈javascript变量的命名规范和注释
Sep 29 Javascript
单行 JS 实现移动端金钱格式的输入规则
May 22 Javascript
彻底解决 webpack 打包文件体积过大问题
Jul 07 Javascript
ligerUI的ligerDialog关闭刷新的方法
Sep 27 Javascript
vue递归获取父元素的元素实例
Aug 07 Javascript
JavaScript实现轮播图效果
Oct 30 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
关于拼配咖啡,你要知道
2021/03/03 咖啡文化
php判断手机浏览还是web浏览,并执行相应的动作简单实例
2016/07/28 PHP
PHP之多条件混合筛选功能的实现方法
2019/10/09 PHP
PHP 实现base64编码文件上传出现问题详解
2020/09/01 PHP
深入浅析安装PhpStorm并激活的步骤详解
2020/09/17 PHP
javascript 操作文件 实现方法小结
2009/07/02 Javascript
关于Jqzoom的使用心得 jquery放大镜效果插件
2010/04/12 Javascript
js 上传图片预览问题
2010/12/06 Javascript
javascript中闭包(Closure)详解
2016/01/06 Javascript
Bootstrap入门书籍之(三)栅格系统
2016/02/17 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
2017/05/12 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
微信小程序生成二维码的示例代码
2019/03/29 Javascript
JS实现小米轮播图
2020/09/21 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
2021/02/08 Javascript
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
Python使用Paramiko模块编写脚本进行远程服务器操作
2016/05/05 Python
使用WingPro 7 设置Python路径的方法
2019/07/24 Python
详解anaconda离线安装pytorchGPU版
2020/09/08 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
关于webview适配H5上传照片或者视频文件的方法
2020/11/04 HTML / CSS
STUBHUB日本:购买和出售全球活动门票
2018/07/01 全球购物
欧洲最古老的鞋厂:Peter Kaiser
2019/11/05 全球购物
C#的几个面试问题
2016/05/22 面试题
大学生职业生涯规划书
2014/03/14 职场文书
大学迎新标语
2014/06/26 职场文书
在职党员进社区活动总结
2014/07/05 职场文书
励志演讲稿200字
2014/08/21 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
团队拓展训练感想
2015/08/07 职场文书
村官2015年度工作总结
2015/10/14 职场文书
强烈推荐:小学生:暑假作息时间表(值得收藏)
2019/07/09 职场文书
MySQL 视图(View)原理解析
2021/05/19 MySQL
教你怎么用Python生成九宫格照片
2021/05/20 Python
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python