EXTJS Custom GridPanel

 

Extjs 3.3.0 Custom GridPanel

 

해당 컨트롤을 만든 이유는 하나의 그리드 탬플릿을 만들어 놓고

여러개의 탭 페널에서 사용하기 위함.

 

아래 쪽에서 눈 여겨 볼 부분은 Store에서 defaultParam을 받아서 처리 하는 것.

Loader를 바로 연결하여 처리한 것.

기본적인 설정을 다 해 놓은 것.

검색 툴바와 페이징 툴바를 연결해 놓은 것.

 

여기서 검색 툴바는 커스텀하게 만들어 놓은 것이라 찾아서 직접 만들어야 함.

 

Ext.ns('Ext.ecm');
Ext.ecm.grid = Ext.extend(Ext.grid.GridPanel, {
	initComponent: function () {
		var config = {
			store: new Ext.data.JsonStore({
				root: 'dataRoot'
				, totalProperty: 'totalCount'
				, remoteSort: false
				, fields: storeFields
				, baseParams: { DataType: this.defaultParam }
				, url: EcmServerURL
			})
			, defaultParam: ''
			, trackMouseOver: false
			, disableSelection: true
			, loadMask: true
			, columns: gridColumns
			, stripeRows: false
			, enableColumnMove: false
			, enableColumnResize: false
			, enableDragDrop: true
			, ddGroup: 'GridDD'
			, frame: false
			, border: false
			, loadMask: {
				msg: msgDataLoading
			}
			, sm: new Ext.grid.RowSelectionModel({
				singleSelect: false
			})
			, viewConfig: {
				forceFit: true
			}
		}

		Ext.apply(this, Ext.apply(this.initialConfig, config));

		this.tbar = new Ext.Toolbar({
			items: [
				'->'
				, new Ext.ecm.SearchField({
					hideTrigger1: true
					, hasSearch: true
					, store: this.store
					, params: { start: 0, limit: EcmLimitCount }
					, emptyText: msgDataSearchkeyword
				})
			]
		});

		this.bbar = new Ext.PagingToolbar({
			store: this.store
			, displayInfo: false
			, pageSize: EcmLimitCount
		});

		Ext.ecm.grid.superclass.initComponent.apply(this, arguments);
	}
	, onRender: function () {
		Ext.ecm.grid.superclass.onRender.apply(this, arguments);
		this.store.load({ params: { start: 0, limit: EcmLimitCount} });
	}
});

Ext.reg('ecmgrid', Ext.ecm.grid);

 

아래는 적용 예제

var tabs = new Ext.TabPanel({
	id: 'ecmTags'
	, activeTab: 0
	, border: false
	, defaults: {
		layout: 'fit'
		, autoScroll: true
	}
	, items: [{
		title: tabTitlePeolple
		, id: 'peolpleGirdTab'
		, items: {
			xtype: 'ecmgrid'
			, id: 'PeolpleGrid'
			, defaultParam: 'People'
		}
	}, {
		title: tabTitleOrganization
		, id: 'organizationGirdTab'
		, items: {
			xtype: 'ecmgrid'
			, id: 'OrganizationGrid'
			, defaultParam: 'Organization'
		}
	}, {
		title: tabTitleTag
		, id: 'tagGirdTab'
		, items: {
			xtype: 'ecmgrid'
			, id: 'TagGrid'
			, defaultParam: 'Tag'
		}
	}, {
		title: tabTitleFolder
		, id: 'folderTreeTab'
		, items: folderTree
	}]
});

 

그리드 패널의 높이를 설정할 때 한 가지 팁

GridPanel에서 autoHeight 를 설정하지 말 것

그리고 해당 그리드를 넣어둘 패널에 layout 값을 fit으로 설정 할 것