ExtJs4入门之九: 补充Grid组件杂项

一:编辑事件

C层:

					//5.edit事件
					/*
					"usergrid":{
							edit:function(editor , e , options){
								//alert(e);
								var models = e.record;//变化的model
								//ajax(){
								//	models.commit();//消除编辑的标记
								//}
							}
					},*/
					"usergrid button[id=save]":{
						click:function(btnObj){
							var gird = btnObj.ownerCt.ownerCt;
							var store = gird.getStore();
							//==>此处先ajax 后同步
							store.sync();
							var records = store.getUpdatedRecords();
							Ext.Array.each( records , function(model){
								var m = model;
								model.commit();
							});
						}
					}

二:选择指定行列

C层:

					//3.selection按钮
					"usergrid button[id=selection]":{
						click:function(btnObj){
							//alert(o.text);
							var gird = btnObj.ownerCt.ownerCt;
							var selectionModel = gird.getSelectionModel();
							var dataArray = gird.getSelectionModel().getSelection();
							//alert("==>最后选择的是:"+selectionModel.getLastSelected().get("name"));
							//alert("==>0号是否被选上"+selectionModel.isSelected(0));
							//取消选择,无分页的情况
							//	$.each(dataArray , function(i,model){
							//		selectionModel.deselect(model.get("userId")-1);
							//	});
							//==>选上0号和1号, true是不清空之前选择 并且加上0和1两个选项
							//selectionModel.selectRange(0,1,true);
							//==>选择特定位置的cell
								selectionModel.selectByPosition({"row":1,"column":1});
						}
					},

三:拖动排序功能:

V层:

//==>拖拽排序功能,   应该有顺序编号, 拖拽后仅编号变化  
		//对应M层:必须有排序依据{ name : "index" , type : "int" , sortable : true }
		//对应C层:配drop事件的listeners
		viewConfig:{
			plugins:[
			         Ext.create('Ext.grid.plugin.DragDrop',{
			        	 ddGroup:"ddTree",
			        	 dragGroup:"usergrid",//拖拽组, 同一表格应是一个
			        	 dropGroup:"usergrid",
			        	 enableDrag:true,
			        	 enableDrop:true
			         })
			],
			listeners:
			{
				drop:function( node , data , dropRec , dropPosition )
				{
					var store = this.getStore();
					for( i=0; i<store.getCount();i++)
					{
						store.getAt(i).set('index', i+1);//model类的set,写入编号
					}
				}
			}
		},

四:复杂表头

实测 使用后会影响其他一些功能的触发

V层:

		//表头
		columns : [      
		   { text:"组合表头",locked:true,columns : [
                   {text:"index" , dataIndex : "index",width:50},//拖拽序号
         		   {text:"userId" , dataIndex : "userId",width:50,//dataIndex类会去寻找Store类或者对应Model中的键值
        	          	field:{xtype : "textfield", allowBlank:false}
        		   },
		   ]},       		
           

五:表格自动行号

V层:

	       //==>4.表格行号
	       Ext.create("Ext.grid.RowNumberer",{}),

六:允许在表格里使用键盘

V层:

enableKeyNav : true,

七:动态引入插件

app.js:

	//引入ux包
	Ext.require([
		'Ext.ux.grid.FiltersFeature'
	]);