Sencha Touch多選樹組件

Ext.define('ux.MultipleTreeListView', {
	extend : 'Ext.Container',
	xtype : 'multipletreelistview',
	alternateClassName : 'multipletreelistview',
	config : {
		isCheckTap : false,
		flowId : null,
		roleId : null,
		store : null,
		currentRecord : null,
		currentIndex : null,
		layout : 'fit',
		items : [{
			xtype : 'dataview',
			styleHtmlContent : true,
			margin : '0 10 0 10',
			scrollable : {
				direction : 'vertical',
				directionLock : true
			},
			itemTpl : new Ext.XTemplate('<div class="{parentNode}" id="{node}">' + '<table style="width:100%;margin:0;">' + '<tr>' + '<tpl if="level &gt; 0">' + '<td style="width:{level*18}px;"></td>' + '</tpl>' +
			// + '<tpl if="!leaf">'//若是是boolean類型，在data[]裏面能夠不用指定他的類型爲boolean，
			//若是是store則必須在type裏面指定類型爲boolean，不然不能識別爲boolean類型
			'<tpl if="iconCls != \'user\'">' + '<tpl if="isOpen">' + '<td style="width:18px;padding:0"><image src="resources/images/nolines_minus.gif"></image></td>' + '<tpl if="iconCls == \'subrole\'">' + '<td style="width:18px;padding:0"><image style="width:18px;" src="resources/images/sl.png"></image></td>' + '<tpl else>' + '<td style="width:18px;padding:0"><image src="resources/images/folderopen.gif"></image></td>' + '</tpl>' + '<tpl else>' + '<td style="width:18px;padding:0"><image src="resources/images/nolines_plus.gif"></image></td>' + '<tpl if="iconCls == \'subrole\'">' + '<td style="width:18px;padding:0"><image style="width:18px;" src="resources/images/sl.png"></image></td>' + '<tpl else>' + '<td style="width:18px;padding:0"><image src="resources/images/folder.gif"></image></td>' + '</tpl>' + '</tpl>' + '<tpl else>' + '<td style="width:18px;padding:0"></td>' + '<td style="width:18px;padding:0"><image style="width:18px;" src="resources/images/pp.png"></image></td>' + '</tpl>' + '<td style="word-break:break-all;"><input type=\'checkbox\' onclick="util.clickFn(\'{nodeType}\', \'{node}\')" id = \'check_{node}\' class = "results" <tpl if="isChecked"> checked="checked" </tpl>/>{text}</td>' + '</tr>' + '</table>' + '</div>')
		}, {
			xtype : 'toolbar',
			docked : 'top',
			title : '人員選擇樹',
			items : [{
				xtype : 'button',
				iconCls : 'arrow_left',
				handler : function(button) {
					util.backView();
				}
			}, {
				xtype : 'button',
				iconCls : 'check',
				right : 0,
				top : 5,
				handler : function(button) {
					if (window.confirm("確認選擇嗎？")) {
						var me = button.getParent().getParent();
						var classElements = document.getElementsByClassName("results");
						var len = classElements.length;
						var texts = '';
						var nodes = '';
						for (var i = 0; i < len; i++) {
							if (classElements[i].checked) {
								var node = classElements[i].id.substring(6);
								var record = me.getRecordByNode(node);
								texts += record.get('text');
								texts += ",";
								var node;
								var nowNodes = record.get('node').split(",");
								if (nowNodes.length > 1) {
									node = nowNodes[nowNodes.length - 1];
								} else {
									node = record.get('node');
									//處理根節點沒逗號的問題
								}
								nodes += node;
								nodes += ",";
							}
						}
						texts = texts.substring(0, texts.length - 1);
						nodes = nodes.substring(0, nodes.length - 1);
						util.backView();
						var view = Ext.Viewport.getActiveItem();
						view.setCsfDisplay(texts);
						view.setCsf(nodes);
					}
				}
			}]
		}]
	},
	/**
	 * 初始化方法
	 */
	initialize : function() {
		var me = this;
		me.callParent();
		var store = Ext.create('FaultOrder.store.TreeStore');
		store.setData([{
			node : "-1",
			nodeType : "root",
			parentNode : "",
			parentNodeType : "",
			text : "可選子角色",
			iconCls : "dict",
			leaf : false,
			//如下兩個是客戶端爲達到樹形效果增長的兩個屬性，不用服務器傳來
			level : 0,
			isOpen : false,
			isChecked : false
		}]);

		me.items.items[0].setStore(store);
		me.items.items[0].on('itemsingletap', me.itemsingletapFn, me);
	},
	/**
	 * 頁面加載完成
	 */
	show : function() {
		var store = this.items.items[0].getStore();
		var len = store.getCount();
		for (var i = 0; i < len; i++) {
			var record = store.getAt(i);
			//得到節點對應的等級
			var level = record.get('level');
			var node = record.get('node');
			var div = document.getElementById(node);
			if (level == 0) {//初始化時，0級節點才顯示
				div.style.display = 'block';
			} else {
				div.style.display = 'none';
			}
		}
	},
	/**
	 * 單擊
	 * @param {} list
	 * @param {} index
	 * @param {} target
	 * @param {} record
	 * @param {} e
	 * @param {} eOpts
	 */
	itemsingletapFn : function(list, index, target, record, e, eOpts) {
		if (this.getIsCheckTap()) {
			//解開鎖並返回
			this.setIsCheckTap(false);
			return;
		}
		this.config.x = e.pageX;
		this.config.y = e.pageY;
		this.setCurrentIndex(index);
		var me = this;
		var level = record.get('level');
		var isOpen = record.get('isOpen');
		var leaf = record.get('leaf');
		var node = record.get('node');
		var nodeType = record.get('nodeType');
		var parentNode = record.get('parentNode');
		var display = 'none';

		//得到全部class=node的塊（子級節點）
		var classElements = document.getElementsByClassName(node);
		var len = classElements.length;
		record.set('isOpen', !isOpen);
		//切換打開/關閉節點
		this.setCurrentRecord(record);
		if (len < 1) {//沒有子節點，則多是還未向服務器請求到數據，此時向服務器發起請求
			this.acquireNodeRequest(record);
		} else {//執行樹節點打開關閉操做
			if (!isOpen) {//當前的isOpen和保存isOpen變量時是相反的
				display = 'block';
			} else {
				display = 'none';
			}
			me.setDisplays(node, display);
		}
	},
	/**
	 * 設置div塊顯示仍是隱藏
	 * @param {} node
	 * @param {} display
	 */
	setDisplays : function(node, display) {
		var me = this;
		//得到全部class=node的塊
		var classElements = document.getElementsByClassName(node);
		var len = classElements.length;
		for (var i = 0; i < len; i++) {
			var childId = classElements[i].id;
			//必須先設置isOpen屬性後設置顯示或隱藏才生效
			me.setOpenBynode(childId, false);
			classElements[i].style.display = display;
			if (display == 'none') {//只有隱藏的時候才把子節點隱藏，展開時不必把子節點也展開
				var childElements = document.getElementsByClassName(childId);
				if (childElements.length > 0) {//若是該節點有子節點
					me.setDisplays(childId, "none");
					//當前節點的子節點所有隱藏
				}
			}
		}
	},
	/**
	 * 經過node找到對應的record並設置起isOpen屬性
	 * @param {} node
	 * @param {} isOpen
	 */
	setOpenBynode : function(node, isOpen) {
		//list沒綁定store直接綁定data的，在list渲染過程當中會生成一個store綁定到list
		var store = this.items.items[0].getStore();
		var storeLen = store.getCount();
		for (var i = 0; i < storeLen; i++) {
			var record = store.getAt(i);
			if (node == record.get('node')) {
				record.set('isOpen', isOpen);
				break;
			}
		}
	},
	acquireNodeRequest : function(record) {
		var flowId = this.getFlowId();
		var roleId = this.getRoleId();
		var node;
		var nowNodes = record.get('node').split(",");
		if (nowNodes.length > 1) {
			node = nowNodes[nowNodes.length - 1];
		} else {
			node = record.get('node');
			//處理根節點沒逗號的問題
		}
		var nodeType = record.get('nodeType');
		var parentNode;
		var nowParentNodes = record.get('parentNode').split(",");
		if (nowParentNodes.length > 1) {
			parentNode = nowParentNodes[nowParentNodes.length - 1];
		} else {
			parentNode = record.get('parentNode');
			//處理根節點沒逗號的問題
		}
		var parentNodeType = record.get('parentNodeType');

		var xmlData = util.setParameterSoap('subRoleTree', config.WorkSheetMobile, 'roleId', roleId, 'flowId', flowId, 'node', node, 'nodeType', nodeType, 'parentNode', parentNode, 'parentNodeType', parentNodeType);
		var me = this;
		Ext.Ajax.request({
			xmlData : xmlData,
			success : me.successFnOfacquireNodeRequest,
			scope : me
		});
	},
	/**
	 * 節點
	 * @param {} result
	 */
	successFnOfacquireNodeRequest : function(result) {
		var currentRecord = this.getCurrentRecord();
		var currentIndex = this.getCurrentIndex();
		var store = this.items.items[0].getStore();
		var storeLen = store.getCount();
		var firstDatas = store.getRange(0, currentIndex);
		var secondDatas = [];
		if (currentIndex < (storeLen - 1)) {//若是當前的index大於等於（等於時前面和後面都包含最後一個）時就不執行
			secondDatas = store.getRange(currentIndex + 1, storeLen - 1);
		}
		var str = $(result.responseText).children().text();
		str = util.replaceAll(str, '\"id\":null', '\"id\":\"null\"');
		//處理其餘：裏面的id:null轉換爲json後爲id: "null"
		var requestData = [];
		//將字符串轉換爲json對象
		var strData = new Ext.data.reader.Json().getResponseData(str);
		var strLen = strData.length;
		for (var i = 0; i < strLen; i++) {
			requestData[i] = {
				text : strData[i].text,
				iconCls : strData[i].iconCls,
				leaf : strData[i].leaf,
				nodeType : strData[i].nodeType,
				node : currentRecord.get('node') + "," + strData[i].id, //由於傳來的相似：傳輸網這些不少相同的節點（node相同）
				parentNode : currentRecord.get('node'),
				parentNodeType : currentRecord.get('nodeType'),
				level : currentRecord.get('level') + 1,
				isOpen : false,
				isChecked : false
			};
		}
		//將處理後的新數據經過拼接數組放到store裏面顯示
		store.insert(currentIndex + 1, requestData);
		var isOpen = currentRecord.get('isOpen');
		var node = currentRecord.get('node');
		//由於此時發生在點擊後，則isOpen至關於點以前來講是相反的
		if (isOpen) {
			display = 'block';
		} else {
			display = 'none';
		}
		this.setDisplays(node, display);
	},
	/**
	 * 重寫隱藏方法，摧毀掉彈出框
	 */
	hide : function() {
		this.destroy();
	},
	/**
	 * 經過node得到record
	 * @param {} node
	 * @return {}
	 */
	getRecordByNode : function(node) {
		var store = this.items.items[0].getStore();
		var storeLen = store.getCount();
		for (var i = 0; i < storeLen; i++) {
			var record = store.getAt(i);
			if (node == record.get('node')) {
				return record;
				break;
			}
		}
		return null;
	}
});

運行效果