layout.js

ZK 基础介绍 功能操作 模块 结合数据库操作

/* layout.js

{{IS_NOTE
	Purpose:
		
	Description:
	
	History:
		Aug 27, 2007 5:46:09 PM , Created by jumperchen
}}IS_NOTE

Copyright (C) 2007 Potix Corporation. All Rights Reserved.

{{IS_RIGHT
	This program is distributed under GPL Version 2.0 in the hope that
	it will be useful, but WITHOUT ANY WARRANTY.
}}IS_RIGHT
*/
zk.Layout = Class.create();
zk.Layout.prototype = {
	initialize: function (cmp) {
		this.id = cmp.id;			
		this.el = cmp;
		zkau.setMeta(cmp, this);
		var meta = this; //the nested function only see local var
		this.fnResize = function () {meta.render();};		
		this._regions = {};		
	},
	addRegion: function (region, ambit) {
		this._regions[region] = ambit;
	},
	removeRegion: function (region) {
		delete this._regions[region];
	},
	getRegion: function (region) {
		return this._regions[region];
	},
	_getAmbit: function (cmp, region) {
		var xy = Position.positionedOffset(cmp);
		var w = cmp.style.width, h = cmp.style.height;
		var widx = w.indexOf("%");
		var hidx = h.indexOf("%");
		if (widx > 0) cmp._width = $int(w.substring(0, widx));
		if (hidx > 0) cmp._height = $int(h.substring(0, hidx));
		var ambit = {
		 	x: xy[0], 
			y: xy[1], 
			width: cmp._width ?  Math.max(Math.floor(this.el.offsetWidth * cmp._width / 100), 0) : cmp.offsetWidth, 
			height: cmp._height ?  Math.max(Math.floor(this.el.offsetHeight * cmp._height / 100), 0) : cmp.offsetHeight
		};
		if (region) {
			switch (region) {
				case "north":
					ambit.height += cmp.split.offsetHeight;
					break;
				case "south":
					ambit.height += cmp.split.offsetHeight;
        			ambit.y -= cmp.split.offsetHeight;
					break;
				case "west": 
					ambit.width += cmp.split.offsetWidth;
					break;
				case "east":
					ambit.width += cmp.split.offsetWidth;
        			ambit.x -= cmp.split.offsetWidth;
					break;
			}
		}
		return ambit;
	},
	render: function () {
		if (!zk.isRealVisible(this.el)) return;
		var width = this.el.offsetWidth, height = this.el.offsetHeight;
        var cW = width, cH = height, cY = 0, cX = 0;
		var n = this.getRegion("north"), s = this.getRegion("south"), 
			w = this.getRegion("west"), e = this.getRegion("east"), 
			c = this.getRegion("center");
		if (n && zk.isRealVisible(n)) {
			var ambit = this._getAmbit(n, "north");
			var margin = this._paserMargin(getZKAttr(n, "mars") || "0,0,0,0");
			ambit.width = width - (margin.left + margin.right);
            ambit.x = margin.left;
            ambit.y = margin.top;
            cY = ambit.height + ambit.y + margin.bottom;
            cH -= cY;
			ambit = this._resizeSplit(n, ambit, "north");
			this._resize(n, ambit);
		} else if (n) {
			var ambit = this._getAmbit(n.split);			
            ambit.width = width ;
            ambit.x = ambit.y = 0;
			cY = ambit.height + ambit.y;
            cH -= cY;
			this._resizeSplit(n, ambit, "north");
		}
		if (s && zk.isRealVisible(s)) {
           	var ambit = this._getAmbit(s, "south");			
			var margin = this._paserMargin(getZKAttr(s, "mars") || "0,0,0,0");
            ambit.width = width - (margin.left + margin.right);
            ambit.x = margin.left;
            var total = (ambit.height + margin.top + margin.bottom);
            ambit.y = height - total + margin.top;
            cH -= total;
			ambit = this._resizeSplit(s, ambit, "south");
            this._resize(s, ambit);
        } else if (s) {
			var ambit = this._getAmbit(s.split);			
            ambit.width = width ;
            ambit.x = 0;
            ambit.y = height - ambit.height;	
            cH -= ambit.height;
			this._resizeSplit(s, ambit, "south");
		}
		if (w && zk.isRealVisible(w)) {
            var ambit = this._getAmbit(w, "west");			
			var margin = this._paserMargin(getZKAttr(w, "mars") || "0,0,0,0");
            ambit.height = cH - (margin.top + margin.bottom);
            ambit.x = margin.left;
            ambit.y = cY + margin.top;
            var total = (ambit.width + margin.left + margin.right);
            cX += total;
            cW -= total;	
			ambit = this._resizeSplit(w, ambit, "west");		
            this._resize(w, ambit);
        } else if (w) {
			var ambit = this._getAmbit(w.split);			
            ambit.height = cH ;
            ambit.x = 0;
            ambit.y = cY;	
            cX += ambit.width;
            cW -= ambit.width;
			this._resizeSplit(w, ambit, "west");
		}
		if (e && zk.isRealVisible(e)) {
           	var ambit = this._getAmbit(e, "east");
			var margin = this._paserMargin(getZKAttr(e, "mars") || "0,0,0,0");
            ambit.height = cH - (margin.top + margin.bottom);
            var total = (ambit.width + margin.left + margin.right);
            ambit.x = width - total + margin.left;
            ambit.y = cY + margin.top;
            cW -= total;
			ambit = this._resizeSplit(e, ambit, "east");
            this._resize(e, ambit);
        } else if (e) {
			var ambit = this._getAmbit(e.split);			
            ambit.height = cH ;
            ambit.x = width - ambit.width;
            ambit.y = cY;	
            cW -= ambit.width;								
			this._resizeSplit(e, ambit, "east");
		} 
		if (c) {
            var margin = this._paserMargin(getZKAttr(c, "mars") || "0,0,0,0");
            var ambit = {
                x: cX + margin.left,
                y: cY + margin.top,
                width: cW - (margin.left + margin.right),
                height: cH - (margin.top + margin.bottom)
            };			
            this._resize(c, ambit);
        }
	},
	_paserMargin: function (val) {
		var ms = val.split(",");
		return {top: $int(ms[0]), left: $int(ms[1]), right: $int(ms[2]), bottom: $int(ms[3])};
	},
	_resize: function (cmp, ambit) {
		cmp.style.left = ambit.x + "px";
        cmp.style.top = ambit.y + "px";		
		this._resizeBody(cmp, ambit);		
	},
	_resizeSplit: function (cmp, ambit, region) {	
		if (region == "north" || region == "south") cmp.split.splitbtn.style.marginLeft = ((ambit.width - cmp.split.splitbtn.offsetWidth) / 2)+"px";
		else cmp.split.splitbtn.style.marginTop = ((ambit.height - cmp.split.splitbtn.offsetHeight) / 2)+"px";
		
		var sAmbit = this._getAmbit(cmp.split);
		switch(region){
			case "north":
				ambit.height -= sAmbit.height;
	          	cmp.split.style.left = ambit.x + "px";
				cmp.split.style.top = (ambit.y + ambit.height) + "px";
				cmp.split.style.width = ambit.width + "px";
				break;
			case "south":		           
				ambit.height -= sAmbit.height;
	            ambit.y += sAmbit.height;
				cmp.split.style.left = ambit.x + "px";
				cmp.split.style.top = (ambit.y - sAmbit.height) + "px";		            
				cmp.split.style.width = ambit.width + "px";
				break;
			case "west":
	            ambit.width -= sAmbit.width;
				cmp.split.style.left = (ambit.x + ambit.width) + "px";
				cmp.split.style.top = ambit.y + "px";		       
				cmp.split.style.height = ambit.height + "px";
				break;
			case "east":
				ambit.width -= sAmbit.width;
				cmp.split.style.left = ambit.x + "px";
				cmp.split.style.top = ambit.y + "px";		       
				cmp.split.style.height = ambit.height + "px";
	            ambit.x += sAmbit.width;
				break;					
		}
		return ambit;
	},
	_resizeBody: function (cmp, ambit) {		
		ambit.width = Math.max(0, ambit.width);
        ambit.height = Math.max(0, ambit.height);
		var bodyEl;		
		var cid = getZKAttr(cmp, "cid");
		if (getZKAttr(cmp, "flex") == "true" && cid != "zk_n_a") {
			bodyEl = $e(getZKAttr(cmp, "cid"));
		} else {
			bodyEl = $e($uuid(cmp) + "!cave");			
		} 	
		cmp.bodyEl = bodyEl;
		if (!this.ignoreResize(bodyEl, ambit.width, ambit.height)) {     
			ambit.width = zk.revisedSize(cmp, ambit.width);
			cmp.style.width = ambit.width + "px";	   			
        	ambit.width = zk.revisedSize(bodyEl, ambit.width);
			bodyEl.style.width = ambit.width + "px";
	        
			ambit.height = zk.revisedSize(cmp, ambit.height, true);
			cmp.style.height = ambit.height + "px";
            ambit.height = zk.revisedSize(bodyEl, ambit.height, true);
			bodyEl.style.height = ambit.height + "px";
			if (getZKAttr(cmp, "autoscl") == "true") { 
	        	bodyEl.style.overflow = "auto";				
				bodyEl.style.position = "relative";
			} else {
				bodyEl.style.overflow = "hidden";							
				bodyEl.style.position = "";
			}
		}
	},
    ignoreResize : function(cmp, w, h) { 
        if (cmp._lastSize && cmp._lastSize.width == w && cmp._lastSize.height == h) {
        	return true;
        } else {
        	cmp._lastSize = {width: w, height: h};
        	return false;
        }
    },
	cleanup: function ()  {
		this.el = this._regions = null;
		zk.rmOnResize(this.fnResize);
	}
};
zk.Layout.getOwnerLayout = function (cmp, cleanup) {
	var bl = $parentByType(cmp, "BorderLayout");
	var meta = zkau.getMeta(bl);
	if (meta || cleanup) return meta;
	else return new zk.Layout(bl);
};
zk.Layout.getRootLayout = function (el) {
	for (; el; el = $parentByType($real(el), "BorderLayout")) {
		var lr = $e($uuid(el.parentNode));
		if ($type(lr) == "LayoutRegion") {
			 el = lr;
		} else return el;
	}	
};
zk.Layout.cumulativeOffset = function (element, rootelemnt) {
	var valueT = 0, valueL = 0;
	do {
		if (rootelemnt && element == rootelemnt)break;
		if (Element.getStyle(element, "position") == 'fixed') {
			valueT += zk.innerY() + element.offsetTop;
			valueL += zk.innerX() + element.offsetLeft;
			break;
		} else {
		    valueT += element.offsetTop  || 0;
			valueL += element.offsetLeft || 0;			
		    element = zk.gecko && element != document.body ? Position.offsetParent(element): element.offsetParent;
		}
	} while (element);
	return [valueL, valueT];
};
zkBorderLayout = {};
zkLayoutRegion = {};
zkBorderLayout.init = function (cmp) {
	var layout = zk.Layout.getOwnerLayout(cmp);
	zk.addInitLater(function () {layout.render();}, true);	
	zk.addOnResize(layout.fnResize, true);	
};
zkBorderLayout.childchg = function (cmp) {
	zk.onResize(0, cmp);
};
zkBorderLayout.setAttr = function (cmp, nm, val) {
	switch (nm) {
		case "z.resize" :
		var meta = zkau.getMeta(cmp);	
		if (meta) meta.render();
		return true;
	}
	return false;
};

zkLayoutRegion.init = function (cmp) {
	var split = $e(cmp.id + "!split");	
	cmp = $real(cmp);	
	var pos = getZKAttr(cmp, "pos");
	if (split) {
		cmp.split = split;
		cmp.split.pos = pos;