javascript控件开发之可见控件(1)
   上一篇写了第一个基础控件，本篇我们开始编写可见控件com.ui.window.js,首先，在component文件夹下面添加ui文件夹，并在ui文件夹下添加com.ui.window.js文件，并添加初始化方法，init、create、render、_doResize方法
window类继承com.baseObject类，
init 重写基类的方法，主要添加dom占位元素，是否由dom创建标志两个参数
     并从dom元素对象中获取option属性，合并到类option属性并调用渲染方法，
create 为基类调用的创建方法，用于初始化变量，比如键盘事件，鼠标事件，宽，高等属性
render 为跟据属性，渲染或重构dom元素
afterRender为渲染后函数，
_doResize 则为跟据宽，高等属性，设置dom元素的位置或宽高等，
因为dom元素多需要添加样式，这里写了针对样式控制的方法，setStyle, addStyle, clearStyle, delStyle，另外，dom元素都有margin, padding, border等属性，为了续方便，添加了简易的读取边距函数，
这里我们有些函数用到了下划线开头，我们这里定义这种函数为私有函数，
详细代码如下，

/**
 * 可见窗口基类.
 * 创建: QZZ
 * 日期: 2014-04-06
 */
(function(undefined) {	
	nameSpace("com.ui");
	
	com.ui.window = Extend(com.baseObject, {
            /**
		 * 初始化函数.
		 * @param option 属性
		 * @param control DOM元素
		 * @param isDom 是否dom元素, 如果是在html页面上布局，
		 *                            则option已自动解析，
		 */
	    init:function(option, control, isDom) {		    
		    this.base(option);	
		    if(typeof control != "undefined") {
			    //获取dom元素
		    	this.thisWindow = control;
		    	if(!isDom) {
				    //读取属性
		    		var op = control.attributes.option;
					if(typeof op != "undefined") {
						op = eval("(" + op.nodeValue + ")");
					}
					if(typeof op != "undefined") {
						for(var key in op) {
							this.option[key] = op[key];
						}
					}
		    	}
				this.name = control.id || control.name;
		    }
		    this.logInfo("window.init");
		    this.render();
		    this.afterRender();
	    },
		/**
	     * 对象创建函数.
	     */
	    create:function() {
		    this.base();
		    this.className = "com.ui.window";
		    this.logInfo("window.create");
		    this.eventList = {};
		    this.keyBoard = {
		        DOWN:40,
		        UP:38,
		        LEFT:37,
		        RIGHT:39,
		        ENTER:13,
				C:10,
				V:86,
				X:88,
				Z:90
		    };
			this.mouseType = {mtLeft : "L",
		                      mtRight: "R"};
		    this.parent;
			//处理宽高，顶点，左边
			this.option.top = this._domValue(this.option.top, 0);
		    this.option.left = this._domValue(this.option.left, 0);
			//绝对顶、左点
			this._atop = null;
		    this._aleft = null;
			//宽高
			this.option.width = this._domValue(this.option.width, 10);
		    this.option.height = this._domValue(this.option.height, 10);
			//内外边距
			this.option.margin = this._domValue(this.option.margin,0);
			this.option.padding = this._domValue(this.option.padding,0);	
            this.option.border = this.option.border||"";
		    this.focus = false;
		    //面板选择
		    this.hasSelect = false;
			this._eventList = {};
		    this.body = null;
	    },
		/**
	     * 渲染函数.
	     */
	    render:function() {
	    	this.logInfo("window.render");
	    	if(typeof this.thisWindow == "undefined") {    	
	    	    this.thisWindow = this.createElement("div");
	    	}	    	    
	    	this.setStyle(this.thisWindow, "winStyle");
			//处理大小变量
	    	if(this._hasResize()) {
	    	    this._doResize();
	    	}
	    },
		/**
	     * 渲染后执行.
	     */
	    afterRender:function(){
	    	var _this = this;
	    	this.thisWindow.onmouseup = function() {
	        	_this.hasSelect = true;
	        };
	        //系统事件
	        this._sysEvent();
	    },
		/**
	     * 执行变化调整事件.
	     * @return 返回状态
	     */
	    _doResize:function() {	    	
	    	if(!this._update) return false;
	    	this.logBegin("_doResize");
	    	//边距处理
	    	if(this.thisWindow.style.margin != this.option.margin + "px") {
	    		this.thisWindow.style.margin = this.option.margin + "px";
	    	}
	    	if(this.thisWindow.style.padding != this.option.padding + "px") {
	    		this.thisWindow.style.padding = this.option.padding + "px";
	    	}
			if(this.option.border !== "") {
	    		this.thisWindow.style.border = this.option.border;
	    	}
	    	//计算长宽
	    	var bw = this._getRectWidth();
	    	var bh = this._getRectHeight();
	    	if(bw <= 0) {
	    		bw = 1;
	        }
	    	bw += "px";