如何建立一個可以Disable/Editable的Editor gird?

在一般的狀況下，我們在Grid的建立上，會有兩種選擇，如果我們僅希望使用Grid來做為User瀏覽的介面，而不想資料被更動，我們可以使用Ext.grid.Grid。

若我們希望使用Grid來做為直接編輯的介面，我們可以我們會建立Editor Grid。在預設的狀況下，Editor Grid需要點兩下滑鼠鍵，才能進入編輯模式(Editorable Mode)，以確保User不會在不知情的狀況下變更資料。

由Ext.grid.EditorGrid有個屬性叫clicksToEdit: 2來控制

Ext.extend(Ext.grid.EditorGrid, Ext.grid.Grid, {
    /**
     * @cfg {Number} clicksToEdit
     * The number of clicks on a cell required to display the cell's editor (defaults to 2)
     */
    clicksToEdit: 2,

但是，在專案的開發上。我們常常遇到很多狀況是需要開啟或關閉Grid的編輯模式。以下我就來介紹。

Disable/Editable的做法

EditorGrid在EXT2.0發布的時候，加入了disabled的屬性可以讓你決定他是Editable或NonEditable。

但是在 2.0以前的版本。要透過一些小技巧來達成。

Grid裡面有一個事件叫做 beforeedit

beforeedit的定義如下

public event beforeedit
Fires before cell editing is triggered. The edit event object has the following properties

    * grid - This grid
    * record - The record being edited
    * field - The field name being edited
    * value - The value for the field being edited.
    * row - The grid row index
    * column - The grid column index
    * cancel - Set this to true to cancel the edit or return false from your handler.

所以我們可以攔截beforeedit的事件，來取消User的編輯請求L程式如下。

grid.on('beforeedit',function(e){
	e.cancel = true;
	return;
});

如果我們的編輯模式有需要開啟或關閉可以寫一段程式來控制。

	/*
	* Disable GridEditor
	*/
	EditorOff: function(){
		grid.on('beforeedit',function(e){
			e.cancel = true;
			return;
		});
	};
	/*
	* Enable GridEditor
	*/
	EditorOn: function(){
		grid.on('beforeedit',function(e){
			e.cancel = false;
			return;
		});
	}

所以到最後我們可以寫出一個，可以開/關編輯模式的Editor Gird 完成程式如下:

var MyGrid=function(){
	var sm;
	var ds;
	var cm;
	var grid;
    var fm = Ext.form, Ed = Ext.grid.GridEditor;
	function bulide_sm(){
		sm = new Ext.grid.RowSelectionModel({singleSelect:true});
	}
	function bulder_ds(){
		ds = new Ext.data.Store({
			// load using HTTP
			proxy: new Ext.data.HttpProxy({url: 'sheldon.xml'}),

			// the return will be XML, so lets set up a reader
			reader: new Ext.data.XmlReader({
				   // records will have an "Item" tag
				   record: 'Item',
				   id: 'ASIN',
				   totalRecords: '@total'
			   }, [
				   // set up the fields mapping into the xml doc
				   // The first needs mapping, the others are very basic
				   {name: 'Author', mapping: 'ItemAttributes > Author'},
				   'Title', 'Manufacturer', 'ProductGroup'
			   ])
		});
	}
	function bulder_cm(){
		cm = new Ext.grid.ColumnModel([
			{
				header: "Author",
				width: 120,
				dataIndex: 'Author',
				editor: new Ed(new fm.TextField({
				   allowBlank: false
				}))
			},{
				header: "Title",
				width: 180,
				dataIndex: 'Title',
				editor: new Ed(new fm.TextField({
				   allowBlank: false
				}))
			},{
				header: "Manufacturer",
				width: 115,
				dataIndex: 'Manufacturer',
				editor: new Ed(new fm.TextField({
				   allowBlank: false
				}))
			},
			{header: "Product Group", width: 100, dataIndex: 'ProductGroup'}
		]);
		cm.defaultSortable = true;
	}
	return{
		init : function(){
			bulder_cm();
			bulide_sm();
			bulder_ds();
			this.init_grid();
			this.addlisten();
			ds.load();
		},
		init_grid : function(){
			grid = new Ext.grid.EditorGrid('example-grid', {
				ds: ds,
				cm: cm,
		        selModel:sm,
		        //enableColLock:false,
		        loadMask: true
			});
			grid.render();
		},
		addlisten : function(){
			sm.on({
				'rowselect':{
					fn: this.syncform,
					scope: this
				}
			});
			this.EditorOff(); //預設載入的時候關閉Gird的編輯功能
		},
		/*
		* Disable GridEditor ：關閉Gird的編輯功能
		*/
		EditorOff: function(){
			grid.on('beforeedit',function(e){
				e.cancel = true;
				return;
			});
		},
		/*
		* Enable GridEditor ： 開啟Gird的編輯功能
		*/
		EditorOn: function(){
			grid.on('beforeedit',function(e){
				e.cancel = false;
				return;
			});
		}
	}
}();

如果要開啟編輯模式：MyGrid.EditorOn();
如果要關閉編輯模式：MyGrid.EditorOFF();

當然也可以把兩個function寫在一起用if())或switch來())簡化…