07 위젯(그리드 & 트리) draganddrop

그리드

• 내부 아이템을 가지고 있는 컨테이너
• Ext.grid.Panel 이라는 패널의 일종

Ext.grid.Panel
xtype: 'gridpanel'

Ext.grid.Panel
xtype: 'grid'

• 그리드는 Store를 필요로 함
  • 스토어 : 데이터를 가지고 있는 저장소. 서버나 로컬의 데이터를 가져와 보관.
  • 데이터의 레이아웃은 Model로 정의.

그리드 출력해보기

Ext.onReady(function() {
	var store = Ext.create('Ext.data.Store', {
		fields: ['name', 'email', 'phone'],
		groupField: 'nation',
		data: [
		{ nation:'대한민국', name:'김하나', email:'hong@test.com', phone:'999-9999-9999', age: 35},
		{ nation:'일본', name:'김일본', email:'japan@test.com', phone:'911-1111-1111', age: 21},
		{ nation:'미국', name:'김미국', email:'usa@test.com', phone:'126-6566-9999', age: 23},
		{ nation:'중국', name:'김중국', email:'china@test.com', phone:'789-4569-4569', age: 24},
		{ nation:'캐나다', name:'김캐나다', email:'canada@test.com', phone:'123-4567-8945', age: 45}
		]
	});
	Ext.create('Ext.panel.Panel', {
		title: 'Grid Example',
		width: 1500,
		height: 1500,
		padding: 300,
		store: store,
		renderTo: Ext.getBody(),
		items:[
		{
			xtype: 'grid',
			store: store,
			height: '100%',
			width: '100%',
			plugins: {
				ptype: 'rowediting',
				clicksToEdit: 2
			},
			selModel: 'rowmodel',
			features: [{
				ftype: 'rowbody',
				setupRowData: function(record, rowIndex, rowValues) {
					var headerCt = this.view.headerCt,
					colspan = headerCt.getColumnCount();
					Ext.apply(rowValues, {
						rowBody: record.get("email")+'\\t'+record.get("phone"),
						rowBodyCls: "my-body-class"
					});
				}
			}],
			columns: [
			{
				text: '이름',
				dataIndex: 'name',
				sortable: true,
				flex: 2
			},
			{
				text: '국적',
				dataIndex: 'nation',
				sortable: false,
				editor: {
					xtype: 'textfield',
					allowBlank: false
				},
				flex: 1
			},
			{
				text: '연령',
				dataIndex: 'age',
				sortable: true,
				editor: 'textfield',
				flex: 1
			}]
		}]
	});
});

드래그앤드롭(DragAndDrop)

• 기본적으로 ddGroup만 동일한 이름을 사용한다면 해당 그리드는 모두 드래그앤드롭을 할 수 있음
• Grid View의 속성을 사용해야함 → viewConfig 속성에 추가

viewConfig: {
	plugins: {
		ddGroup: 'dragGroup1',
		ptype: 'gridviewdragdrop',
	}
},

• dragAndDrop 실습

Ext.onReady(function() {
	var storeDrag = Ext.create('Ext.data.Store', {
		fields: ['name', 'email', 'phone'],
		data: [
		{ name:'김하나', email:'hong@test.com', phone:'999-9999-9999', age: 35},
		{ name:'김일본', email:'japan@test.com', phone:'911-1111-1111', age: 21},
		{ name:'김미국', email:'usa@test.com', phone:'126-6566-9999', age: 23},
		{ name:'김중국', email:'china@test.com', phone:'789-4569-4569', age: 24},
		{ name:'김캐나다', email:'canada@test.com', phone:'123-4567-8945', age: 45}
		]
	});

	var storeDrop = Ext.create('Ext.data.Store', {
		fields: ['name', 'email', 'phone'],
		data: [
		]
	});

	Ext.create('Ext.panel.Panel', {
		title: 'Grid Example02',
		width: 1500,
		height: 1500,
		padding: 300,
		layout: 'hbox',
		renderTo: Ext.getBody(),
		items:[
		{
			xtype: 'grid',
			store: storeDrag,
			viewConfig: {
				plugins: {
					ddGroup: 'dragGroup1',
					 ptype: 'gridviewdragdrop',
				}
			},
			columns: [
			{
				text: '이름',
				dataIndex: 'name',
				flex: 1
			},{
				text: '이메일',
				dataIndex: 'email',
				flex: 2
			},{
				text: '전화번호',
				dataIndex: 'phone',
				flex: 2
			}],
			height: '100%',
			width: '50%'
		},{
			xtype: 'grid',
			store: storeDrop,
			viewConfig: {
				plugins: {
					ddGroup: 'dragGroup1',
					ptype: 'gridviewdragdrop',
				},
			},
			columns: [
			{
				text: '이름',
				dataIndex: 'name',
				flex: 1
			},{
				text: '이메일',
				dataIndex: 'email',
				flex: 2
			},{
				text: '전화번호',
				dataIndex: 'phone',
				flex: 2
			}],
			height: '100%',
			width: '50%'
		}]
	});
});

드래그 앤 드롭 실행결과1

• viewConfig: { … }에 copy: true를 추가하면 drag 부분에서 삭제되지 않고 dragAndDrop이 가능
• 예제로 drop 영역의 viewConfig에만 copy를 추가

...
viewConfig: {
				plugins: {
					ddGroup: 'dragGroup1',
					ptype: 'gridviewdragdrop',
				},
				copy: true
			},
...

드래그 앤 드롭 실행결과2