EXTJS Custom XmlTreeLoader

 

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에 맞는 값으로 설정하면 됨.