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;
	}
});

运行效果