Extjs4 GridPanel 的几种样式使用介绍(2)


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 的几种样式使用介绍

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdgxgf.html