利用ExtJS构建一个应用系统（二）

最新推荐文章于 2017-12-02 12:13:22 发布

原创最新推荐文章于 2017-12-02 12:13:22 发布 · 148 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #json #prototype #算法 #CSS

extjs 专栏收录该内容

13 篇文章

订阅专栏

本文介绍使用ExtJS实现股票数据展示的Tree组件过程，包括异步加载、ContextMenu定制及节点高亮等功能。

在上一篇中，详述了应用主界面的实现过程，在其中，有一个Tree的部分，是显示的股票的数据，包括三个层次：股票类型，子类型，股票。对于具有购买历史的Tree分支，进行醒目的显示；Tree中支持Context Menu。实现的结果如下图所示：

在Tree的定义中，主要有以下几个关键点：

1、利用了异步加载的方式，一级一级的加载Tree的子项，涉及到Tree中的配置有：

root属性配置，在异步加载情况下，必须是Ext.tree.AsyncTreeNode；

beforeload事件，是在加载下级Tree之前调用，在其中，通过利用上一级节点的值作为传入参数，获得下一级的Node的json数据，在传入中文参数值时，利用了encodeURI(encodeURI(node.attributes.type))的方式，在action中利用：String msg = URLDecoder.decode(text,"UTF-8");获得传入的中文参数。

				'beforeload' : function(node) {
					if (node.id == 'root') {
						tree.loader.dataUrl = treeUrl;
					} else {
						tree.loader.dataUrl = treeUrl + '?id=' + node.id
								+ '&text='
								+ encodeURI(encodeURI(node.attributes.type));
					}
				}

例如在打开“建筑业”时，获得股票子类型的json结果为：

JSON结果

[{"flag":1,"id":"SUBTYPEID_0","leaf":false,"multiLeafFlag":0,"text":"<font class = buy>建筑施工<\/font>","type":"建筑施工"},{"flag":0,"id":"SUBTYPEID_1","leaf":false,"multiLeafFlag":0,"text":"建筑材料","type":"建筑材料"},{"flag":0,"id":"SUBTYPEID_2","leaf":false,"multiLeafFlag":0,"text":"建筑业","type":"建筑业"}]

TreeNode中需要的属性有leaf、text等，而自定义type、flag属性，保存在TreeNode的attributes 中，为后面的算法引用，进行数据的传递。

2、利用contextMenu事件，显示为Tree定义的context Menu

由于对于ContextMenu事件进行相应的函数，只能得到ContextMenu的Item对象，为了在Item的响应函数中传入特殊的参数，对ExtJS的Ext.menu.Item进行了继承，并在继承类中定义了两个传输自定义参数的变量：

MyMenuItem = Ext.extend(Ext.menu.Item, {});
MyMenuItem.prototype.stockCode;
MyMenuItem.prototype.method;
Ext.reg('mymenuitem', MyMenuItem);

然后通过把各个Item的定义加入到Context Menu中，实现各个Item控制的不同的功能。

为了阻止默认Context Menu的出现，在Tree的contextMenu事件相应中，加入了event.preventDefault();。

3、利用'beforeappend' 事件，实现Tree的局部涮洗和显示Text的修改

'beforeappend' 事件，在TreeNode展开时触发，在应用的设计中，有如果对某一个股票进行购买，则对于的TreeNode特殊显示，利用buy class进行控制（css buy class 定义如下）：

.buy {
	color: #ffff00;;
	font-weight: bold;
}

当通过购买窗口输入购买数据时，重新load这一个股票类型TreeNode，触发beforeappend事件，实现对于股票类型和子类型显示文字的突出显示。

4、collapsible和collapseMode

collapsible属性为true时，定义TreePanel可以收起，显示如图中红圈标识的部分，可以实现TreePanel的收起功能。

collapseMode属性当定义为'mini’时，显示图中绿圈标识的部分，实现了TreePanel的最小化动作。

整体的TreePanel实现的代码，如下所示：

var treeUrl = 'tree/treeAction.action';

var contextMenu = new Ext.menu.Menu();

