[ExtJS] Grid panel (2)

 

 

Ext.grid.Panel (1) 바로가기

prinha.tistory.com/entry/ExtJS-Grid-panel-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%B6%9C%EB%A0%A5?category=904364

[ExtJS] Grid panel (1)

wikidocs.net/2982

위키독스

---

 

1. 기본 그리드 패널 - 모델과 스토어

Ext.grid.Panel은 데이터 표시만, Ext.data.Store는 데이터를 가져오거나 저장하는 것에만 집중한다.

 

 

  1) 모델 정의 : 데이터 구조를 정의한 모델을 갖게 됨

Ext.define('User',{
	extend:'Ext.data.Model',
	fields:['name','birthDate','emial','department']
});

 

2) dataStore 생성 : 몇 개의 모델 인스턴스 로딩

var userStore = Ext.create("Ext.data.Store",{
	model : "User",
	data:[
		{name : 'Lisa',birthDate:'11/4/1995',email:'ee@abc.com', department:'develop'},
		{name : 'Bart',birthDate:'27/11/2020',email:'hi@abc.com', department:'develop'},
		{name : 'Homer',birthDate:'30/09/2001',email:'bye@abc.com', department:'consulting'},
		{name : 'Marge',birthDate:'29/01/1988',email:'mama@abc.com', department:'consulting'}
	]
});

 

3) grid 렌더링 : renderTo를 사용해 html문서에 렌더링

	Ext.create("Ext.grid.Panel",{
		renderTo:Ext.getBody(),
		store:userStore,
		width:600,
		height:200,
		title:'Application User',
		columns:[
			{
				text:'Name',
				width:100,
				sortable:false,
				hideable:false,
				dataIndex:'name'
			},{
				text:'Birh Date',
				dataIndex:'birthDate',
			},{
				text:'Email Address',
				width:150,
				dataIndex:'email',
				//hidden:true,
                }
			},{
				text:'Department',
				flex:1,
				dataIndex:'department'
			}
		]
	});

 

2.  Renderer

컬럼 설정의 renderer property는 데이터가 표시되는 방법을 변경하고 싶을 때 사용한다.

renderer는 기초 데이터를 가공한 후 화면 표시에 적합해진 새 데이터를 반환하는 함수이다.

대부분의 일반 렌더러는 Ext.util.Format에 포함되어 있지만, 필요시 자신만의 포맷을 만들어서 적용해도 된다.

{
	text:'Birh Date',
	dataIndex:'birthDate',
				
	// Ext.util.Format 클래스의 date렌더러 사용
	renderer:Ext.util.Format.dateRenderer('m/d/Y')
},{
	text:'Email Address',
	width:150,
	dataIndex:'email',
	//hidden:true,
	// 사용자 렌더러를 사용한 email 보내기 포맷
	renderer: function(value) {
       		return Ext.String.format('<a href="mailto:{0}">{1}</a>', value, value);	
	}
}

 

3.  Grouping

docs.sencha.com/extjs/6.5.3/classic/Ext.grid.feature.Grouping.html

Ext.grid.feature.Grouping | Ext JS 6.5.3

 

  1) 스토어에 groupField property 정의

var userStore = Ext.create("Ext.data.Store",{
	model : "User",
	groupField:'department', // 그룹필드 정의
	data:[
		...
	]
});

 

  2) features:[{ftype:'grouping}] : 행을 그룹으로 처리하여 화면에 표시하도록 그리드 설정 

Ext.create("Ext.grid.Panel",{
	...
	features:[{ftype:'grouping'}],
    ...
});

 

결과

 

4.  선택 모델(Selection Model)

그리드 패널의 원래 목적은 데이터를 화면에 표시하는 것이나,

경우에 따라 화면에 표시된 그리드 데이터와 상호 작용을 해야할 필요가 종종 생긴다.

모든 그리드 패널은 어떤 데이터가 선택되었는지를 판단하기 위한 Ext.selection.Model 을 갖는다.

Ext.selection.Model의 두 가지 주요 형태
전체 행이 선택되었을 때 (기본 값)	Ext.selection.RowModel
각각의 개별 셀이 선택되었을 때	Ext.selection.CellModel

 

selModel: {
       selType: 'cellmodel', // rowmodel is the default selection model
       mode: 'MULTI' // Allows selection of multiple rows
}

 

5.  편집

- 셀 편집(Cell Editing) : 하나의 셀 편집

   1) 각 column에 대해 에디터 설정 - 사용하고자 하는 필드의 xtype 지정

Ext.create('Ext.grid.Panel', {
    …
    columns: [
        { 
            text:'Email Address', 
            dataIndex: 'email',
            editor: 'textfield'
        }
    ]
});

 

   2) 에디터 속성을 지정해야 할 필요가 있을 때에는 에디터 필드의 설정 객체를 적용한다.

editor:{
		xtype:'textfield',
		allowBlack:'false' // 공백을 허용하지 않음
	}

 

   3) 에디터 필드로 Ext.form.field 패키지의 모든 클래스 사용 가능 / 아래와 같이 Date 에디터 사용 가능

columns: [
    {
        text: 'Birth Date',
        dataIndex: 'birthDate',
        editor: 'datefield'
    }
]

 

   4) 셀 편집을 위해 Ext.grid.plugin.CellEditing을 사용할 수 있게함

selModel:{
	seltype:'cellModel',
	mode:'MULTI'
},
plugins:[{
	ptype: 'cellediting',
	clickToEdit:1
}]

 

결과

  

결과

 

 

- 행 편집(Row Editing) : 한번에 전체 행 편집

Ext.create('Ext.grid.Panel', {
    …
    selType: 'rowmodel',
    plugins: [
        ptype : 'rowediting',
        clicksToEdit:1
    ]
});

