ExtJS:GridPanel之renderer:function()和itemdblclick : function()方法参数详解
要使用GridPanel,首先要定义Store,而在创建Store的时候必须要有Model,因此我们首先来定义Model:
Ext.define("Gpsdata", {
extend: "Ext.data.Model",
fields: [
{ name: 'gpstime', type: 'string' },
{ name: 'gpstemp', type: 'string' }
]
});
然后创建Store:
var surfacestore = new Ext.data.Store({
model : 'Gpsdata',
pageSize : 22,
proxy : {
type : 'ajax',
url : 'gpsdata/grid',
reader : {
type : 'json',
root : 'dataOfAll',
totalProperty : 'total'
}
},
listeners : {
beforeload : function(store, operation, opts) { Ext.MessageBox.show({
title : '请等待',
msg : '数据读取中……',
width : 240,
progress : true,
closable : false
}); Ext.MessageBox.wait('数据读取中……', '', {
duration : 900000,
interval : 500,
increment : 10,
scope : this,
fn : function() {
}
});
},
load : function(store, records, successful, opts) {
if (successful) {
Ext.MessageBox.hide();
} else {
Ext.MessageBox.hide();
}
}
}
});
创建GridPanel
var surfacegrid = Ext.create('Ext.grid.Panel', {
id: 'surface',
title: '数据列表展示',
store: surfacestore,
disableSelection: true,
loadMask: true,
viewConfig: {
trackOver: false,
stripeRows: false
},
columns:[
new Ext.grid.RowNumberer(),{
text: "时间",
dataIndex: 'gpstime',
sortable: true,
flex: 3
},{
text: "水温"+'(℃)',
renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){ //value="<span style='color:red;font-weight:bold;'>红男</span>";
return value;
},
dataIndex: 'gpstemp',
flex: 2
}],
listeners: {
itemdblclick : function(view, record, item, index, e, eOpts) {
var gpsname=record.get('gpsname');
//alert(gpsname);
}},
bbar: Ext.create('Ext.PagingToolbar', {
store: surfacestore,
displayInfo: true,
displayMsg: '显示监测数据 {0} - {1} of {2}',
emptyMsg: "无数据"
})
});
renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){ }
解析:
value:将要像是单元格里的值,即dataIndex的值
cellmeta:单元格的相关属性,主要是id和CSS
record:这行的数据对象。通过record.data['id']方式得到其他列的值
rowIndex:行号
columnIndex:当前列的行号
store:构造表格时传递的ds,也就是说,表格里所有的数据都可以通过store获得。
listeners: {itemdblclick : function(view, record, item, index, e, eOpts) { }}
解析:
view:Ext.view.View
record : Ext.data.Model The record that belongs to the item
item : HTMLElement The item's element
index : Number The item's index
e : Ext.EventObject The raw event object
eOpts : Object The options object passed to Ext.util.Observable.addListener.
Extjs GridPanel的列
Extjs GridPanel的列有多种类型,例如:文本列、数字列、日期列、选择框列、操作列等。我们可以通过xtype来指定不同的列类型。
下面是列的常用配置项:
xtype:列类型
text:列头显示的文字
dataIndex:绑定的字段名
width:宽度
flex:自动适应的宽度
sortable:是否可排序,默认为是
hideable:是否可隐藏,默认为是
locked:锁定列,将列锁定在grid的开头,当grid出现滚动条的时候该属性比较有用。默认为否
lockable:是否可锁定,默认为否
format:格式化字符串,常用于日期、数字的格式化。日期:'Y-m-d';日期时间:'Y-m-d H:i:s';数字:'0,000.00'(带有千位分隔符、保留两位小数)、'0.00'(保留两位小数),'0'(不保留小数)
renderer:自定义绘制方法,可以是Ext.util.Format中定义好的方法名称,也可以是自定义否function,该方法接收下面的参数:value、metadata、record、rowIndex、colIndex、store、view,并需要一个用来显示的返回值。
editor:编辑器,当使用编辑插件的时候才会起作用。
Extjs GridPanel行选择模型(SelectionModel)
控制Extjs GridPanel行选择模型的两个配置项是selType和selModel。默认情况下,selType为rowmodel,对应的Ext.selection.Model。这种选择模型不会在grid中添加复选框,它通过点击行进行选中,默认为多选“MULTI”。
如果我们要使用复选框来选择行,我们需要使用下面的配置:
selType: "checkboxmodel",
然后,我们可以通过selModel来配置selType:
selModel: {
injectCheckbox: 0,
mode: "SIMPLE", //"SINGLE"/"SIMPLE"/"MULTI"
checkOnly: true //只能通过checkbox选择
},
Extjs GridPanel行选择
除了界面操作来选中行,我们还可以通过代码来选中行:
//选择行,并保持其他行的选择状态
grid.getSelectionModel().select(records, true);
//选择所有
grid.getSelectionModel().selectAll();
//根据row index选择
grid.getSelectionModel().selectRange(startRow, endRow, true)
Extjs GridPanel获取选中行
获取选中行,仍然需要通过SelectionModel来完成:
var records = grid.getSelectionModel().getSelection();
ExtJS:GridPanel之renderer:function()和itemdblclick : function()方法参数详解的更多相关文章
- javascript:function 函数声明和函数表达式 详解
函数声明(缩写为FD)是这样一种函数: 有一个特定的名称 在源码中的位置:要么处于程序级(Program level),要么处于其它函数的主体(FunctionBody)中 在进入上下文阶段创建 影响 ...
- Javascript中Function,Object,Prototypes,__proto__等概念详解
http://anykoro.sinaapp.com/2012/01/31/javascript%E4%B8%ADfunctionobjectprototypes__proto__%E7%AD%89% ...
- ExtJs如何判断form表单是否被修改过详解
1.Extjs表单提交主要有三种方式: 1, EXT的form表单ajax提交(默认提交方式) 相对单独的ajax提交来说优点在于能省略写参数数组 ,form.getForm().submi ...
- 详解jquery插件中(function ( $, window, document, undefined )的作用。
1.(function(window,undefined){})(window); Q:(function(window,undefined){})(window);中为什么要将window和unde ...
- Extjs GridPanel用法详解
Extjs GridPanel 提供了非常强大数据表格功能,在GridPanel可以展示数据列表,可以对数据列表进行选择.编辑等.在之前的Extjs MVC开发模式详解中,我们已经使用到了GridPa ...
- Javascript - ExtJs - GridPanel组件
GridPanel组件(Ext.grid.GridPanel)logogram:Ext.grid.Panel | xtype:gridpanel 此类派生自Ext.Panel,创建表格需要两个必须的对 ...
- 用类(function(){})()实现点击显示index索引值的详解
code: <script type="text/javascript"> ; i < ; i++){ var btn = document.createElem ...
- function语句和function表达式的随笔
function语句: function fn(){};/*利用function关键字声明,其在作用域顶端*/ function表达式: var fn = function(){};或者 var fn ...
- Js~(function(){})匿名自执行方法的作用
匿名自执行方法体(function(){})经常用在设计JS插件上面,它定义相关组件的行为,自动初始化相关属性,而且在页面中可以直接执行,你不需要手动执行它,它被自动被执行! 在设计你的匿名自执行方法 ...
随机推荐
- 常用的DDL语句
create database mydb1; 创建一个名称为mydb1的数据库. use db_name; 切换数据库 ; show databases; 查看所有的数据库: select datab ...
- activiti 数据库升级 upgrade
分享牛原创(尊重原创 转载对的时候第一行请注明,转载出处来自分享牛http://blog.csdn.net/qq_30739519) 在项目中我们如果使用activiti 工作流引擎的时候,肯定是需要 ...
- 03一些View总结
第三天 一 TextView 父类 : View >概念:文本控件 :文本内容的显示 默认配置不可编辑 子类EditText可以编辑 >属性: ...
- 偏置方差分解Bias-variance Decomposition
http://blog.csdn.net/pipisorry/article/details/50638749 偏置-方差分解(Bias-Variance Decomposition) 偏置-方差分解 ...
- 【一天一道LeetCode】#105. Construct Binary Tree from Preorder and Inorder Traversal
一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 来源:http ...
- UNIX环境高级编程——Linux系统调用列表
以下是Linux系统调用的一个列表,包含了大部分常用系统调用和由系统调用派生出的的函数.这可能是你在互联网上所能看到的唯一一篇中文注释的Linux系统调用列表,即使是简单的字母序英文列表,能做到这么完 ...
- pig简单的代码实例:报表统计行业中的点击和曝光量
注意:pig中用run或者exec 运行脚本.除了cd和ls,其他命令不用.在本代码中用rm和mv命令做例子,容易出错. 另外,pig只有在store或dump时候才会真正加载数据,否则,只是加载代码 ...
- 在go中使用linked channels进行数据广播
在go中使用linked channels进行数据广播 原文在这里(需FQ),为啥想要翻译这篇文章是因为在实际中也碰到过如此的问题,而该文章的解决方式很巧妙,希望对大家有用. 在go中channels ...
- 从JDK源码角度看java并发线程的中断
线程的定义给我们提供了并发执行多个任务的方式,大多数情况下我们会让每个任务都自行执行结束,这样能保证事务的一致性,但是有时我们希望在任务执行中取消任务,使线程停止.在java中要让线程安全.快速.可靠 ...
- Android进阶(十)Android 发邮件
最近在做的APP涉及到发邮件,总结如下: 在android里进行邮件客户端开发可以有两种方式: 在邮件客户端的设计中,可以采用两种方法. 一种是调用android系统自带的邮件服务 优点:这种方法比较 ...