MyMenuItem = Ext.extend(Ext.menu.Item, {});
MyMenuItem.prototype.stockCode;
MyMenuItem.prototype.method;
Ext.reg('mymenuitem', MyMenuItem);

var menuNames = ['综合图表', '指数图表', '价格图表', 'DMKI-CI图表'];
var actionMethods = ['integrationChartAction', 'indexChartAction',
		'priceChartAction', 'dkmiCiChartAction'];

for (var i = 0; i < menuNames.length; i++) {

	menuItem = new MyMenuItem({
				text : menuNames[i],
				method : actionMethods[i],
				listeners : {
					'click' : function(item, event) {
						dmkiInputWindow(item, event);
					}
				}
			});
	contextMenu.addItem(menuItem);
}

multiWinMenuItem = new MyMenuItem({
			text : '多幅图表',
			listeners : {
				'click' : function(item, event) {
					multiChartInpuWin(item, event);
				}
			}
		});
contextMenu.addItem(multiWinMenuItem);

buyMenuItem = new MyMenuItem({
			text : '购买输入',
			listeners : {
				'click' : function(item, event) {
					buyStockInpuWin(item, event);
				}
			}
		});
contextMenu.addItem(buyMenuItem);

buyListMenuItem = new MyMenuItem({
			text : '购买列表',
			listeners : {
				'click' : function(item, event) {
					showBuyListGrid(item, event);
				}
			}
		});
contextMenu.addItem(buyListMenuItem);

treeContextMenu = function(node, event) {
	// alert(node.text);
	node.select();
	// var c = node.getOwnerTree().contextMenu;
	/*
	 * menuItem = new Ext.menu.Item({ id : node.id, text : node.text });
	 * c.addItem(menuItem);
	 */
	var items = contextMenu.items;
	Ext.iterate(items.map, function(key, value) {
				value.stockCode = node.id;
			});

	contextMenu.contextNode = node;

	contextMenu.showAt(event.getXY());

	return contextMenu;
}

var tree = new Ext.tree.TreePanel({
			title : 'tree',
			width : '20%',
			region : 'west',
			xtype : 'treepanel',
			collapsible : true,
			collapseMode : 'mini',
			autoScroll : true,
			rootVisible : false,
			useArrows : true,
			animate : true,
			enableDD : true,
			containerScroll : true,
			root : new Ext.tree.AsyncTreeNode({
						id : 'root',
						type : 'a'
					}),

			contextMenu : new Ext.menu.Menu({
						items : [{
									id : 'delete-node',
									text : 'Delete Node'
								}]
					}),

			dataUrl : treeUrl,
			// dataUrl:'http://localhost:8080/Stock3th/ext-3.2.0/examples/tree/check-nodes.json',
			// dataUrl:'http://localhost:8080/Stock3th/menu.action',
			listeners : {
				'click' : function(node) {
					if (node.leaf == true) {
						// alert(node.id);
						gridInputWin(node);
					}
				},
				'contextmenu' : function(node, event) {
					if (node.leaf == true) {
						treeContextMenu(node, event);
					}
					event.preventDefault();

				},
				'beforeappend' : function(ownerTree, parentNode, thisNode) {
					if(parentNode.attributes.multiLeafFlag == 1)
					{
						return;
					}
					if (thisNode.leaf != true) {
						var flag = 0;
						if (thisNode.attributes.flag == 1) {
							flag = 1;
						}
						if (flag == 1) {
							if (parentNode.attributes.flag == 0) {
								parentNode.setText('<font class = buy>' +
								parentNode.attributes.type +
								'</font>');
								parentNode.attributes.flag = 1;
							}
								parentNode.attributes.multiLeafFlag = 1;
						}
						else {
							if (parentNode.attributes.flag == 1) {
								parentNode.setText(parentNode.attributes.type);
								parentNode.attributes.flag = 0;

							}
						}
					}
				},
				'beforeload' : function(node) {
					if (node.id == 'root') {
						tree.loader.dataUrl = treeUrl;
					} else {
						tree.loader.dataUrl = treeUrl + '?id=' + node.id
								+ '&text='
								+ encodeURI(encodeURI(node.attributes.type));
					}
				}
			}
		});