天天看點

可編輯表格:Ext.grid.EditorGridPanel

1、Ext.grid.EditorGridPanel

      主要配置項:

            clicksToEdit:設定點選單元格進入編輯模式的點選次數,預設為2

            autoEncode:是否自動編碼/解碼HTML内容,預設為false

            selModel:預設為Ext.grid.CellSelectionModel

      主要方法:

            startEditing( Number rowIndex, Number colIndex ):開始編輯指定單元格

            stopEditing( [Boolean cancel] ):結束編輯操作

2、範例源碼

var datas = [[1,"張三",24,"男",new Date(1986,06,09)], [2,"李四",30,"女",new Date(1980,09,13)], [3,"王五",28,"男",new Date(1982,01,10)]];
  			
var person = Ext.data.Record.create([
	{name: "personId", mapping: 0},
	{name: "personName", mapping: 1},
	{name: "personAge", mapping: 2},
	{name: "personGender", mapping: 3},
	{name: "personBirth", mapping: 4}
]);

//複選框選擇模式
var checkboxSM = new Ext.grid.CheckboxSelectionModel({
	checkOnly: false,
	singleSelect: false
});

var cellSM = new Ext.grid.CellSelectionModel();

var grid = new Ext.grid.EditorGridPanel({
	title: "EditorGridPanel執行個體",
	renderTo: "div1",
	width: 500,
	height: 300,
	frame: true,
	tbar: [
		{
			text: "儲存",
			iconCls: "save",
			handler: function(){
				
			}
		},
		{
			text: "重新整理",
			iconCls: "refresh",
			handler: function(){
				
			}
		}
	],
	store: new Ext.data.Store({
		reader: new Ext.data.ArrayReader({id:0}, person),
		data: datas
	}),
	columns: [
		checkboxSM,
		{
			id:"personId", 
			header:"編号", 
			width:50, 
			dataIndex:"personId"
		},
		{
			id:"personName", 
			header:"姓名", 
			width:70, 
			dataIndex:"personName", 
			editor:new Ext.form.TextField({
				allowBlank:false
			})
		},
		{
			id:"personAge", 
			header:"年齡", 
			width:45, 
			dataIndex:"personAge", 
			editor:new Ext.form.NumberField()
		},
		{
			id:"personGender", 
			header:"性别", 
			width:45, 
			dataIndex:"personGender", 
			editor: new Ext.form.ComboBox({
				editable: false,
				displayField: "sex",
				mode: "local",
				triggerAction: "all",
				store: new Ext.data.SimpleStore({
					fields: ["sex"],
					data: [["男"], ["女"]]
				})
			})
		},
		{
			id:"personBirth", 
			header:"出生日期", 
			width:120, 
			dataIndex:"personBirth", 
			renderer:Ext.util.Format.dateRenderer("Y年m月d日"), 
			editor:new Ext.form.DateField({
				format: "Y-m-d"
			})
		}
	],
	autoExpandColumn: "personBirth",
	stripeRows: true,
	sm: checkboxSM
});      
可編輯表格:Ext.grid.EditorGridPanel