页面树结构
转至元数据结尾
转至元数据起始

示例说明

在灵活分析工具栏中添加"录制"和"停止录制"按钮,点击新增按钮,执行自定义操作。并且监听灵活分析数据刷新后的事件,进行自定义操作。

修改ConfigurationPatch.js扩展点配置文件

var ConfigurationPatch = {
	extensionPoints : {
		QueryView : {
			handlers : [ {
				className : "bof.gzgs.themejump.ThemeJumpQueryViewHandler"
			} ]
		}
	}
};


ThemeJumpQueryViewHandler对象实现

var ThemeJumpQueryViewHandler = function(queryView) {
	this.queryView = queryView;
    //监听数据刷新后的事件
	this.queryView.afterRefresh.subscribe(this.doAfterRefresh, this);
};
lang.extend(ThemeJumpQueryViewHandler, "freequery.widget.Module2");

ThemeJumpQueryViewHandler.prototype.destroy = function() {
	ThemeJumpQueryViewHandler.superclass.destroy.call(this);
};

// 扩展点1:添加工具栏按钮
ThemeJumpQueryViewHandler.prototype.readConfig = function() {
	var config = {
		toolbar : {
			items : [ {
				bofid : "_spaceThemeJump",
				image : "img/banner/toolbar_tab_space.gif"
			}, {
				bofid : "startRecordThemeJump",
				image : "img/themejump/START_RECORD.gif",
				title : "录制",
				command : "START_RECORD_THEME_JUMP"
			}, {
				bofid : "stopRecordThemeJump",
				image : "img/themejump/STOP_RECORD.gif",
				title : "停止录制",
				command : "STOP_RECORD_THEME_JUMP"
			} ]
		}
	};
	return config;
};
// 执行自定义按钮点击事件
ThemeJumpQueryViewHandler.prototype.execute = function(cmd, btn) {
	switch (cmd) {
		case "START_RECORD_THEME_JUMP":
		case "STOP_RECORD_THEME_JUMP":
			alert(cmd + ", " + btn.getAttribute("bofid"));
			break;
	}
};
// 扩展点2:监听已有事件
ThemeJumpQueryViewHandler.prototype.doAfterRefresh = function(queryView) {
	alert("Refresh data called.");
};

自定义Patch文件修改QueryView.js


由于添加的工具栏按钮宽度不统一,默认设置的固定宽度并不适用,所以修改相应的js文件。请参照“第四课:如何修改Smartbi JS文件 ”

QueryView.prototype.appendHandlers = function(handlerList) {
	if (!handlerList || !handlerList.length)
		return;
	this.processTemplate(this.panel);
	var parentElem = this.elemToolbarTr;
	var title2text = {
		'透视分析' : '透视',
		'' : ''
	};
	if (!this.handlers) {
		this.handlers = [];
	}
	for ( var i = 0, len = handlerList.length; i < len; i++) {
		var clz = null;
		try {
			clz = jsloader.resolve(handlerList[i].className);
		} catch (e) {
			continue;
		}
		var handler = new clz(this);
		this.handlers.push(handler);
		if ("function" != typeof handler.readConfig)
			continue;
		var config = handler.readConfig();
		var items = config && config.toolbar && config.toolbar.items;
		if (!items)
			continue;
		for ( var j = 0, lenj = items.length; j < lenj; j++) {
			var item = items[j];
			var bofid = item.bofid;
			var image = item.image;
			if (!bofid || !image)
				continue; // 不指定bofid或image的忽略
			if (this.getElementByBofid(bofid))
				continue; // 对于bofid重复的忽略
			if (jsloader.getLang() == "en") {
				continue;
			}
			var isSpace = (image == "img/banner/toolbar_tab_space.gif");
			var beforeElem = this.getElementByBofid(item.before
					|| "toolbarLastTd");
			var tdElem = document.createElement("td");
			tdElem.noWrap = true;
			parentElem.insertBefore(tdElem, beforeElem);
			var itemElem = null;
			if (isSpace) {
				itemElem = document.createElement("span");
				itemElem.className = "queryview-toolbar-space";
			} else {
				tdElem.className = 'queryview-toolbar-button-normal';
				itemElem = document.createElement("input");
				itemElem.type = "button";
				itemElem.className = "queryview-toolbar-button";
				itemElem.style.background = "url(" + image
						+ ") no-repeat left center";
				this.addBtnClickListener(handler, item.command, itemElem);
			}
			tdElem.appendChild(itemElem);
			if ((item.visible === false)
					|| (item.functionCode && !util
							.checkFunctionValid(item.functionCode))) {
				tdElem.style.display = "none";
			}
			for ( var k in item) {
				if (k == "image" || k == "before") {
					continue;
				}
				itemElem.setAttribute(k, item[k]);
			}
			var propName = this.getPropNameByBofid(bofid);
			this[propName] = itemElem;
			//
			var title = itemElem.title;
			if (!title || itemElem.tagName != 'INPUT'
					|| itemElem.type != 'button') {
				continue;
			}
			itemElem.value = title2text[title] || title;
			itemElem.style.backgroundPositionX = 'left';
			itemElem.style.paddingLeft = '20px';
 
			//修改宽度为auto实现宽度自适应
			itemElem.style.width = 'auto';
		}
		if ("function" == typeof handler.initItemsVisible)
			handler.initItemsVisible();
	}
};

示例源码下载:

ThemeJumpQueryViewHandler.rar

  • 无标签