ext2.0에서 EditorGridPanel(8)

EditorGridPanel
ExtJS의 편집 가능 테이블은 클래스 Ext.grid입니다.EditorGridPanel에 따르면 xtype은 editorgrid이며, gridPanel과 차이점은 이 표의 내용은 편집할 수 있다는 것이다

Ext.onReady(function(){
	var data=[
		{id:1,name:' ',email:'[email protected]',sex:' ',bornDate:'1991-4-4'},
		{id:1,name:' ',email:'[email protected]',sex:' ',bornDate:'1992-5-6'},
		{id:1,name:' ',email:'[email protected]',sex:' ',bornDate:'1993-3-7'}
	];
	var store=new Ext.data.JsonStore({
		data:data,
		fields:["id","name","sex","email",{name:"bornDate",type:"date",dateFormat:"Y-n-j"}]
	});
	var colM=new Ext.grid.ColumnModel([
		{header:" ",dataIndex:"name",sortable:true,editor:new Ext.form.TextField()},
		{header:" ",dataIndex:"sex"},
		{header:" ",dataIndex:"bornDate",width:120,renderer:Ext.util.Format.dateRenderer('Y m d ')},
		{header:" ",dataIndex:"email",sortable:true,editor:new Ext.form.TextField()}
	]);
	var grid = new Ext.grid.EditorGridPanel({
		renderTo:"hello",
		title:" ",
		height:200,
		width:600,
		cm:colM,
		store:store,
		autoExpandColumn:3
	});
});

'성별'과'생년월일'열을 편집할 수 있도록 이 열을 정의할 때 편집기를 지정하면 된다.생년월일은 날짜 형식이기 때문에 날짜 편집기를 사용하여 편집할 수 있습니다. "성별"열의 데이터는
사용자가 직접 입력하고 아래쪽 상자를 통해 선택해야 합니다.날짜 편집기는 Ext.form을 직접 사용할 수 있습니다.DateField 구성 요소, 아래 선택 상자 편집기는 Ext.form을 사용할 수 있습니다.ComboBox 구성 요소, 다음은 성별 및
생년월일 등열 정보 편집 코드:

Ext.onReady(function(){
	var data=[
		{id:1,name:' ',email:'[email protected]',sex:' ',bornDate:'1991-4-4'},
		{id:1,name:' ',email:'[email protected]',sex:' ',bornDate:'1992-5-6'},
		{id:1,name:' ',email:'[email protected]',sex:' ',bornDate:'1993-3-7'}
	];
	var store=new Ext.data.JsonStore({
		data:data,
		fields:["id","name","sex","email",{name:"bornDate",type:"date",dateFormat:"Y-n-j"}]
	});
	var colM=new Ext.grid.ColumnModel([
		{header:" ",dataIndex:"name",sortable:true,editor:new Ext.form.TextField()},
		{header:" ",dataIndex:"sex",
			editor:new Ext.form.ComboBox({transform:"sexList",triggerAction: 'all',lazyRender:true})},
		{header:" ",dataIndex:"bornDate",width:120,
			renderer:Ext.util.Format.dateRenderer('Y m d '),
			editor:new Ext.form.DateField({format:'Y m d '})},
		{header:" ",dataIndex:"email",sortable:true,editor:new Ext.form.TextField()}
	]);
	var grid = new Ext.grid.EditorGridPanel({
		renderTo:"hello",
		title:" ",
		height:200,
		width:600,
		cm:colM,
		store:store,
		autoExpandColumn:3,
		clicksToEdit:1
	});	
});

EditorGridPanel을 정의할 때 "clicks To Edit:1"속성을 추가했습니다. 기본적으로 이 값은 2이기 때문에 칸을 두 번 눌러야 편집할 수 있습니다.ComboBox에 데이터를 채우기 위해 이 구성 요소를 설정한transform 설정 속성 값을 sexList로 사용합니다. sexList는 전통적인

ext2.0에서 EditorGridPanel(8)

좋은 웹페이지 즐겨찾기