javascript控件开发之工具栏控件

在前几篇的基础上，本篇将开发工具栏控件，工具栏控件一般包括三部份，
1、toolBar控件，简单说就是工具栏容器，
2、toolButton控件，即工具栏上的按钮控件，该按钮控件包括图标和文字两部份，
3、则是分隔符控件，一般分隔符控件也是在toolButton控件基础上引申出来的，
为了简单易学，我们这里直接用上一篇的控件作为toolBar控件使用，也就是我们这次编写出来的toolButton控件直按放一Panel控件上，

首先在component\ui\文件夹下添加控件文件，com.ui.toolButton.js 如下，
定义com.ui.toolButton控件类，继承com.ui.panel控件。

/**
 * 按钮控件类.
 * 创建: QZZ
 * 日期: 2014-04-06
 */
(function(undefined) {
  

	nameSpace("com.ui");

	com.ui.toolButton = Extend(com.ui.panel, {
  
	    /**
		 * 创建函数.
		 */
	    create:function(){
  
		    this.base();
			this.className = "com.ui.toolButton";
			this.logInfo("create");
	    }，
		/**
		 * 渲染函数.
		 */
	    render:function() {
  

	    }
	});
})();

渲染函数如下，把渲染方式默认为“alLeft”，添加一个type属性,用于区别split控件或button控件，分别进行渲染。
1. split控件，则直接创建一个div,设置样式，然后宽度设置为8px;
2. button控件 则创建一个table，分三层次， 第一层用于设置高度，第二层用于放图标，第三层次用于放文字，图标与文字都通过配置方式获得。

		/**
		 * 渲染函数.
		 */
		render:function(){		    
		    this.base();
			this.setAlign("alLeft");
			if(this.option.type === "split") {
  
			    this.setWidth(8);
				this.setStyle(this.win, "toolButtonSplitStyle");
				var splitDiv = this.createElement("div");
				this.setStyle(splitDiv,"toolSplitStyle");
				this.win.appendChild(splitDiv);
			} else {
  
				//初始化caption
				this.caption = this.win.innerHTML;
				if(this.option.icon != null) {
  
				    this.tabIcon = this.createElement("table");
					this.setStyle