ExtJs grid(二)注意事项及例子

一:grid中的selModel三种选择模型:

RowSelectionModel:

	 var sr=new Ext.grid.RowSelectionModel({
	 	singleSelect:true,
	 	listeners: {
                        rowselect: function(sm, row, rec) {
//                        	alert(rec.get('deptno'));
//                        	store2.removeAll();
                        	var n=rec.get('deptno');
                        	store2.baseParams={deptno:n};
                        	store2.load({params:{start:0,limit:1}});
                        }
                    }
	 });

CheckSelectionModel:

 var chbox=new Ext.grid.CheckboxSelectionModel();

注意chbox，它是个复选框,不但要在grid里面配置sm,还要在columnModel中配置一列.且要是同一个。而RowSelectionModel则只要在grid配置sm即可.

还有CellSelectionModel也差不多.

二:CoumnModel:

dataIndex对应的是store中的各个列,是你命名的，而不是后台mapping的那个值,renderer是指在当你要渲染这列的时候,则会先调用所指定的函数,

例如:

renderer:function(val){

     return '$'+val;

}

这就会变成这列里面的每个值的前面都会带个$,但是注意它的值还是store里面对应的,而不会有带$

以下是关于grid的例子:

var path = '/My_ExtJs';
Ext.onReady(function() {
	Ext.QuickTips.init();
	var myReader = new Ext.data.JsonReader( {
		idProperty : 'DEPTNO',
		root : 'data',
		totalProperty : 'total_num',//总记录数
		fields : [ {
			name : 'mid',
			mapping : 'DEPTNO'
		}, {
			name : 'name',
			mapping : 'DNAME'
		}, {
			name : 'job',
			mapping : 'LOC'
		} ]
	});

//	Ext.data.Api.actions['read'] = 'load';
//	var myStore = new Ext.data.Store( {
//		reader : myReader,
//		proxy : new Ext.data.HttpProxy( {
//			api : {
//				'load' : {
//					'method' : 'GET',
//					url : path + '/servlet/My_Servlet'
//				}
//			}
//		})
//	});
	
		var myStore = new Ext.data.Store( {
		reader : myReader,
		proxy : new Ext.data.HttpProxy( {
				method : 'GET',
				url : path + '/servlet/My_Servlet'
		})
	});
	
	var grid = new Ext.grid.EditorGridPanel( {
		store : myStore,
		loadMask: true,// 必须grid先于load
		height : 300,
		width : 700,
		selModel: new Ext.grid.RowSelectionModel({
			singleSelect: true
		}),
		colModel : new Ext.grid.ColumnModel( {
			defaults : {
				width : 120,
				header : '选项'
			},
			title : 'Json',
			columns : [
			new Ext.grid.RowNumberer(), //行号
			{
				id : 'mid',
				sortable : true,
				dataIndex : 'mid'
			}, {
				header : '姓名',
				dataIndex : 'name',
				align : 'right'
			}, {
				header : '改变',
				dataIndex : 'job',
				align : 'right',
				editor: new Ext.form.TextField({
	                allowBlank: false
	            })
			},{
				header : '操作',
				xtype: 'actioncolumn',
				width: 100,
				align : 'center',
				items: [{
					 icon   : '../shared/icons/fam/delete.gif', 
					handler: function(g,rowIndex,colIndex,item,evt){
						var rs = g.getStore().getAt(rowIndex);
						//遮盖,主要是通过gridView来操作
						g.rsLoadMask = new Ext.LoadMask(g.getView().getRow(rowIndex),{msg: "正在更新数据..."});
						g.rsLoadMask.show();
						Ext.Ajax.request({
							url: g.getStore().proxy.api['load'].url,
							method: 'GET',
							params: {'job': rs.get('job')},
							callback: function(op,success,resp){
								g.rsLoadMask.hide();
								Ext.MessageBox.alert("提示",Ext.util.JSON.decode(resp.responseText)['msg'],function(){
									rs.commit();//单条记录提交
//									rs.reject();//返回修改之前的那一条
//									g.getStore.commitChanges();//提交全部修改的
//									g.getStore.rejectChanges();//返回修改之前的全部的
									
								});
							}
						});
					}
				},{
					 icon   : '../shared/icons/fam/accept.png', 
					handler: function(g,rowIndex,colIndex,item,evt){
						var rs = g.getStore().getAt(rowIndex);
						g.rsLoadMask = new Ext.LoadMask(g.bwrap,{msg: "请等待..."});
						g.rsLoadMask.show();
						Ext.Ajax.request({
							url: g.getStore().proxy.api['load'].url,
							method: 'GET',
							params: {'job': rs.get('job')},
							callback: function(op,success,resp){
								g.rsLoadMask.hide();
								Ext.MessageBox.alert("提示",Ext.util.JSON.decode(resp.responseText)['msg'],function(){
									g.getStore().remove(rs);	
								});
							}
						});
					}
				}]
			} ]
		}),
		tbar : new Ext.PagingToolbar( {
			pageSize : 5,
			store : myStore,
			displayInfo : true,
			displayMsg : '显示 {0} - {1} 总记录数 {2}',
			emptyMsg : "无数据"
		})
	});	
	grid.render("d");
	myStore.load();
//	myStore.loadData(d);
});