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으로 설정 할 것

'Script > Script Extjs' 카테고리의 다른 글

EXTJS Custom GridPanel  (0) 2011.05.12
EXTJS Custom XmlTreeLoader  (0) 2011.05.12

 

ExtJs 3.3.0 Custom XmlTreeLoader

 

아래의 코드 중 손대야 하는 부분은 processAttributes 부분과 그리고 childnodes를 설정 하는 부분이다.

xml 에서 만들어 놓은 attribute를 treenode attribute로 맞춰야 하며, childnode 설정 또한 그렇다.

 

아래는 custom xml treeloader

Ext.ecm.XmlTreeLoader = Ext.extend(Ext.tree.TreeLoader, {
	XML_NODE_ELEMENT: 1,
	XML_NODE_TEXT: 3,

	processResponse: function (response, node, callback) {
		var xmlData = response.responseXML;
		var root = xmlData.documentElement || xmlData;

		try {
			node.beginUpdate();
			node.appendChild(this.parseXml(root));
			node.endUpdate();

			if (typeof callback == "function") {
				callback(this, node);
			}
		} catch (e) {
			this.handleFailure(response);
		}
	}
	, parseXml: function (node) {
		var nodes = [];
		Ext.each(node.childNodes, function (n) {
			if (n.nodeType == this.XML_NODE_ELEMENT) {
				var treeNode = this.createNode(n);
				if (n.childNodes.length > 0) {
					var child = this.parseXml(n);
					if (typeof child == 'string') {
						treeNode.attributes.innerText = child;
					} else {
						treeNode.appendChild(child);
					}
				}
				nodes.push(treeNode);
			}
			else if (n.nodeType == this.XML_NODE_TEXT) {
				var text = n.nodeValue.trim();
				if (text.length > 0) {
					return nodes = text;
				}
			}
		}, this);

		return nodes;
	}
	, createNode: function (node) {
		var attr = {
			tagName: node.tagName
		};

		if (node.childNodes.length > 0) {
			attr['leaf'] = false;
		}
		else {
			attr['leaf'] = true;
		}

		if (node.attributes.length > 0) {
			Ext.each(node.attributes, function (a) {
				attr[a.nodeName] = a.nodeValue;
			});
		}

		this.processAttributes(attr);

		return Ext.ecm.XmlTreeLoader.superclass.createNode.call(this, attr);
	}
	, processAttributes: function (attr) {
		if (attr.type) {
			//attr.text = eval("treeNode_" + attr.title);
			attr.text = attr.title;

			if (attr.type == "fixed")
				attr.draggable = false;

			if (attr.iconClsType != undefined)
				attr.iconCls = attr.iconClsType;

			attr.leaf = false;
			attr.loaded = true;
			attr.expanded = true;
		}
		else if (attr.title) {
			attr.text = attr.title;

			if (attr.type == "fixed")
				attr.draggable = false;

			if (attr.iconClsType != undefined)
				attr.iconCls = attr.iconClsType;

			attr.leaf = true;
		}
	}
});

 

그리고 xml

<ecm id="ecm" title="ecm">
	<item id="apvLibrary" title="전자결재" type="fixed" url="/APVLibrary/Forms/AllItems.aspx">
		<tag id="ad4e70c0-2f6b-41c6-97f8-c6366a5951a7" title="김준" iconCls="People"/>
		<tag id="1e5817e4-5910-4049-8004-3dc80588890c" title="노가다" iconCls="People"/>
		<tag id="eab6b2d6-6c4d-4a4e-876c-2a7c9eab11bc" title="김뉴범" iconCls="People"/>
		<tag id="Test/개인폴더" title="개인폴더" iconCls="Folder"/>
		<tag id="Test/임시폴더" title="임시폴더" iconCls="Folder"/>
		<tag id="Test/공유폴더" title="공유폴더" iconCls="Folder"/>
	</item>
	<item id="docLibrary" title="문서함" type="fixed" url="/DOCLibrary/Forms/AllItems.aspx">
		<tag id="b2641b0f-8a63-4ba2-9a0d-fcd55be0fe4e" title="마약팀" iconCls="Organization"/>
		<tag id="2d1ca5cc-616c-4981-90b7-9356f38e1018" title="강력팀" iconCls="Organization"/>
		<tag id="eab6b2d6-6c4d-4a4e-876c-2a7c9eab11bc" title="김뉴범" iconCls="People"/>
	</item>
	<item id="rcdLibrary" title="레코드" type="fixed" url="/RCDLibrary/Forms/AllItems.aspx">
		<tag id="eab6b2d6-6c4d-4a4e-876c-2a7c9eab11bc" title="김뉴범" iconCls="People"/>
		<tag id="62625eab-eb2f-4ecf-b32d-ac67debef3c1" title="강아지" iconCls="Tag"/>
		<tag id="4a4207d8-60a4-478f-90b6-0f528d504295" title="고양이" iconCls="Tag"/>
	</item>
</ecm>

 

아래는 사용 예제

var treeLoader = new Ext.ecm.XmlTreeLoader({
	dataUrl: EcmServerURL
	, baseParams: { DataType: 'initXml', DBListName: 'ECMMDMgtDataDB' }
});

// treeLoader를 만들고
// tree에다가 낑궈 주면 됨..
// 밑에꺼는 커스텀 tree panel이나 기본 treepanel로 해도 상관 없음~
var tree = new Ext.ux.MultiSelectTreePanel({
	id: "treeTag"
	, autoScroll: true
	, animate: true
	, containerScroll: true
	, border: false
	, buttonAlign: 'center'
	, enableDD: true
	, ddGroup: 'GridDD'
	, rootVisible: false
	, root: new Ext.tree.AsyncTreeNode({ text: msgDataTreeRootName, id: 'ecm' })
	, loader: treeLoader
});

 

주의할 점은. 전혀 없고.

Ext.ecm.XmlTreeLoader 에서 processAttributes를 잘 만들어 주면 됨..

xml 의 attribute를 ext TreeNode에 맞는 값으로 설정하면 됨.

'Script > Script Extjs' 카테고리의 다른 글

EXTJS Custom GridPanel  (0) 2011.05.12
EXTJS Custom XmlTreeLoader  (0) 2011.05.12

+ Recent posts