결과

Ext.onReady(function(){
	
	// 1. 모델 정의 :데이터 구조를 정의한 모델을 갖게 됨
	Ext.define('User',{
		extend:'Ext.data.Model',
		fields:['name','birthDate','emial','department']
	});
	
	// 2. dataStore 생성 : 몇 개의 모델 인스턴스 로딩
	var userStore = Ext.create("Ext.data.Store",{
		model : "User",
		groupField:'department',
		data:[
			{name : 'Lisa',birthDate:'11/4/1995',email:'ee@abc.com', department:'develop'},
			{name : 'Bart',birthDate:'12/7/1998',email:'hi@abc.com', department:'develop'},
			{name : 'Homer',birthDate:'12/10/1997',email:'bye@abc.com', department:'consulting'},
			{name : 'Marge',birthDate:'10/6/1998',email:'mama@abc.com', department:'consulting'}
		]
	});

	// 3. 그리드 렌더링
	Ext.create("Ext.grid.Panel",{
		renderTo:Ext.getBody(),
		store:userStore,
		width:600,
		height:200,
		title:'Application User',
		startCollapsed:true,
		features:[{ftype:'grouping'}],
		selModel:{
			seltype:'rowModel',
			mode:'MULTI'
		},
		plugins:[{
	        ptype: 'rowediting',
	        clickToEdit:1
		}],
		columns:[
			{
				text:'Name',
				width:100,
				sortable:false,
				hideable:false,
				dataIndex:'name'
			},{
				text:'Birth Date',
				dataIndex:'birthDate',
				editor:'datefield',
				
				// Ext.util.Format 클래스의 date렌더러 사용
				renderer:Ext.util.Format.dateRenderer('m/d/Y')
			},{
				text:'Email Address',
				width:150,
				dataIndex:'email',
				editor:{
					xtype:'textfield',
					allowBlack:'false' // 공백을 허용하지 않음
				}
				//hidden:true,
				// 사용자 렌더러를 사용한 email 보내기 포맷
				//renderer: function(value) {
       				 //return Ext.String.format('<a href="mailto:{0}">{1}</a>', value, value);	
				//}
			
			
			},{
				text:'Department',
				flex:1,
				dataIndex:'department'
			}
		]
	});
});    

 

6.  페이징( Paging)

데이터를 화면에 표시할 때 데이터가 너무 커서 한 페이지에 표시가 어려울 경우,

Ext.grid.Panel은 Ext.toolbar.Paging을 사용하여 데이터 세트를 페이지로 분할 표시할 수 있다.

이때 툴바는 previous/next 버튼을 제공하여 페이지 이동을 지원한다.

 

  1) 스토어 설정

     그리드 패널에 페이징을 사용하기 위해서는 Ext.data.Store에 페이징을 지원하도록 설정해야한다.

var userStore = Ext.create('Ext.data.Store', {
	 model : 'User',
	 autoLoad:true,
	 pageSize:4,
	 proxy:{
	    type:'ajax',
	    url:'users.json',
	    reader:{
	    	type:'json',
	    	root:'users',
	    	totalProperty:'total'
	    }
	 }
});

 

  2) json 데이터 설정 - users.json

{
	"success":true,
	"total":12,
	"users":[
		{ "name": "Lisa", "email": "lisa@simpsons.com", "phone": "555-111-1224" },
        { "name": "Bart", "email": "bart@simpsons.com", "phone": "555-222-1234" },
        { "name": "Homer", "email": "homer@simpsons.com", "phone": "555-222-1244" },
        { "name": "Marge", "email": "marge@simpsons.com", "phone": "555-222-1254" }
	]
}

 

  3) 페이징 툴바 설정

     Ext.toolbar.Paging을 Ext.grid.Panel에 도킹한다.

	Ext.create('Ext.grid.Panel',{
	    renderTo:document.body,
	    store: userStore,
	    width: 400,
	    height: 200,
	    title : 'Application Users',
	    columns: [
	        {
	            text:'Name',
	            width: 100,
	            sortable: false,
	            hideable: false,
	            dataIndex : 'name'
	        }, {
	            text: 'Email Address',
	            width: 150,
	            dataIndex : 'email'
	        },{
	            text:'Phone Number',
	            flex:1,
	            dataIndex:'phone'
	        }
	    ],
	    dockedItems:[{
	    	xtype:'pagingtoolbar',
	    	store:userStore,
	    	dock:'bottom',
	    	displayInfo:true
	    }]
	});

 

7.  버퍼드 랜더링(Buffered Rendering)

많은 양의 데이터 세트를 화면에 표시할 때, 페이징 툴바의 대안으로 버퍼드 랜더링을 지원한다.

버퍼드 랜더링을 사용할 경우 전체 데이터를 화면에 한번에 나타낼 때 성능 저하 없이 스크롤을 사용할 수 있다.

이 때 그리드는 pageSize가 지정된 Ext.data.BufferedStore와 연동되어 있어야한다.

 

스크롤링이 어느 방향으로 되던지 표시되는 그리드 영역에 데이터를 채우기 위해, 

Ext.grid.Panel의 leadingBufferZone 설정에 따라 데이터를 미리 준비하고 있다가 스크롤링이 되면

새로운 행이 스크롤 방향에 따라 랜더링 되고, 화면에 보이지 않는 위/아래의 테이블에서는 데이터가 제거된다.

 

그리드는 버퍼드 랜더링이 기본값으로 그리드 컴포넌트에 별다른 플러그인을 추가할 필요는 없다.

 

실행 예제 : examples.sencha.com/extjs/6.7.0/examples/classic/grid/buffer-grid.html

Sencha | Examples