ExtJS:GridPanel之renderer:function()和itemdblclick : func

页面导航:首页 > 网络编程 > JavaScript > ExtJS:GridPanel之renderer:function()和itemdblclick : func

ExtJS:GridPanel之renderer:function()和itemdblclick : func

来源: 作者: 时间:2016-02-04 09:15 【

要使用GridPanel,首先要定义Store,而在创建Store的时候必须要有Model,因此我们首先来定义Model:Ext define( Gpsdata , { extend: Ext data Model , fields: [ { n

要使用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="红男";
            	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和
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();

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<