$(function() {
?? ?var jh = {};
?? ?function ajaxExtend(target, src) {
?? ??? ?var key, deep, flatOptions = jQuery.ajaxSettings.flatOptions || {};
?? ??? ?for (key in src) {
?? ??? ??? ?if (src[key] !== undefined) { // 存在的直接放到target里面，不存在的放到deep里面
?? ??? ??? ??? ?(flatOptions[key] ? target : (deep || (deep = {})))[key] = src[key];
?? ??? ??? ?}
?? ??? ?}
?? ??? ?if (deep) {
?? ??? ??? ?jQuery.extend(true, target, deep);
?? ??? ?}
?? ?}
?? ?$.extend(jh,{
?? ??? ?nameSpace : function(fullNS) { //參數為字符串
?? ??? ??? ?// 將命名空間切成N部分, 比如Grandsoft、GEA等
?? ??? ??? ?var nsArray = fullNS.split('.');
?? ??? ??? ?var sEval = "";
?? ??? ??? ?var sNS = "";
?? ??? ??? ?for ( var i = 0; i < nsArray.length; i++) {
?? ??? ??? ??? ?if (i != 0)
?? ??? ??? ??? ??? ?sNS += ".";
?? ??? ??? ??? ?sNS += nsArray[i];
?? ??? ??? ??? ?// 依次創建構造命名空間對象（假如不存在的話）的語句
?? ??? ??? ??? ?// 比如先創建Grandsoft，然后創建Grandsoft.GEA，依次下去
?? ??? ??? ??? ?sEval += "if (typeof(" + sNS + ") == 'undefined') "
?? ??? ??? ??? ??? ??? ?+ sNS + " = new Object();";
?? ??? ??? ?}
?? ??? ??? ?if (sEval != "")
?? ??? ??? ??? ?eval(sEval);
?? ??? ?},
?? ??? ?includeJS : function(path, modules) {
?? ??? ??? ?var filename;
?? ??? ??? ?for ( var i = 0; i < modules.length; i++) {
?? ??? ??? ??? ?if (modules[i].include === true) {
?? ??? ??? ??? ??? ?filename = path + modules[i].incfile;
?? ??? ??? ??? ??? ?if (jQuery.browser.safari) {
?? ??? ??? ??? ??? ??? ?jQuery.ajax({
?? ??? ??? ??? ??? ??? ??? ?url : filename,
?? ??? ??? ??? ??? ??? ??? ?datnewClass : 'script',
?? ??? ??? ??? ??? ??? ??? ?async : false,
?? ??? ??? ??? ??? ??? ??? ?cache : true
?? ??? ??? ??? ??? ??? ?});
?? ??? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ??? ?IncludeJavaScript(filename);
?? ??? ??? ??? ??? ??? ?(function() {
?? ??? ??? ??? ??? ??? ??? ?var oHead = document
?? ??? ??? ??? ??? ??? ??? ??? ??? ?.getElementsByTagName('head')[0];
?? ??? ??? ??? ??? ??? ??? ?var oScript = document
?? ??? ??? ??? ??? ??? ??? ??? ??? ?.createElement('script');
?? ??? ??? ??? ??? ??? ??? ?oScript.type = 'text/javascript';
?? ??? ??? ??? ??? ??? ??? ?oScript.charset = 'utf-8';
?? ??? ??? ??? ??? ??? ??? ?oScript.src = filename;
?? ??? ??? ??? ??? ??? ??? ?oHead.appendChild(oScript);
?? ??? ??? ??? ??? ??? ?})(filename);
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?},
?? ??? ?Class: function() {//父類，子類，子類的原型，子類的定義數據.構造函數傳參是有順序的
?? ??? ??? ?var parent, newClass, newPrototype, classData = arguments[arguments.length-1];
?? ??? ??? ?if(!classData) {return;}
?? ??? ??? ?parent = arguments.length>1 ? arguments[0] : object; //解析基類
?? ??? ??? ?function prototype_(){};//構造臨時的函數，用于掛接原型鏈
?? ??? ??? ?prototype_.prototype = parent.prototype; //prototype切換
?? ??? ??? ?newPrototype = new prototype_(); //建立原型鏈掛接后的對象
?? ??? ??? ?for(var member in classData) //復制類定義到當前類的prototype
?? ??? ??? ??? ?if(member != "Constructor") //構造函數不用復制
?? ??? ??? ??? ??? ?newPrototype[member] = classData[member];
?? ??? ??? ?//注意火狐可以自動轉換，或者說是火狐可以遍歷toString方法進行繼承，ie這個土鱉不可以
?? ??? ??? ?//if(classData.toString != Object.prototype.toString) newPrototype.toString = classData.toString; //直接指定，而不是通過遍歷來實現
?? ??? ??? ?//if(classData.toLocaleString != Object.prototype.toLocaleString) newPrototype.toLocaleString = classData.toLocaleString;
?? ??? ??? ?//if(classData.valudeOf != Object.prototype.valudeOf) newPrototype.valudeOf = classData.valudeOf;
?? ??? ??? ?if(classData.Constructor) { //若有構造函數
?? ??? ??? ??? ?newClass = classData.Constructor; //類型即為該構造函數
?? ??? ??? ?} else {
?? ??? ??? ??? ?newClass = function() { //否則使用默認的構造函數
?? ??? ??? ??? ??? ?this.base.apply(this,arguments); //調用基類的構造函數
?? ??? ??? ??? ?};
?? ??? ??? ?}
?? ??? ??? ?newClass.prototype = newPrototype; //prototype切換
?? ??? ??? ?newClass.Base = parent; //設置類型關系，便于追溯繼承關系
?? ??? ??? ?newClass.prototype.Type = newClass;? //為本類型的 對象??? 擴展一個Type屬性
?? ??? ??? ?newClass.prototype.constructor = newClass;
?? ??? ??? ?object.prototype.base = function() { //這個函數只用來首次調用，之后的被this.base覆蓋
?? ??? ??? ??? ?var Base = this.Type.Base;
?? ??? ??? ??? ?if(!Base.Base) {
?? ??? ??? ??? ??? ?Base.apply(this, arguments);
?? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ?this.base = makeBase(Base);
?? ??? ??? ??? ??? ?Base.apply(this, arguments);
?? ??? ??? ??? ??? ?delete this.base; //delete this.base(); 這是語法錯誤
?? ??? ??? ??? ?}
?? ??? ??? ?};
?? ??? ??? ?return newClass;
?? ??? ??? ?function object() {
?? ??? ??? ??? ?object.prototype.isA = function(newClass) {
?? ??? ??? ??? ??? ?var self = this.Type;
?? ??? ??? ??? ??? ?while(self) {
?? ??? ??? ??? ??? ??? ?if(self == newClass) return true;
?? ??? ??? ??? ??? ??? ?self = self.Base;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?return false;
?? ??? ??? ??? ?};
?? ??? ??? ?}
?? ??? ??? ?function makeBase(Type) {
?? ??? ??? ??? ?var Base = Type.Base;
?? ??? ??? ??? ?if(!Base.Base) return Base;
?? ??? ??? ??? ?return function() {
?? ??? ??? ??? ??? ?this.base = makeBase(Base);
?? ??? ??? ??? ??? ?Base.apply(this, arguments);
?? ??? ??? ??? ?};
?? ??? ??? ?}
?? ??? ?},
?? ??? ?extend: function() {//此方法不支持深度克隆，只支持普通對象或函數的克隆，是引用的轉換，而不是內存數據的復制
?? ??? ??? ?var target = arguments[0], overrideAttr=false, i=1, length=arguments.length,
?? ??? ??? ?copy, options, name;
?? ??? ??? ?if ( typeof target === "boolean" ) { //判斷如果第一個參數是boolean類型，則進行同名覆蓋
?? ??? ??? ??? ?overrideAttr = target;
?? ??? ??? ??? ?target = arguments[1] || {};
?? ??? ??? ??? ?i = 2;
?? ??? ??? ?}
?? ??? ??? ?//這里沒有判斷target的類型，所以傳值時一定要注意要傳對象或函數，否則會出錯
?? ??? ??? ?if(length==i) {
?? ??? ??? ??? ?alert("error，參數格式(target,option)，(true,target,option)");
?? ??? ??? ??? ?return;
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?for(; i<length; i++) {
?? ??? ??? ??? ?options = arguments[i];
?? ??? ??? ??? ?if(overrideAttr) {
?? ??? ??? ??? ??? ?for(name in options) {
?? ??? ??? ??? ??? ??? ?copy = options[name];
?? ??? ??? ??? ??? ??? ?if(copy !== undefined) {
?? ??? ??? ??? ??? ??? ??? ?target[name] = copy;
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ?for(name in options) {
?? ??? ??? ??? ??? ??? ?if(target[name] !== undefined) {
?? ??? ??? ??? ??? ??? ??? ?alert("存在同名屬性，請您修改屬性名，或設置true進行同名覆蓋");
?? ??? ??? ??? ??? ??? ??? ?continue;
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ?copy = options[name];
?? ??? ??? ??? ??? ??? ?if(copy !== undefined) {
?? ??? ??? ??? ??? ??? ??? ?target[name] = copy;
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ??? ?return target;
?? ??? ?}
?? ??? ?
?? ?});
?? ?

?? ?jh.nameSpace("jh.gui");
?? ?jh.nameSpace("jh.gui.layout");

?? ?
?? ?jh.extend(jh.gui, {
?? ??? ?screen: {
?? ??? ??? ?width: window.screen.width,
?? ??? ??? ?height: window.screen.height,
?? ??? ??? ?WP: window.screen.width/1360,
?? ??? ??? ?HP:window.screen.height/768
?? ??? ?},
?? ??? ?ctCounter:0,
?? ??? ?defaultContainerConfig: {
?? ??? ??? ?xtype: "Panel",
?? ??? ??? ?size: {width:800, height:400},
?? ??? ??? ?layout: "Vertical",
?? ??? ??? ?position: {left:0, top:0, position:"absolute"}, //定位方式應該可以指定，absolute，relative，static
?? ??? ??? ?style: {"background-color":"#D2E0F2"},
?? ??? ??? ?options:{},
?? ??? ??? ?items: []
?? ??? ?}
?? ?});
?? ?/**
?? ? * 基類布局管理器
?? ? * */
?? ?jh.extend(jh.gui.layout, {
?? ??? ?Layout: jh.Class({ //布局只用來進行容器的參數的設置，并不進行渲染，渲染是交給容器自己進行的
?? ??? ??? ?Constructor: function(config) {
?? ??? ??? ?},
?? ??? ??? ?doLayout: function(config, parent, position) {
?? ??? ??? ??? ?var i,items = config.items, ct; //配置里的item并不具有render方法，只有item建立后
?? ??? ??? ??? ?for(i=0; i<items.length; i++) {
?? ??? ??? ??? ??? ?ct = new items[i].xtype(items[i]);
?? ??? ??? ??? ??? ?ct.render(parent, position);
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?})
?? ?});
?? ?/**
?? ? * 絕對布局管理器
?? ? * */
?? ?jh.extend(jh.gui.layout, {
?? ??? ?Absolute: jh.Class({
?? ??? ??? ?Constructor: function(config) {
?? ??? ??? ?}
?? ??? ?})
?? ?});

?? ?/**
?? ? * 簡單布局管理器
?? ? * */
?? ?jh.extend(jh.gui.layout, {
?? ??? ?Simple: jh.Class({
?? ??? ??? ?Constructor: function(config) {
?? ??? ??? ?}
?? ??? ?})
?? ?});
?? ?
?? ?/**
?? ? * 卡片布局管理器
?? ? * */
?? ?jh.extend(jh.gui.layout, {
?? ??? ?Card: jh.Class({
?? ??? ??? ?Constructor: function(config) {
?? ??? ??? ?}
?? ??? ?})
?? ?});
?? ?
?? ?/**
?? ? * 水平布局管理器
?? ? * 配置格式：
?? ? * ?? ??? ?defaultContainerConfig: {
?? ??? ??? ?id: null,
?? ??? ??? ?xtype: "Panel",
?? ??? ??? ?size: {width:800},
?? ??? ??? ?layout: "Vertical",
?? ??? ??? ?style: {"background-color":"#361"},
?? ??? ??? ?items: []}
?? ? * */
?? ?jh.extend(jh.gui.layout, {
?? ??? ?Horizontal: jh.Class({
?? ??? ??? ?Constructor: function(config) {
?? ??? ??? ?},
?? ??? ??? ?/**
?? ??? ??? ? * config:父類容器的配置
?? ??? ??? ? * parent：生成好的父類容器
?? ??? ??? ? * */
?? ??? ??? ?beginLayout: function(config, parent) {
?? ??? ??? ??? ?var i,items = config.items, length = items.length, //配置里的item并不具有render方法，只有數據容器建立后
?? ??? ??? ??? ?ct, xtypeStr,
?? ??? ??? ??? ?currentHeight = config.size.height, //當前的高度，是其父數據容器的高度
?? ??? ??? ??? ?currentLeft = 0, //記錄水平布局存放子容器的左坐標
?? ??? ??? ??? ?currentTop = 0;; //記錄水平布局存放子容器的上坐標
?? ??? ??? ??? ?/**
?? ??? ??? ??? ? * 布局傳入的是父容器的所有配置，操作的是子容器的數據配置
?? ??? ??? ??? ? * 布局任務：
?? ??? ??? ??? ? *
?? ??? ??? ??? ? * id檢查：如果沒有定義id，則自動生成id，每個id的生成都是唯一的，采取計數遞增的方式，這只有在單線程有效
?? ??? ??? ??? ? *
?? ??? ??? ??? ? * 布局類型檢查：
?? ??? ??? ??? ? *??? 子容器類型檢查：子容器的類型開始會從Container繼承，經過布局校驗后，如果沒有定義自己的布局，則會從父容器繼承，因為根上的容器一定有一個布局，
?? ??? ??? ??? ? *??? 所有所有的子容器都一定有自己的布局，或者是布局樹上的布局
?? ??? ??? ??? ? *?? ?
?? ??? ??? ??? ? * 數據容器類型的檢查：如果沒有定義，那么從Container繼承，為Panel，我們不應該驗證才父容器繼承，但可以在父容器的options中定義子容器的類型
?? ??? ??? ??? ? *
?? ??? ??? ??? ? * 大小，位置，樣式都要檢查
?? ??? ??? ??? ? * */

?? ??? ??? ??? ?//一定要先建立數據容器再進行渲染數據計算，因為數據容器建立時會做數據容器數據的初始化，同時也要做原始數據的像素校驗
?? ??? ??? ??? ?for(i=0; i<length; i++) {
?? ??? ??? ??? ??? ?//某些配置要先進行驗證，否則就會被默認的設置覆蓋
?? ??? ??? ??? ??? ?if(items[i].layout === undefined) {
?? ??? ??? ??? ??? ??? ?//注意設置的布局一定要與圖形容器形成映射，否則就沒有什么意義，所以在向父圖形容器添加子容器的時候一定要檢查父圖形容器的數據容器的布局
?? ??? ??? ??? ??? ??? ?items[i].layout = config.layout; //如果布局沒有定義則默認從父類的繼承
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?if(items[i].id === undefined) {
?? ??? ??? ??? ??? ??? ?items[i].id = "jh-panel-"+jh.gui.ctCounter++;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?if(items[i].xtype === undefined) { //默認為Panel
?? ??? ??? ??? ??? ??? ?xtypeStr = "new jh.gui.Panel" + "(items[i])";
?? ??? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ??? ?xtypeStr = "new jh.gui." + items[i].xtype + "(items[i])";?? ?
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?ct = eval(xtypeStr);

?? ??? ??? ??? ??? ?//ct.config.size.width = items[i].size.width; //一定要注意引用值的改變
?? ??? ??? ??? ??? ?ct.config.size.height = currentHeight;
?? ??? ??? ??? ??? ?ct.config.position.left = currentLeft;
?? ??? ??? ??? ??? ?ct.config.position.top = currentTop;
?? ??? ??? ??? ??? ?ct.render(parent);
?? ??? ??? ??? ??? ?currentLeft += ct.config.size.width;
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?})
?? ?});
?? ?
?? ?/**
?? ? * 垂直布局管理器
?? ? * 配置格式：
?? ? * ?? ??? ?defaultContainerConfig: {
?? ??? ??? ?id: null,
?? ??? ??? ?xtype: "Panel",
?? ??? ??? ?size: {height:800},
?? ??? ??? ?layout: "Vertical",
?? ??? ??? ?style: {"background-color":"#361"},
?? ??? ??? ?items: []}
?? ? * */
?? ?jh.extend(jh.gui.layout, {
?? ??? ?Vertical: jh.Class({
?? ??? ??? ?Constructor: function(config) {
?? ??? ??? ?},
?? ??? ??? ?beginLayout: function(config, parent) {
?? ??? ??? ??? ?var i,items = config.items, length = items.length, //配置里的item并不具有render方法，只有數據容器建立后
?? ??? ??? ??? ?ct, xtypeStr,
?? ??? ??? ??? ?currentWidth = config.size.width, //當前的高度，是其父數據容器的高度
?? ??? ??? ??? ?currentLeft = 0, //記錄水平布局存放子容器的左坐標
?? ??? ??? ??? ?currentTop = 0;; //記錄水平布局存放子容器的上坐標

?? ??? ??? ??? ?//一定要先建立數據容器再進行渲染數據計算，因為數據容器建立時會做數據容器數據的初始化，同時也要做原始數據的像素校驗
?? ??? ??? ??? ?for(i=0; i<length; i++) {
?? ??? ??? ??? ??? ?//某些配置要先進行驗證，否則就會被默認的設置覆蓋
?? ??? ??? ??? ??? ?if(items[i].layout === undefined) {
?? ??? ??? ??? ??? ??? ?//注意設置的布局一定要與圖形容器形成映射，否則就沒有什么意義，所以在向父圖形容器添加子容器的時候一定要檢查父圖形容器的數據容器的布局
?? ??? ??? ??? ??? ??? ?items[i].layout = config.layout; //如果布局沒有定義則默認從父類的繼承
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?if(items[i].id === undefined) {
?? ??? ??? ??? ??? ??? ?items[i].id = "jh-panel-"+jh.gui.ctCounter++;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?if(items[i].xtype === undefined) { //默認為Panel
?? ??? ??? ??? ??? ??? ?xtypeStr = "new jh.gui.Panel" + "(items[i])";
?? ??? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ??? ?xtypeStr = "new jh.gui." + items[i].xtype + "(items[i])";?? ?
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?ct = eval(xtypeStr);

?? ??? ??? ??? ??? ?ct.config.size.width = currentWidth;
?? ??? ??? ??? ??? ?ct.config.position.left = currentLeft;
?? ??? ??? ??? ??? ?ct.config.position.top = currentTop;
?? ??? ??? ??? ??? ?ct.render(parent);
?? ??? ??? ??? ??? ?currentTop += ct.config.size.height;
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?})
?? ?});
?? ?
?? ?/**
?? ? * 百分比布局管理器
?? ? * */
?? ?
?? ?jh.extend(jh.gui.layout, {
?? ??? ?Auto: jh.Class({
?? ??? ??? ?Constructor: function(config) {
?? ??? ??? ?}
?? ??? ?})
?? ?});
?? ?
?? ?/**
?? ? * Border布局管理器
?? ? * 配置格式：
?? ? * ?? ??? ?defaultContainerConfig: {
?? ??? ??? ?id: null,
?? ??? ??? ?xtype: "Panel",
?? ??? ??? ?size: {height:800},
?? ??? ??? ?layout: "Vertical",
?? ??? ??? ?style: {"background-color":"#361"},
?? ??? ??? ?options:{region:"center"},
?? ??? ??? ?items: []}
?? ? * */
?? ?jh.extend(jh.gui.layout, {
?? ??? ?Border: jh.Class({
?? ??? ??? ?Constructor: function(config) {
?? ??? ??? ?},
?? ??? ??? ?beginLayout: function(config, parent) {
?? ??? ??? ??? ?var i,items = config.items, length = items.length, //配置里的item并不具有render方法，只有數據容器建立后
?? ??? ??? ??? ?ct, xtypeStr,
?? ??? ??? ??? ?//current開頭的都是父容器的配置參數
?? ??? ??? ??? ?currentWidth = config.size.width,
?? ??? ??? ??? ?currentHeight = config.size.height, //當前的高度，是其父數據容器的高度

?? ??? ??? ??? ?north, south, west, east, center,
?? ??? ??? ??? ?north_height=0, south_height=0, west_width=0, east_width=0, center_height=0, center_width=0;
?? ??? ??? ??? ?
?? ??? ??? ??? ?for(i=0; i<length; i++) { //進行橫向遍歷，掃描出布局中東南西北中的子容器
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?switch(items[i].options.region) {
?? ??? ??? ??? ??? ??? ?case "north": north = items[i]; break;
?? ??? ??? ??? ??? ??? ?case "south": south = items[i]; break;
?? ??? ??? ??? ??? ??? ?case "west": west = items[i]; break;
?? ??? ??? ??? ??? ??? ?case "east": east = items[i]; break;
?? ??? ??? ??? ??? ??? ?case "center": center = items[i]; break;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ??? ??? ?//要對東南西北中進行判斷，這是為了按順序進行布局，方便布局的計算
?? ??? ??? ??? ?if(north !== undefined) {
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?if(north.layout === undefined) {
?? ??? ??? ??? ??? ??? ?//注意設置的布局一定要與圖形容器形成映射，否則就沒有什么意義，所以在向父圖形容器添加子容器的時候一定要檢查父圖形容器的數據容器的布局
?? ??? ??? ??? ??? ??? ?north.layout = config.layout; //如果布局沒有定義則默認從父類的繼承
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?if(north.id === undefined) {
?? ??? ??? ??? ??? ??? ?north.id = "jh-panel-"+jh.gui.ctCounter++;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?if(north.xtype === undefined) { //默認為Panel
?? ??? ??? ??? ??? ??? ?xtypeStr = "new jh.gui.Panel" + "(north)";
?? ??? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ??? ?xtypeStr = "new jh.gui." + north.xtype + "(north)";?? ?
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?ct = eval(xtypeStr);
?? ??? ??? ??? ??? ?ct.config.size.width = currentWidth;
?? ??? ??? ??? ??? ?ct.config.position.left = 0;
?? ??? ??? ??? ??? ?ct.config.position.top = 0;
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?ct.render(parent);
?? ??? ??? ??? ??? ?north_height = ct.config.size.height;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?if(south !== undefined) {
?? ??? ??? ??? ??? ?if(south.layout === undefined) {
?? ??? ??? ??? ??? ??? ?//注意設置的布局一定要與圖形容器形成映射，否則就沒有什么意義，所以在向父圖形容器添加子容器的時候一定要檢查父圖形容器的數據容器的布局
?? ??? ??? ??? ??? ??? ?south.layout = config.layout; //如果布局沒有定義則默認從父類的繼承
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?if(south.id === undefined) {
?? ??? ??? ??? ??? ??? ?south.id = "jh-panel-"+jh.gui.ctCounter++;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?if(south.xtype === undefined) { //默認為Panel
?? ??? ??? ??? ??? ??? ?xtypeStr = "new jh.gui.Panel" + "(south)";?? ?
?? ??? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ??? ?xtypeStr = "new jh.gui." + south.xtype + "(south)";?? ?
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?ct = eval(xtypeStr);
?? ??? ??? ??? ??? ?ct.config.size.width = currentWidth;
?? ??? ??? ??? ??? ?ct.config.position.left = 0;
?? ??? ??? ??? ??? ?ct.config.position.top = currentHeight - ct.config.size.height;
?? ??? ??? ??? ??? ?ct.render(parent);
?? ??? ??? ??? ??? ?south_height = ct.config.size.height;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?center_height = currentHeight - north_height - south_height;
?? ??? ??? ??? ?if(west !== undefined) {
?? ??? ??? ??? ??? ?if(west.layout === undefined) {
?? ??? ??? ??? ??? ??? ?//注意設置的布局一定要與圖形容器形成映射，否則就沒有什么意義，所以在向父圖形容器添加子容器的時候一定要檢查父圖形容器的數據容器的布局
?? ??? ??? ??? ??? ??? ?west.layout = config.layout; //如果布局沒有定義則默認從父類的繼承
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?if(west.id === undefined) {
?? ??? ??? ??? ??? ??? ?west.id = "jh-panel-"+jh.gui.ctCounter++;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?if(west.xtype === undefined) { //默認為Panel
?? ??? ??? ??? ??? ??? ?xtypeStr = "new jh.gui.Panel" + "(west)";
?? ??? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ??? ?xtypeStr = "new jh.gui." + west.xtype + "(west)";?? ?
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?ct = eval(xtypeStr);
?? ??? ??? ??? ??? ?ct.config.size.height = center_height;
?? ??? ??? ??? ??? ?ct.config.position.left = 0;
?? ??? ??? ??? ??? ?ct.config.position.top = north_height;
?? ??? ??? ??? ??? ?ct.render(parent);
?? ??? ??? ??? ??? ?west_width = ct.config.size.width;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?if(east !== undefined) {
?? ??? ??? ??? ??? ?if(east.layout === undefined) {
?? ??? ??? ??? ??? ??? ?//注意設置的布局一定要與圖形容器形成映射，否則就沒有什么意義，所以在向父圖形容器添加子容器的時候一定要檢查父圖形容器的數據容器的布局
?? ??? ??? ??? ??? ??? ?east.layout = config.layout; //如果布局沒有定義則默認從父類的繼承
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?if(east.id === undefined) {
?? ??? ??? ??? ??? ??? ?east.id = "jh-panel-"+jh.gui.ctCounter++;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?if(east.xtype === undefined) { //默認為Panel
?? ??? ??? ??? ??? ??? ?xtypeStr = "new jh.gui.Panel" + "(east)";
?? ??? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ??? ?xtypeStr = "new jh.gui." + west.xtype + "(east)";?? ?
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?ct = eval(xtypeStr);
?? ??? ??? ??? ??? ?ct.config.size.height = center_height;
?? ??? ??? ??? ??? ?ct.config.position.left = currentWidth - ct.config.size.width;
?? ??? ??? ??? ??? ?ct.config.position.top = north_height;
?? ??? ??? ??? ??? ?ct.render(parent);
?? ??? ??? ??? ??? ?east_width = ct.config.size.width;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?center_width = currentWidth - west_width - east_width;
?? ??? ??? ??? ?if(center !== undefined) {
?? ??? ??? ??? ??? ?if(center.layout === undefined) {
?? ??? ??? ??? ??? ??? ?//注意設置的布局一定要與圖形容器形成映射，否則就沒有什么意義，所以在向父圖形容器添加子容器的時候一定要檢查父圖形容器的數據容器的布局
?? ??? ??? ??? ??? ??? ?center.layout = config.layout; //如果布局沒有定義則默認從父類的繼承
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?if(center.id === undefined) {
?? ??? ??? ??? ??? ??? ?center.id = "jh-panel-"+jh.gui.ctCounter++;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?if(center.xtype === undefined) { //默認為Panel
?? ??? ??? ??? ??? ??? ?xtypeStr = "new jh.gui.Panel" + "(center)";
?? ??? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ??? ?xtypeStr = "new jh.gui." + center.xtype + "(center)";?? ?
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?center.size = {};
?? ??? ??? ??? ??? ?ct = eval(xtypeStr);
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?ct.config.size.width = center_width;
?? ??? ??? ??? ??? ?ct.config.size.height = center_height;
?? ??? ??? ??? ??? ?ct.config.position.left = west_width;
?? ??? ??? ??? ??? ?ct.config.position.top = north_height;
?? ??? ??? ??? ??? ?ct.render(parent);
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ??? ?//容器生成后就具有了配置里面的所有屬性，并且形成樹狀結構，但是沒有布局屬性和偏移等特殊的屬性，所以我們要為其添加特殊的屬性
?? ??? ??? ?validate: function(node) {? //計算是傳入當前容器的配置，進行計算其所有子容器的布局配置
?? ??? ??? ??? ?var
?? ??? ??? ??? ??? ?config = node.data("config"),
?? ??? ??? ??? ??? ?items = config.items, //子容器個數
?? ??? ??? ??? ??? ?northConfig, southConfig, westConfig, eastConfig, centerConfig,
?? ??? ??? ??? ??? ?north_height=0, south_height=0,
?? ??? ??? ??? ??? ?west_width=0, east_width=0,
?? ??? ??? ??? ??? ?center_height=0, center_width=0;
?? ??? ??? ??? ?for(var i=0; i<items.length; i++) { //進行橫向遍歷，掃描出布局中東西南北中的子容器
?? ??? ??? ??? ??? ?switch(items[i].options.region) {
?? ??? ??? ??? ??? ??? ?case "north": northConfig = items[i]; break;
?? ??? ??? ??? ??? ??? ?case "south": southConfig = items[i]; break;
?? ??? ??? ??? ??? ??? ?case "west": westConfig = items[i]; break;
?? ??? ??? ??? ??? ??? ?case "east": eastConfig = items[i]; break;
?? ??? ??? ??? ??? ??? ?case "center": centerConfig = items[i]; break;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ??? ??? ?//要對東南西北中進行判斷，這是為了按順序進行布局，方便布局的計算
?? ??? ??? ??? ?if(northConfig !== undefined) {
?? ??? ??? ??? ??? ?northConfig.size.width = config.size.width;
?? ??? ??? ??? ??? ?northConfig.position.left = 0;
?? ??? ??? ??? ??? ?northConfig.position.top = 0;
?? ??? ??? ??? ??? ?north_height = northConfig.size.height;
?? ??? ??? ??? ??? ?this.reRender(node);
?? ??? ??? ??? ?}
?? ??? ??? ??? ?if(southConfig !== undefined) {
?? ??? ??? ??? ??? ?southConfig.size.width = currentWidth;
?? ??? ??? ??? ??? ?southConfig.position.left = 0;
?? ??? ??? ??? ??? ?southConfig.position.top = currentHeight - southConfig.size.height;
?? ??? ??? ??? ??? ?south_height = southConfig.size.height;
?? ??? ??? ??? ??? ?this.reRender(node);
?? ??? ??? ??? ?}
?? ??? ??? ??? ?center_height = config.size.width - north_height - south_height;
?? ??? ??? ??? ?if(westConfig !== undefined) {
?? ??? ??? ??? ??? ?westConfig.size.height = center_height;
?? ??? ??? ??? ??? ?westConfig.position.left = 0;
?? ??? ??? ??? ??? ?westConfig.position.top = north_height;
?? ??? ??? ??? ??? ?west_width = westConfig.size.width;
?? ??? ??? ??? ??? ?this.reRender(node);
?? ??? ??? ??? ?}
?? ??? ??? ??? ?if(eastConfig !== undefined) {
?? ??? ??? ??? ??? ?eastConfig.size.height = center_height;
?? ??? ??? ??? ??? ?eastConfig.position.left = config.size.width - eastConfig.size.width;
?? ??? ??? ??? ??? ?eastConfig.position.top = north_height;
?? ??? ??? ??? ??? ?east_width = eastConfig.size.width;
?? ??? ??? ??? ??? ?this.reRender(node);
?? ??? ??? ??? ?}
?? ??? ??? ??? ?center_width = config.size.width - west_width - east_width;
?? ??? ??? ??? ?if(centerConfig !== undefined) {
?? ??? ??? ??? ??? ?centerConfig.size.width = center_width;
?? ??? ??? ??? ??? ?centerConfig.size.height = center_height;
?? ??? ??? ??? ??? ?centerConfig.position.left = west_width;
?? ??? ??? ??? ??? ?centerConfig.position.top = north_height;
?? ??? ??? ??? ??? ?this.reRender(node);
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?})
?? ?});
?? ?/**
?? ? * 表單布局管理器
?? ? * 配置格式：
?? ? * ?? ??? ?defaultContainerConfig: {
?? ??? ??? ?id: null,
?? ??? ??? ?//表單校驗回調函數，表單提交函數，在表單生成時候就綁定好了，省去了之后的查詢
?? ??? ??? ?xtype: "Panel",
?? ??? ??? ?layout: "Form",//監聽函數：ajax異步加載數據，校驗-會替代默認的校驗函數，不同的鼠標事件觸發的函數
?? ??? ??? ?style: {"background-color":"#361"},
?? ??? ??? ?options:{},
?? ??? ??? ?items: [{
?? ??? ??? ??? ?label:"",
?? ??? ??? ??? ?size:{width:80}
?? ??? ??? ?},{
?? ??? ??? ??? ?type:"textfield | date | number | select | search | email",
?? ??? ??? ??? ?readOnly:false,
?? ??? ??? ??? ?disabled:false
?? ??? ??? ?}]}
?? ? * */
?? ?jh.extend(jh.gui.layout, {
?? ??? ?Form: jh.Class({
?? ??? ??? ?Constructor: function(config) {
?? ??? ??? ?},
?? ??? ??? ?beginLayout: function(config, parent) {
?? ??? ??? ??? ?//這樣的操作會打斷數據校驗鏈，因為新建的Panel不能有items，否則造成渲染器的誤判
?? ??? ??? ??? ?//布局管理要建立起集合數據結構，和一些必須的數據信息，但她不復制之后的容器大小的收縮校驗，要重新寫另外的校驗器，
?? ??? ??? ??? ?//只掃描大小和位置重新進行大小和位置布局，根據布局中的收縮信息決定哪一部分是要收縮的，要保證相對的偏移和大小不變
?? ??? ??? ??? ?//校驗器校驗的是布局的大小，校驗的是組件的相對位置不變，原則上應該由布局管理器進行管理，收縮的時候一定有變化的部分，關鍵就是要確定變化的部分
?? ??? ??? ??? ?//收縮處理要巧用top，bottom，left，right屬性，這是保證中間收縮的重要特性，這也是Border布局的精華所在，所以盡量要采用Border布局
?? ??? ??? ??? ?//加入完全坐標定位，那么怎樣控制布局
?? ??? ??? ??? ?
?? ??? ??? ?var
?? ??? ??? ??? ?label = config.items[0], //表單布局里的數據項必須按照這個布局進行配置，并且必須配置，否則出錯
?? ??? ??? ??? ?input = config.items[1],
?? ??? ??? ??? ?ct, xtypeStr,
?? ??? ??? ??? ?currentWidth = config.size.width,
?? ??? ??? ??? ?currentHeight = config.size.height; //當前的高度，是其父數據容器的高度

?? ??? ??? ??? ?if(label.id === undefined) {
?? ??? ??? ??? ??? ?label.id = "jh-label-"+jh.gui.ctCounter++;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?if(input.id === undefined) {
?? ??? ??? ??? ??? ?input.id = "jh-input-"+jh.gui.ctCounter++;
?? ??? ??? ??? ?}

?? ??? ??? ??? ?//打破數據鏈，因為這里不是系統解析的，而是手動建立的。一定要注意之后功能擴展，數據鏈的作用。
?? ??? ??? ??? ?label = new jh.gui.Label(label);
?? ??? ??? ??? ?
?? ??? ??? ??? ?label.config.size.height = currentHeight;
?? ??? ??? ??? ?label.config.position.left = 0;
?? ??? ??? ??? ?label.config.position.top = 0;
?? ??? ??? ??? ?label.render(parent);
?? ??? ??? ??? ?
?? ??? ??? ??? ?input = new jh.gui.Input(input);
?? ??? ??? ??? ?input.config.size.height = currentHeight-1;
?? ??? ??? ??? ?input.config.size.width = currentWidth - label.config.size.width;
?? ??? ??? ??? ?input.config.position.left = label.config.size.width;
?? ??? ??? ??? ?input.config.position.top = 0;
?? ??? ??? ??? ?input.render(parent);
?? ??? ??? ?}
?? ??? ?})
?? ?});
?? ?/**
?? ? * 塊布局不可以單獨存在，需要嵌套在其他的布局中，塊布局只允許有一個元素Panel，并且不用指定其大小
?? ? * 塊布局管理器
?? ? * ?? ??? ?defaultContainerConfig: {
?? ??? ??? ?id: null,
?? ??? ??? ?//表單校驗回調函數，表單提交函數，在表單生成時候就綁定好了，省去了之后的查詢
?? ??? ??? ?xtype: "Panel",
?? ??? ??? ?layout: "Block",//監聽函數：ajax異步加載數據，校驗-會替代默認的校驗函數，不同的鼠標事件觸發的函數
?? ??? ??? ?style: {"background-color":"#361"},
?? ??? ??? ?options:{t:2, l:3, b:2, r:3},
?? ??? ??? ?items: [{
?? ??? ??? ??? ?xtype:"Label",
?? ??? ??? ??? ?label:"",
?? ??? ??? ??? ?width:80
?? ??? ??? ?}]}
?? ? * */
?? ?jh.extend(jh.gui.layout, {
?? ??? ?Block: jh.Class({
?? ??? ??? ?Constructor: function(config) {
?? ??? ??? ?},
?? ??? ??? ?beginLayout: function(config, parent) {
?? ??? ??? ??? ?var block = config.items[0], //配置里的item并不具有render方法，只有數據容器建立后
?? ??? ??? ??? ?ct, xtypeStr,
?? ??? ??? ??? ?currentHeight = config.size.height,
?? ??? ??? ??? ?currentWidth = config.size.width, //當前的高度，是其父數據容器的高度
?? ??? ??? ??? ?margin = 0, padding = 0, border = 0, //margin,padding從來都不用
?? ??? ??? ??? ?t_offset = 0, b_offset = 0, l_offset = 0, r_offset = 0,
?? ??? ??? ??? ?bt = 0, bb = 0, bl = 0, br = 0, bFlag = false, border_w=0,border_w=0;
?? ??? ??? ??? ?//一定要先建立數據容器再進行渲染數據計算，因為數據容器建立時會做數據容器數據的初始化，同時也要做原始數據的像素校驗

?? ??? ??? ??? ?//某些配置要先進行驗證，否則就會被默認的設置覆蓋
?? ??? ??? ??? ?if(block.layout === undefined) {
?? ??? ??? ??? ??? ?//注意設置的布局一定要與圖形容器形成映射，否則就沒有什么意義，所以在向父圖形容器添加子容器的時候一定要檢查父圖形容器的數據容器的布局
?? ??? ??? ??? ??? ?block.layout = config.layout; //如果布局沒有定義則默認從父類的繼承
?? ??? ??? ??? ?}
?? ??? ??? ??? ?if(block.id === undefined) {
?? ??? ??? ??? ??? ?block.id = "jh-panel-"+jh.gui.ctCounter++;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?if(block.xtype === undefined) { //默認為Panel
?? ??? ??? ??? ??? ?xtypeStr = "new jh.gui.Panel" + "(block)";
?? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ?xtypeStr = "new jh.gui." + block.xtype + "(block)";?? ?
?? ??? ??? ??? ?}
?? ??? ??? ??? ?ct = eval(xtypeStr);
?? ??? ??? ??? ?
?? ??? ??? ??? ?if(ct.config.options.t !== undefined) t_offset = Math.round(ct.config.options.t*(jh.gui.screen.HP));
?? ??? ??? ??? ?if(ct.config.options.b !== undefined) b_offset = Math.round(ct.config.options.b*(jh.gui.screen.HP));
?? ??? ??? ??? ?if(ct.config.options.l !== undefined) l_offset = Math.round(ct.config.options.l*(jh.gui.screen.WP));
?? ??? ??? ??? ?if(ct.config.options.r !== undefined) r_offset = Math.round(ct.config.options.r*(jh.gui.screen.WP));
?? ??? ?
?? ??? ??? ??? ?if(ct.config.size["border-top"] !== undefined) {
?? ??? ??? ??? ??? ?bt = parseInt(ct.config.size["border-top"].split(" ")[0]);
?? ??? ??? ??? ??? ?bFlag = true;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?if(ct.config.size["border-bottom"] !== undefined) {
?? ??? ??? ??? ??? ?bb = parseInt(ct.config.size["border-bottom"].split(" ")[0]);
?? ??? ??? ??? ??? ?bFlag = true;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?if(ct.config.size["border-left"] !== undefined) {
?? ??? ??? ??? ??? ?bl = parseInt(ct.config.size["border-left"].split(" ")[0]);
?? ??? ??? ??? ??? ?bFlag = true;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?if(ct.config.size["border-right"] !== undefined) {
?? ??? ??? ??? ??? ?br = parseInt(ct.config.size["border-right"].split(" ")[0]);
?? ??? ??? ??? ??? ?bFlag = true;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?//現在只做了border和margin處理，沒有做padding處理
?? ??? ??? ??? ?//不能用margin作配置參數
?? ??? ??? ??? ?if(block.size.border !== undefined) {
?? ??? ??? ??? ??? ?border = parseInt(ct.config.size.border.split(" ")[0]);
?? ??? ??? ??? ?}

?? ??? ??? ??? ?if(bFlag === false ) {
?? ??? ??? ??? ??? ?border_w = border*2;
?? ??? ??? ??? ??? ?border_h = border*2;
?? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ?border_w = bl + br;
?? ??? ??? ??? ??? ?border_h = bt + bb;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?
?? ??? ??? ??? ?ct.config.size.width = currentWidth - l_offset - r_offset - border_w; //這里沒有做2像素的收縮處理，不過沒關系，border在水平和垂直方向都計算進來了
?? ??? ??? ??? ?ct.config.size.height = currentHeight - t_offset - b_offset - border_h;
?? ??? ??? ??? ?ct.config.position.left = l_offset;
?? ??? ??? ??? ?ct.config.position.top = t_offset;
?? ??? ??? ??? ?ct.render(parent);
?? ??? ??? ?}
?? ??? ?})
?? ?});
?? ?
?? ?jh.extend(jh.gui.layout.Layout, {
?? ??? ?Simple: new jh.gui.layout.Simple(),
?? ??? ?Horizontal: new jh.gui.layout.Horizontal(),
?? ??? ?Vertical: new jh.gui.layout.Vertical(),
?? ??? ?Border: new jh.gui.layout.Border(),
?? ??? ?Block: new jh.gui.layout.Block(),
?? ??? ?Auto: new jh.gui.layout.Auto(),
?? ??? ?Form: new jh.gui.layout.Form(),
?? ??? ?Card: new jh.gui.layout.Card(),
?? ??? ?Absolute: new jh.gui.layout.Absolute()
?? ?});

?? ?/**
?? ? * Container所有數據容器的基類
?? ? * */
?? ?jh.extend(jh.gui, { //所有圖形容器的建立都要經過這里，所以可以在這里查看所有容器生成過程
?? ??? ?Container: jh.Class({
?? ??? ??? ?Constructor: function(config) {
?? ??? ??? ??? ?//這里還要判斷options.shrink選項
?? ??? ??? ??? ?if(config === undefined) {
?? ??? ??? ??? ??? ?this.config = $.extend(true, {}, this.defaultContainerConfig);
?? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ?if(config.items===undefined || config.items==="" || config.items===null || config.items.length===0) {
?? ??? ??? ??? ??? ??? ?var items = config.items;
?? ??? ??? ??? ??? ??? ?delete config.itmes; //防止子類進行克隆
?? ??? ??? ??? ??? ??? ?this.config = $.extend(true, {}, this.defaultContainerConfig, config);
?? ??? ??? ??? ??? ??? ?this.config.items = items;
?? ??? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ??? ?this.config = $.extend(true, {}, this.defaultContainerConfig, config);
?? ??? ??? ??? ??? ?}?? ??? ??? ?
?? ??? ??? ??? ?}
?? ??? ??? ??? ?if(this.config.options.shrink !== false) {
?? ??? ??? ??? ??? ?this.config.size.width = Math.round(this.config.size.width * jh.gui.screen.WP);
?? ??? ??? ??? ??? ?this.config.size.height = Math.round(this.config.size.height * jh.gui.screen.HP);
?? ??? ??? ??? ?}
/*?? ??? ??? ??? ?if(this.config.options.shrink !== false) {
?? ??? ??? ??? ??? ?this.config.size.width = config.size.width * jh.gui.screen.WP;
?? ??? ??? ??? ??? ?this.config.size.height = config.size.height * jh.gui.screen.HP;
?? ??? ??? ??? ?}*/
?? ??? ??? ?},
?? ??? ??? ?validate: function() {
?? ??? ??? ?},
?? ??? ??? ?defaultContainerConfig: jh.gui.defaultContainerConfig,
?? ??? ??? ?Render: {
?? ??? ??? ??? ?styleParser: function(config, container) {
?? ??? ??? ??? ??? ?container.css(config);
?? ??? ??? ??? ?},
?? ??? ??? ??? ?sizeParser: function(config, container) {
?? ??? ??? ??? ??? ?container.css(config);
?? ??? ??? ??? ?},
?? ??? ??? ??? ?positionParser: function(config, container) {
?? ??? ??? ??? ??? ?container.css(config);
?? ??? ??? ??? ?},
?? ??? ??? ??? ?borderParser: function(config, container) {
?? ??? ??? ??? ??? ?container.css(config);
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?})
?? ?});
?? ?
/*?? ?
?? ?jh.extend(jh.gui.Container, {
?? ??? ?Render: {
?? ??? ??? ?styleParser: function(config, container) {
?? ??? ??? ??? ?container.css(config);
?? ??? ??? ?},
?? ??? ??? ?sizeParser: function(config, container) {
?? ??? ??? ??? ?container.css(config);
?? ??? ??? ?},
?? ??? ??? ?positionParser: function(config, container) {
?? ??? ??? ??? ?container.css(config);
?? ??? ??? ?},
?? ??? ??? ?borderParser: function(config, container) {
?? ??? ??? ??? ?container.css(config);
?? ??? ??? ?}
?? ??? ?}
?? ?});*/
?? ?
?? ?
?? ?//已映射
?? ?jh.extend(jh.gui, {
?? ??? ?Panel: jh.Class(jh.gui.Container, { //這屬于在創建階段訪問json中的屬性，是否訪問不到的，因為還沒有創建
?? ??? ??? ?Constructor: function(config) {
?? ??? ??? ??? ?this.base(config);
?? ??? ??? ?},
?? ??? ??? ?render: function(parent, position) {
?? ??? ??? ??? ?var ct = $("<div></div>"),
?? ??? ??? ??? ?config = this.config;
?? ??? ??? ??? ?this.Render.sizeParser(config.size, ct);
?? ??? ??? ??? ?this.Render.positionParser(config.position, ct);
?? ??? ??? ??? ?this.Render.styleParser(config.style, ct);

?? ??? ??? ??? ?ct.attr("id", config.id);
?? ??? ??? ??? ?if(parent === undefined) {
?? ??? ??? ??? ??? ?ct.appendTo($("body"));
?? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ?ct.appendTo(parent);
?? ??? ??? ??? ?}
?? ??? ??? ??? ?ct.data("config",config);
?? ??? ??? ??? ?
?? ??? ??? ??? ?
?? ??? ??? ??? ?if(config.items===undefined || config.items==="" || config.items.length===0) {
?? ??? ??? ??? ??? ?return ct;
?? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?this.doLayout(config, ct);
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ??? ?doLayout: function(config, parent) {
?? ??? ??? ??? ?var layout = eval("jh.gui.layout.Layout."+config.layout);
?? ??? ??? ??? ?layout.beginLayout(config, parent);?? ?
?? ??? ??? ?}
?? ??? ?})
?? ?});

?? ?
?? ?jh.extend(jh.gui, {
?? ??? ?Label: jh.Class(jh.gui.Container, { //這屬于在創建階段訪問json中的屬性，是否訪問不到的，因為還沒有創建
?? ??? ??? ?Constructor: function(config) {
?? ??? ??? ??? ?this.base(config);
?? ??? ??? ?},
?? ??? ??? ?render: function(parent, position) {
?? ??? ??? ??? ?var ct = $("<span></span>"),
?? ??? ??? ??? ?config = this.config;
?? ??? ??? ??? ?this.Render.sizeParser(config.size, ct);
?? ??? ??? ??? ?this.Render.positionParser(config.position, ct);
?? ??? ??? ??? ?this.Render.styleParser(config.style, ct);

?? ??? ??? ??? ?ct.attr("id", config.id);
?? ??? ??? ??? ?if(parent === undefined) {
?? ??? ??? ??? ??? ?ct.appendTo($("body"));
?? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ?ct.appendTo(parent);
?? ??? ??? ??? ?}
?? ??? ??? ??? ?
?? ??? ??? ??? ?ct.data("config",config);
?? ??? ??? ??? ?return ct;
?? ??? ??? ?}
?? ??? ?})
?? ?});
?? ?
?? ?jh.extend(jh.gui, {
?? ??? ?Input: jh.Class(jh.gui.Container, { //這屬于在創建階段訪問json中的屬性，是否訪問不到的，因為還沒有創建
?? ??? ??? ?Constructor: function(config) {
?? ??? ??? ??? ?this.base(config);
?? ??? ??? ?},
?? ??? ??? ?render: function(parent, position) {
?? ??? ??? ??? ?var ct = $("<input />"),
?? ??? ??? ??? ?config = this.config;
?? ??? ??? ??? ?this.Render.sizeParser(config.size, ct);
?? ??? ??? ??? ?this.Render.positionParser(config.position, ct);
?? ??? ??? ??? ?this.Render.styleParser(config.style, ct);
ct.attr("name",config.name);
?? ??? ??? ??? ?ct.attr("id", config.id);
?? ??? ??? ??? ?if(parent === undefined) {
?? ??? ??? ??? ??? ?ct.appendTo($("body"));
?? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ?ct.appendTo(parent);
?? ??? ??? ??? ?}
?? ??? ??? ??? ?
?? ??? ??? ??? ?ct.data("config",config);
?? ??? ??? ??? ?return ct;
?? ??? ??? ?}
?? ??? ?})
?? ?});
?? ?
?? ?var panel = new jh.gui.Panel({
?? ??? ?id: "testPanel",
?? ??? ?xtype: "Panel",
?? ??? ?size: {width:jh.gui.screen.width, height:$(window).height()},
?? ??? ?layout: "Horizontal",
?? ??? ?position: {left:0, top:0}, //定位方式應該可以指定，absolute，relative，static
?? ??? ?style: {"background-color":"#D2E0F2"},
?? ??? ?options:{shrink:false},
?? ??? ?items:[{
?? ??? ??? ?size: {width:150},
?? ??? ??? ?style: {"background-color":"#D1E5C1"}
?? ??? ?},{
?? ??? ??? ?size: {width:300},
?? ??? ??? ?style: {"background-color":"#956FBF"},
?? ??? ??? ?layout:"Vertical",
?? ??? ??? ?items:[{ //表單項測試
?? ??? ??? ??? ?size: {height:100},
?? ??? ??? ??? ?style: {"background-color":"#EDED0D"},
?? ??? ??? ??? ?layout: "Form"
?? ??? ??? ?},{
?? ??? ??? ??? ?size: {height:100},
?? ??? ??? ??? ?style: {"background-color":"#D80D46"},
?? ??? ??? ??? ?layout:"Block",
?? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ?size: {height:65, border:"1px solid #D2E0F2"},
?? ??? ??? ??? ??? ?style: {"background-color":"#1221F7"},
?? ??? ??? ??? ??? ?layout: "Form",
?? ??? ??? ??? ??? ?options: {t:3,b:3,l:3,r:3},
?? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#B7EA0A"},
?? ??? ??? ??? ??? ??? ?label:"name",
?? ??? ??? ??? ??? ??? ?size:{width:80}
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#fff"},
?? ??? ??? ??? ??? ??? ?size:{"border":0},
?? ??? ??? ??? ??? ??? ?type:"textfield"
?? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ?}]
?? ??? ??? ?},{
?? ??? ??? ??? ?size: {height:100},
?? ??? ??? ??? ?style: {"background-color":"#F00FCB"}?? ?
?? ??? ??? ?}]
?? ??? ?},{
?? ??? ??? ?size: {width:500},
?? ??? ??? ?style: {"background-color":"#361"},
?? ??? ??? ?layout:"Border",
?? ??? ??? ?items:[{
?? ??? ??? ??? ?size: {height:100},
?? ??? ??? ??? ?style: {"background-color":"#fff"},
?? ??? ??? ??? ?options:{region:"north"}
?? ??? ??? ?},{
?? ??? ??? ??? ?size: {height:50},
?? ??? ??? ??? ?style: {"background-color":"#D1B7B7"},
?? ??? ??? ??? ?options:{region:"south"}
?? ??? ??? ?},{
?? ??? ??? ??? ?size: {width:30},
?? ??? ??? ??? ?style: {"background-color":"#f87"},
?? ??? ??? ??? ?options:{region:"west"}
?? ??? ??? ?},{
?? ??? ??? ??? ?size: {width:50},
?? ??? ??? ??? ?style: {"background-color":"#d45"},
?? ??? ??? ??? ?options:{region:"east"}
?? ??? ??? ?},{
?? ??? ??? ??? ?//size: {width:50},
?? ??? ??? ??? ?style: {"background-color":"#675858"},
?? ??? ??? ??? ?options:{region:"center"},
?? ??? ??? ??? ?layout:"Border",
?? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ?size: {height:100},
?? ??? ??? ??? ??? ?style: {"background-color":"#1ff"},
?? ??? ??? ??? ??? ?options:{region:"north"}
?? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ?size: {height:50},
?? ??? ??? ??? ??? ?style: {"background-color":"#11B7B7"},
?? ??? ??? ??? ??? ?options:{region:"south"}
?? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ?size: {width:30},
?? ??? ??? ??? ??? ?style: {"background-color":"#187"},
?? ??? ??? ??? ??? ?options:{region:"west"}
?? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ?size: {width:50},
?? ??? ??? ??? ??? ?style: {"background-color":"#145"},
?? ??? ??? ??? ??? ?options:{region:"east"}
?? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ?//size: {width:50},
?? ??? ??? ??? ??? ?style: {"background-color":"#175858"},
?? ??? ??? ??? ??? ?options:{region:"center"},
?? ??? ??? ??? ??? ?layout:"Horizontal",
?? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ?size: {width:10},
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#694"}?? ?
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?size: {width:9},
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#15C171"}?? ?
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?size: {width:8},
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#F03FCB"}?? ?
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?size: {width:7},
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#EDED4D"}?? ?
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?size: {width:6},
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#D85D46"}?? ?
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?size: {width:5},
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#F60FCB"}?? ?
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?size: {width:4},
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#F00FC7"}?? ?
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?size: {width:3},
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#800FCB"}?? ?
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?size: {width:2},
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#F09FCB"}?? ?
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?size: {width:1},
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#000"}?? ?
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?size: {width:1},
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#694"}?? ?
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?size: {width:2},
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#15C171"}?? ?
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?size: {width:3},
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#F03FCB"}?? ?
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?size: {width:4},
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#EDED4D"}?? ?
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?size: {width:5},
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#D85D46"}?? ?
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?size: {width:6},
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#F60FCB"}?? ?
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?size: {width:7},
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#F00FC7"}?? ?
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?size: {width:8},
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#800FCB"}?? ?
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?size: {width:9},
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#F09FCB"}?? ?
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?size: {width:10},
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#000"}?? ?
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?size: {width:11},
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#298"}?? ?
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?size: {width:12},
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#694"}?? ?
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?size: {width:13},
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#15C171"}?? ?
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?size: {width:15},
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#F03FCB"}?? ?
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?size: {width:17},
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#EDED4D"}?? ?
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?size: {width:19},
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#D85D46"}?? ?
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?size: {width:21},
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#F60FCB"}?? ?
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?size: {width:23},
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#F00FC7"}?? ?
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?size: {width:25},
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#800FCB"}?? ?
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?size: {width:27},
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#F09FCB"}?? ?
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?size: {width:29},
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#000"}?? ?
?? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ?}]
?? ??? ??? ?}]
?? ??? ?},{
?? ??? ??? ?size: {width:400},
?? ??? ??? ?style: {"background-color":"#D1BCE5"},
?? ??? ??? ?layout: "Vertical",
?? ??? ??? ?items: [{
?? ??? ??? ??? ?style:{"background-color":"#CEAFAF"},
?? ??? ??? ??? ?size:{height:30},
?? ??? ??? ??? ?layout: "Horizontal",
?? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ?style:{"background-color":"#C7fFAF"},
?? ??? ??? ??? ??? ?size:{width:200},
?? ??? ??? ??? ??? ?layout: "Block",
?? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ?size: {border:"1px solid #D2E0F2"},
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#E8E5E5"},
?? ??? ??? ??? ??? ??? ?layout: "Form",
?? ??? ??? ??? ??? ??? ?options: {t:3,b:3,l:3,r:10},
?? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#B7EA0A"},
?? ??? ??? ??? ??? ??? ??? ?label:"name",
?? ??? ??? ??? ??? ??? ??? ?size:{width:80}
?? ??? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#fff"},
?? ??? ??? ??? ??? ??? ??? ?size:{"border":0},
?? ??? ??? ??? ??? ??? ??? ?type:"textfield"
?? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ?style:{"background-color":"#C23FAF"},
?? ??? ??? ??? ??? ?size:{width:200},
?? ??? ??? ??? ??? ?layout: "Block",
?? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ?size: {border:"1px solid #D2E0F2"},
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#E8E5E5"},
?? ??? ??? ??? ??? ??? ?layout: "Form",
?? ??? ??? ??? ??? ??? ?options: {t:3,b:3,l:3,r:10},
?? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#B7EA0A"},
?? ??? ??? ??? ??? ??? ??? ?label:"name",
?? ??? ??? ??? ??? ??? ??? ?size:{width:80}
?? ??? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#fff"},
?? ??? ??? ??? ??? ??? ??? ?size:{"border":0},
?? ??? ??? ??? ??? ??? ??? ?type:"textfield"
?? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ?}]
?? ??? ??? ?},{
?? ??? ??? ??? ?style:{"background-color":"#CEAFAF"},
?? ??? ??? ??? ?size:{height:30},
?? ??? ??? ??? ?layout: "Block",
?? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ?size: {border:"1px solid #D2E0F2"},
?? ??? ??? ??? ??? ?style: {"background-color":"#E8E5E5"},
?? ??? ??? ??? ??? ?layout: "Form",
?? ??? ??? ??? ??? ?options: {t:3,b:3,l:3,r:3},
?? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#B7EA0A"},
?? ??? ??? ??? ??? ??? ?label:"name",
?? ??? ??? ??? ??? ??? ?size:{width:80}
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#fff"},
?? ??? ??? ??? ??? ??? ?size:{"border":0},
?? ??? ??? ??? ??? ??? ?type:"textfield"
?? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ?}]
?? ??? ??? ?},{
?? ??? ??? ??? ?style:{"background-color":"#CEAFAF"},
?? ??? ??? ??? ?size:{height:25},
?? ??? ??? ??? ?layout:"Block",
?? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ?size: {border:"1px solid #D2E0F2"},
?? ??? ??? ??? ??? ?style: {"background-color":"#1221F7"},
?? ??? ??? ??? ??? ?layout: "Form",
?? ??? ??? ??? ??? ?options: {t:3,b:3,l:3,r:3},
?? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#B7EA0A"},
?? ??? ??? ??? ??? ??? ?label:"name",
?? ??? ??? ??? ??? ??? ?size:{width:80}
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#fff"},
?? ??? ??? ??? ??? ??? ?size:{"border":0},
?? ??? ??? ??? ??? ??? ?type:"textfield"
?? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ?}]
?? ??? ??? ?},{
?? ??? ??? ??? ?style:{"background-color":"#CEAFAF"},
?? ??? ??? ??? ?size:{height:25},
?? ??? ??? ??? ?layout: "Block",
?? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ?size: {border:"1px solid #D2E0F2"},
?? ??? ??? ??? ??? ?style: {"background-color":"#1221F7"},
?? ??? ??? ??? ??? ?layout: "Form",
?? ??? ??? ??? ??? ?options: {t:3,b:3,l:3,r:3},
?? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#B7EA0A"},
?? ??? ??? ??? ??? ??? ?label:"name",
?? ??? ??? ??? ??? ??? ?size:{width:80}
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#fff"},
?? ??? ??? ??? ??? ??? ?size:{"border":0},
?? ??? ??? ??? ??? ??? ?type:"textfield"
?? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ?}]
?? ??? ??? ?},{
?? ??? ??? ??? ?style:{"background-color":"#CEAFAF"},
?? ??? ??? ??? ?size:{height:25},
?? ??? ??? ??? ?layout: "Block",
?? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ?size: {border:"1px solid #D2E0F2"},
?? ??? ??? ??? ??? ?style: {"background-color":"#1221F7"},
?? ??? ??? ??? ??? ?layout: "Form",
?? ??? ??? ??? ??? ?options: {t:3,b:3,l:3,r:3},
?? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#B7EA0A"},
?? ??? ??? ??? ??? ??? ?label:"name",
?? ??? ??? ??? ??? ??? ?size:{width:80}
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#fff"},
?? ??? ??? ??? ??? ??? ?size:{"border":0},
?? ??? ??? ??? ??? ??? ?type:"textfield"
?? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ?}]
?? ??? ??? ?},{
?? ??? ??? ??? ?style:{"background-color":"#CEAFAF"},
?? ??? ??? ??? ?size:{height:25},
?? ??? ??? ??? ?layout: "Block",
?? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ?size: {border:"1px solid #D2E0F2"},
?? ??? ??? ??? ??? ?style: {"background-color":"#1221F7"},
?? ??? ??? ??? ??? ?layout: "Form",
?? ??? ??? ??? ??? ?options: {t:3,b:3,l:3,r:3},
?? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#B7EA0A"},
?? ??? ??? ??? ??? ??? ?label:"name",
?? ??? ??? ??? ??? ??? ?size:{width:80}
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#fff"},
?? ??? ??? ??? ??? ??? ?size:{"border":0},
?? ??? ??? ??? ??? ??? ?type:"textfield"
?? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ?}]
?? ??? ??? ?},{
?? ??? ??? ??? ?style:{"background-color":"#CEAFAF"},
?? ??? ??? ??? ?size:{height:25},
?? ??? ??? ??? ?layout: "Block",
?? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ?size: {border:"1px solid #D2E0F2"},
?? ??? ??? ??? ??? ?style: {"background-color":"#1221F7"},
?? ??? ??? ??? ??? ?layout: "Form",
?? ??? ??? ??? ??? ?options: {t:3,b:3,l:3,r:3},
?? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#B7EA0A"},
?? ??? ??? ??? ??? ??? ?label:"name",
?? ??? ??? ??? ??? ??? ?size:{width:80}
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#fff"},
?? ??? ??? ??? ??? ??? ?size:{"border":0},
?? ??? ??? ??? ??? ??? ?type:"textfield"
?? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ?}]
?? ??? ??? ?},{
?? ??? ??? ??? ?style:{"background-color":"#CEAFAF"},
?? ??? ??? ??? ?size:{height:25},
?? ??? ??? ??? ?layout: "Block",
?? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ?size: {border:"1px solid #D2E0F2"},
?? ??? ??? ??? ??? ?style: {"background-color":"#1221F7"},
?? ??? ??? ??? ??? ?layout: "Form",
?? ??? ??? ??? ??? ?options: {t:3,b:3,l:3,r:3},
?? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#B7EA0A"},
?? ??? ??? ??? ??? ??? ?label:"name",
?? ??? ??? ??? ??? ??? ?size:{width:80}
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#fff"},
?? ??? ??? ??? ??? ??? ?size:{"border":0},
?? ??? ??? ??? ??? ??? ?type:"textfield"
?? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ?}]
?? ??? ??? ?}]
?? ??? ??? ??? ?
?? ??? ?}]
?? ?});
?? ?//panel.render();
?? ?

?? ?/*************************************************************************************/
?? ?var homepage = new jh.gui.Panel({
?? ??? ?id: "testPanel",
?? ??? ?xtype: "Panel",
?? ??? ?size: {width:jh.gui.screen.width, height:$(window).height()},
?? ??? ?style: {"background-color":"#361"},
?? ??? ?position:{left:0,top:0},
?? ??? ?options:{shrink:false},
?? ??? ?layout:"Border",
?? ??? ?items:[{
?? ??? ??? ?size: {height:100},
?? ??? ??? ?style: {"background-color":"#D2E0F2"},
?? ??? ??? ?options:{region:"north"},
?? ??? ??? ?layout: "Vertical",
?? ??? ??? ?items: [{
?? ??? ??? ??? ?id: "upMenuPanel",
?? ??? ??? ??? ?size: {height:30},
?? ??? ??? ??? ?style: {"background-color":"#D2E0F2"},
?? ??? ??? ??? ?layout:"Block",
?? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ?style: {"background-color":"#D2E0F2"},
?? ??? ??? ??? ??? ?size:{"border":"1px solid #99BBE8"},
?? ??? ??? ??? ??? ?options:{t:3,b:0,l:6,r:6}
?? ??? ??? ??? ?}]
?? ??? ??? ?},{
?? ??? ??? ??? ?size: {height:70},
?? ??? ??? ??? ?style: {"background-color":"#D2E0F2"},
?? ??? ??? ??? ?layout:"Block",
?? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ?style: {"background-color":"#D2E0F2"},
?? ??? ??? ??? ??? ?size:{"border":"1px solid #99BBE8"},
?? ??? ??? ??? ??? ?options:{t:3,b:3,l:6,r:6}
?? ??? ??? ??? ?}]
?? ??? ??? ?}]
?? ??? ?},{
?? ??? ??? ?size: {height:30},
?? ??? ??? ?style: {"background-color":"#D2E0F2"},
?? ??? ??? ?options:{region:"south"},
?? ??? ??? ?layout:"Block",
?? ??? ??? ?items:[{
?? ??? ??? ??? ?style: {"background-color":"#D2E0F2"},
?? ??? ??? ??? ?size:{"border":"1px solid #99BBE8"},
?? ??? ??? ??? ?options:{t:3,b:3,l:6,r:6}
?? ??? ??? ?}]
?? ??? ?},{
?? ??? ??? ?size: {width:215},
?? ??? ??? ?style: {"background-color":"#D2E0F2"},
?? ??? ??? ?options:{region:"west"},
?? ??? ??? ?layout:"Block",
?? ??? ??? ?items:[{
?? ??? ??? ??? ?id:"westPanel",
?? ??? ??? ??? ?style: {"background-color":"#D2E0F2"},
?? ??? ??? ??? ?size:{"border":"1px solid #99BBE8"},
?? ??? ??? ??? ?options:{t:0,b:0,l:6,r:6}
?? ??? ??? ?}]
?? ??? ?},{
?? ??? ??? ?style: {"background-color":"#D2E0F2"},
?? ??? ??? ?options:{region:"center"},
?? ??? ??? ?layout:"Block",
?? ??? ??? ?items:[{
?? ??? ??? ??? ?style: {"background-color":"#D2E0F2"},
?? ??? ??? ??? ?size:{"border":"1px solid #99BBE8"},
?? ??? ??? ??? ?options:{t:0,b:0,l:6,r:6},
?? ??? ??? ??? ?layout:"Border",
?? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ?size: {height:25},
?? ??? ??? ??? ??? ?style: {"background-color":"#D2E0F2"},
?? ??? ??? ??? ??? ?options:{region:"north"}
?? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ?id:"mainJSP",
?? ??? ??? ??? ??? ?style: {"background-color":"#fff"},
?? ??? ??? ??? ??? ?options:{region:"center"},
?? ??? ??? ??? ??? ?layout:"Border"
?? ??? ??? ??? ?}]
?? ??? ??? ?}]
?? ??? ?}]
?? ?});
?? ?homepage.render($("body"));
?? ?var mainJSP = new jh.gui.Panel({
?? ??? ?size:{width:$("#mainJSP").width(), height:$("#mainJSP").height()},
?? ??? ?position:{left:0, top:0},
?? ??? ?style: {"background-color":"#555"},
?? ??? ?options: {shrink:false},
?? ??? ?layout:"Border",
?? ??? ?items:[{ //工具條
?? ??? ??? ?size: {height:30},
?? ??? ??? ?style: {"background-color":"#D2E0F2"},
?? ??? ??? ?options:{region:"north"},
?? ??? ??? ?layout:"Block",
?? ??? ??? ?items:[{
?? ??? ??? ??? ?style: {"background-color":"#D2E0F2"},
?? ??? ??? ??? ?size:{"border-top":"1px solid #99BBE8","border-bottom":"1px solid #99BBE8"}
?? ??? ??? ?}]
?? ??? ?},{//數據面板
?? ??? ??? ?style: {"background-color":"#D2E0F2"},
?? ??? ??? ?options:{region:"center"},
?? ??? ??? ?layout:"Border",
?? ??? ??? ?items:[{ //表單
?? ??? ??? ??? ?id:"wForm",
?? ??? ??? ??? ?size: {height:110},
?? ??? ??? ??? ?style: {"background-color":"#D2E0F2"},
?? ??? ??? ??? ?options:{region:"north"},
?? ??? ??? ??? ?layout: "Vertical",
?? ??? ??? ??? ?items: [{
?? ??? ??? ??? ??? ?style:{"background-color":"#CEAFAF"},
?? ??? ??? ??? ??? ?size:{height:25},
?? ??? ??? ??? ??? ?layout: "Horizontal",
?? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ?style:{"background-color":"#C7fFAF"},
?? ??? ??? ??? ??? ??? ?size:{width:200},
?? ??? ??? ??? ??? ??? ?layout: "Block",
?? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ?size: {border:"1px solid #D2E0F2"},
?? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#E8E5E5"},
?? ??? ??? ??? ??? ??? ??? ?layout: "Form",
?? ??? ??? ??? ??? ??? ??? ?options: {t:3,b:3,l:3,r:10},
?? ??? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#B7EA0A"},
?? ??? ??? ??? ??? ??? ??? ??? ?label:"name",
?? ??? ??? ??? ??? ??? ??? ??? ?size:{width:80}
?? ??? ??? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#fff"},
?? ??? ??? ??? ??? ??? ??? ??? ?size:{"border":0},
?? ??? ??? ??? ??? ??? ??? ??? ?type:"textfield",
?? ??? ??? ??? ??? ??? ??? ??? ?name:"name1"
?? ??? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?style:{"background-color":"#C23FAF"},
?? ??? ??? ??? ??? ??? ?size:{width:200},
?? ??? ??? ??? ??? ??? ?layout: "Block",
?? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ?size: {border:"1px solid #D2E0F2"},
?? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#E8E5E5"},
?? ??? ??? ??? ??? ??? ??? ?layout: "Form",
?? ??? ??? ??? ??? ??? ??? ?options: {t:3,b:3,l:3,r:10},
?? ??? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#B7EA0A"},
?? ??? ??? ??? ??? ??? ??? ??? ?label:"name",
?? ??? ??? ??? ??? ??? ??? ??? ?size:{width:80}
?? ??? ??? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#fff"},
?? ??? ??? ??? ??? ??? ??? ??? ?size:{"border":0},
?? ??? ??? ??? ??? ??? ??? ??? ?type:"textfield",
?? ??? ??? ??? ??? ??? ??? ??? ?name:"name2"
?? ??? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?style:{"background-color":"#C7fFAF"},
?? ??? ??? ??? ??? ??? ?size:{width:200},
?? ??? ??? ??? ??? ??? ?layout: "Block",
?? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ?size: {border:"1px solid #D2E0F2"},
?? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#E8E5E5"},
?? ??? ??? ??? ??? ??? ??? ?layout: "Form",
?? ??? ??? ??? ??? ??? ??? ?options: {t:3,b:3,l:3,r:10},
?? ??? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#B7EA0A"},
?? ??? ??? ??? ??? ??? ??? ??? ?label:"name",
?? ??? ??? ??? ??? ??? ??? ??? ?size:{width:80}
?? ??? ??? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#fff"},
?? ??? ??? ??? ??? ??? ??? ??? ?size:{"border":0},
?? ??? ??? ??? ??? ??? ??? ??? ?type:"textfield",
?? ??? ??? ??? ??? ??? ??? ??? ?name:"name3"
?? ??? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?style:{"background-color":"#C23FAF"},
?? ??? ??? ??? ??? ??? ?size:{width:200},
?? ??? ??? ??? ??? ??? ?layout: "Block",
?? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ?size: {border:"1px solid #D2E0F2"},
?? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#E8E5E5"},
?? ??? ??? ??? ??? ??? ??? ?layout: "Form",
?? ??? ??? ??? ??? ??? ??? ?options: {t:3,b:3,l:3,r:10},
?? ??? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#B7EA0A"},
?? ??? ??? ??? ??? ??? ??? ??? ?label:"name",
?? ??? ??? ??? ??? ??? ??? ??? ?size:{width:80}
?? ??? ??? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#fff"},
?? ??? ??? ??? ??? ??? ??? ??? ?size:{"border":0},
?? ??? ??? ??? ??? ??? ??? ??? ?type:"textfield",
?? ??? ??? ??? ??? ??? ??? ??? ?name:"name4"
?? ??? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?style:{"background-color":"#C7fFAF"},
?? ??? ??? ??? ??? ??? ?size:{width:200},
?? ??? ??? ??? ??? ??? ?layout: "Block",
?? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ?size: {border:"1px solid #D2E0F2"},
?? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#E8E5E5"},
?? ??? ??? ??? ??? ??? ??? ?layout: "Form",
?? ??? ??? ??? ??? ??? ??? ?options: {t:3,b:3,l:3,r:10},
?? ??? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#B7EA0A"},
?? ??? ??? ??? ??? ??? ??? ??? ?label:"name",
?? ??? ??? ??? ??? ??? ??? ??? ?size:{width:80}
?? ??? ??? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ??? ??? ?id:"name5",
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#fff"},
?? ??? ??? ??? ??? ??? ??? ??? ?size:{"border":0},
?? ??? ??? ??? ??? ??? ??? ??? ?type:"textfield",
?? ??? ??? ??? ??? ??? ??? ??? ?name:"name5"
?? ??? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ?style:{"background-color":"#CEAFAF"},
?? ??? ??? ??? ??? ?size:{height:25},
?? ??? ??? ??? ??? ?layout: "Horizontal",
?? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ?style:{"background-color":"#C7fFAF"},
?? ??? ??? ??? ??? ??? ?size:{width:200},
?? ??? ??? ??? ??? ??? ?layout: "Block",
?? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ?size: {border:"1px solid #D2E0F2"},
?? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#E8E5E5"},
?? ??? ??? ??? ??? ??? ??? ?layout: "Form",
?? ??? ??? ??? ??? ??? ??? ?options: {t:3,b:3,l:3,r:10},
?? ??? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#B7EA0A"},
?? ??? ??? ??? ??? ??? ??? ??? ?label:"name",
?? ??? ??? ??? ??? ??? ??? ??? ?size:{width:80}
?? ??? ??? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#fff"},
?? ??? ??? ??? ??? ??? ??? ??? ?size:{"border":0},
?? ??? ??? ??? ??? ??? ??? ??? ?type:"textfield",
?? ??? ??? ??? ??? ??? ??? ??? ?name:"name6"
?? ??? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?style:{"background-color":"#C23FAF"},
?? ??? ??? ??? ??? ??? ?size:{width:200},
?? ??? ??? ??? ??? ??? ?layout: "Block",
?? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ?size: {border:"1px solid #D2E0F2"},
?? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#E8E5E5"},
?? ??? ??? ??? ??? ??? ??? ?layout: "Form",
?? ??? ??? ??? ??? ??? ??? ?options: {t:3,b:3,l:3,r:10},
?? ??? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#B7EA0A"},
?? ??? ??? ??? ??? ??? ??? ??? ?label:"name",
?? ??? ??? ??? ??? ??? ??? ??? ?size:{width:80}
?? ??? ??? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#fff"},
?? ??? ??? ??? ??? ??? ??? ??? ?size:{"border":0},
?? ??? ??? ??? ??? ??? ??? ??? ?type:"textfield",
?? ??? ??? ??? ??? ??? ??? ??? ?name:"name7"
?? ??? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?style:{"background-color":"#C7fFAF"},
?? ??? ??? ??? ??? ??? ?size:{width:200},
?? ??? ??? ??? ??? ??? ?layout: "Block",
?? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ?size: {border:"1px solid #D2E0F2"},
?? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#E8E5E5"},
?? ??? ??? ??? ??? ??? ??? ?layout: "Form",
?? ??? ??? ??? ??? ??? ??? ?options: {t:3,b:3,l:3,r:10},
?? ??? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#B7EA0A"},
?? ??? ??? ??? ??? ??? ??? ??? ?label:"name",
?? ??? ??? ??? ??? ??? ??? ??? ?size:{width:80}
?? ??? ??? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#fff"},
?? ??? ??? ??? ??? ??? ??? ??? ?size:{"border":0},
?? ??? ??? ??? ??? ??? ??? ??? ?type:"textfield",
?? ??? ??? ??? ??? ??? ??? ??? ?name:"name8"
?? ??? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?style:{"background-color":"#C23FAF"},
?? ??? ??? ??? ??? ??? ?size:{width:200},
?? ??? ??? ??? ??? ??? ?layout: "Block",
?? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ?size: {border:"1px solid #D2E0F2"},
?? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#E8E5E5"},
?? ??? ??? ??? ??? ??? ??? ?layout: "Form",
?? ??? ??? ??? ??? ??? ??? ?options: {t:3,b:3,l:3,r:10},
?? ??? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#B7EA0A"},
?? ??? ??? ??? ??? ??? ??? ??? ?label:"name",
?? ??? ??? ??? ??? ??? ??? ??? ?size:{width:80}
?? ??? ??? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#fff"},
?? ??? ??? ??? ??? ??? ??? ??? ?size:{"border":0},
?? ??? ??? ??? ??? ??? ??? ??? ?type:"textfield",
?? ??? ??? ??? ??? ??? ??? ??? ?name:"name9"
?? ??? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?style:{"background-color":"#C7fFAF"},
?? ??? ??? ??? ??? ??? ?size:{width:200},
?? ??? ??? ??? ??? ??? ?layout: "Block",
?? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ?size: {border:"1px solid #D2E0F2"},
?? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#E8E5E5"},
?? ??? ??? ??? ??? ??? ??? ?layout: "Form",
?? ??? ??? ??? ??? ??? ??? ?options: {t:3,b:3,l:3,r:10},
?? ??? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#B7EA0A"},
?? ??? ??? ??? ??? ??? ??? ??? ?label:"name",
?? ??? ??? ??? ??? ??? ??? ??? ?size:{width:80}
?? ??? ??? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#fff"},
?? ??? ??? ??? ??? ??? ??? ??? ?size:{"border":0},
?? ??? ??? ??? ??? ??? ??? ??? ?type:"textfield",
?? ??? ??? ??? ??? ??? ??? ??? ?name:"name10"
?? ??? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ?style:{"background-color":"#CEAFAF"},
?? ??? ??? ??? ??? ?size:{height:25},
?? ??? ??? ??? ??? ?layout: "Horizontal",
?? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ?style:{"background-color":"#C7fFAF"},
?? ??? ??? ??? ??? ??? ?size:{width:200},
?? ??? ??? ??? ??? ??? ?layout: "Block",
?? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ?size: {border:"1px solid #D2E0F2"},
?? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#E8E5E5"},
?? ??? ??? ??? ??? ??? ??? ?layout: "Form",
?? ??? ??? ??? ??? ??? ??? ?options: {t:3,b:3,l:3,r:10},
?? ??? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#B7EA0A"},
?? ??? ??? ??? ??? ??? ??? ??? ?label:"name",
?? ??? ??? ??? ??? ??? ??? ??? ?size:{width:80}
?? ??? ??? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#fff"},
?? ??? ??? ??? ??? ??? ??? ??? ?size:{"border":0},
?? ??? ??? ??? ??? ??? ??? ??? ?type:"textfield",
?? ??? ??? ??? ??? ??? ??? ??? ?name:"name11"
?? ??? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?style:{"background-color":"#C23FAF"},
?? ??? ??? ??? ??? ??? ?size:{width:200},
?? ??? ??? ??? ??? ??? ?layout: "Block",
?? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ?size: {border:"1px solid #D2E0F2"},
?? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#E8E5E5"},
?? ??? ??? ??? ??? ??? ??? ?layout: "Form",
?? ??? ??? ??? ??? ??? ??? ?options: {t:3,b:3,l:3,r:10},
?? ??? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#B7EA0A"},
?? ??? ??? ??? ??? ??? ??? ??? ?label:"name",
?? ??? ??? ??? ??? ??? ??? ??? ?size:{width:80}
?? ??? ??? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#fff"},
?? ??? ??? ??? ??? ??? ??? ??? ?size:{"border":0},
?? ??? ??? ??? ??? ??? ??? ??? ?type:"textfield",
?? ??? ??? ??? ??? ??? ??? ??? ?name:"name12"
?? ??? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?style:{"background-color":"#C7fFAF"},
?? ??? ??? ??? ??? ??? ?size:{width:200},
?? ??? ??? ??? ??? ??? ?layout: "Block",
?? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ?size: {border:"1px solid #D2E0F2"},
?? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#E8E5E5"},
?? ??? ??? ??? ??? ??? ??? ?layout: "Form",
?? ??? ??? ??? ??? ??? ??? ?options: {t:3,b:3,l:3,r:10},
?? ??? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#B7EA0A"},
?? ??? ??? ??? ??? ??? ??? ??? ?label:"name",
?? ??? ??? ??? ??? ??? ??? ??? ?size:{width:80}
?? ??? ??? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#fff"},
?? ??? ??? ??? ??? ??? ??? ??? ?size:{"border":0},
?? ??? ??? ??? ??? ??? ??? ??? ?type:"textfield",
?? ??? ??? ??? ??? ??? ??? ??? ?name:"name13"
?? ??? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?style:{"background-color":"#C23FAF"},
?? ??? ??? ??? ??? ??? ?size:{width:200},
?? ??? ??? ??? ??? ??? ?layout: "Block",
?? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ?size: {border:"1px solid #D2E0F2"},
?? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#E8E5E5"},
?? ??? ??? ??? ??? ??? ??? ?layout: "Form",
?? ??? ??? ??? ??? ??? ??? ?options: {t:3,b:3,l:3,r:10},
?? ??? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#B7EA0A"},
?? ??? ??? ??? ??? ??? ??? ??? ?label:"name",
?? ??? ??? ??? ??? ??? ??? ??? ?size:{width:80}
?? ??? ??? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#fff"},
?? ??? ??? ??? ??? ??? ??? ??? ?size:{"border":0},
?? ??? ??? ??? ??? ??? ??? ??? ?type:"textfield",
?? ??? ??? ??? ??? ??? ??? ??? ?name:"name14"
?? ??? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?style:{"background-color":"#C7fFAF"},
?? ??? ??? ??? ??? ??? ?size:{width:200},
?? ??? ??? ??? ??? ??? ?layout: "Block",
?? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ?size: {border:"1px solid #D2E0F2"},
?? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#E8E5E5"},
?? ??? ??? ??? ??? ??? ??? ?layout: "Form",
?? ??? ??? ??? ??? ??? ??? ?options: {t:3,b:3,l:3,r:10},
?? ??? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#B7EA0A"},
?? ??? ??? ??? ??? ??? ??? ??? ?label:"name",
?? ??? ??? ??? ??? ??? ??? ??? ?size:{width:80}
?? ??? ??? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#fff"},
?? ??? ??? ??? ??? ??? ??? ??? ?size:{"border":0},
?? ??? ??? ??? ??? ??? ??? ??? ?type:"textfield",
?? ??? ??? ??? ??? ??? ??? ??? ?name:"name15"
?? ??? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ?style:{"background-color":"#CEAFAF"},
?? ??? ??? ??? ??? ?size:{height:25},
?? ??? ??? ??? ??? ?layout: "Horizontal",
?? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ?style:{"background-color":"#C7fFAF"},
?? ??? ??? ??? ??? ??? ?size:{width:200},
?? ??? ??? ??? ??? ??? ?layout: "Block",
?? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ?size: {border:"1px solid #D2E0F2"},
?? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#E8E5E5"},
?? ??? ??? ??? ??? ??? ??? ?layout: "Form",
?? ??? ??? ??? ??? ??? ??? ?options: {t:3,b:3,l:3,r:10},
?? ??? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#B7EA0A"},
?? ??? ??? ??? ??? ??? ??? ??? ?label:"name",
?? ??? ??? ??? ??? ??? ??? ??? ?size:{width:80}
?? ??? ??? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#fff"},
?? ??? ??? ??? ??? ??? ??? ??? ?size:{"border":0},
?? ??? ??? ??? ??? ??? ??? ??? ?type:"textfield",
?? ??? ??? ??? ??? ??? ??? ??? ?name:"name16"
?? ??? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?style:{"background-color":"#C23FAF"},
?? ??? ??? ??? ??? ??? ?size:{width:200},
?? ??? ??? ??? ??? ??? ?layout: "Block",
?? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ?size: {border:"1px solid #D2E0F2"},
?? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#E8E5E5"},
?? ??? ??? ??? ??? ??? ??? ?layout: "Form",
?? ??? ??? ??? ??? ??? ??? ?options: {t:3,b:3,l:3,r:10},
?? ??? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#B7EA0A"},
?? ??? ??? ??? ??? ??? ??? ??? ?label:"name",
?? ??? ??? ??? ??? ??? ??? ??? ?size:{width:80}
?? ??? ??? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#fff"},
?? ??? ??? ??? ??? ??? ??? ??? ?size:{"border":0},
?? ??? ??? ??? ??? ??? ??? ??? ?type:"textfield",
?? ??? ??? ??? ??? ??? ??? ??? ?name:"name17"
?? ??? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?style:{"background-color":"#C7fFAF"},
?? ??? ??? ??? ??? ??? ?size:{width:200},
?? ??? ??? ??? ??? ??? ?layout: "Block",
?? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ?size: {border:"1px solid #D2E0F2"},
?? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#E8E5E5"},
?? ??? ??? ??? ??? ??? ??? ?layout: "Form",
?? ??? ??? ??? ??? ??? ??? ?options: {t:3,b:3,l:3,r:10},
?? ??? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#B7EA0A"},
?? ??? ??? ??? ??? ??? ??? ??? ?label:"name",
?? ??? ??? ??? ??? ??? ??? ??? ?size:{width:80}
?? ??? ??? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#fff"},
?? ??? ??? ??? ??? ??? ??? ??? ?size:{"border":0},
?? ??? ??? ??? ??? ??? ??? ??? ?type:"textfield",
?? ??? ??? ??? ??? ??? ??? ??? ?name:"name18"
?? ??? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?style:{"background-color":"#C23FAF"},
?? ??? ??? ??? ??? ??? ?size:{width:200},
?? ??? ??? ??? ??? ??? ?layout: "Block",
?? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ?size: {border:"1px solid #D2E0F2"},
?? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#E8E5E5"},
?? ??? ??? ??? ??? ??? ??? ?layout: "Form",
?? ??? ??? ??? ??? ??? ??? ?options: {t:3,b:3,l:3,r:10},
?? ??? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#B7EA0A"},
?? ??? ??? ??? ??? ??? ??? ??? ?label:"name",
?? ??? ??? ??? ??? ??? ??? ??? ?size:{width:80}
?? ??? ??? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#fff"},
?? ??? ??? ??? ??? ??? ??? ??? ?size:{"border":0},
?? ??? ??? ??? ??? ??? ??? ??? ?type:"textfield",
?? ??? ??? ??? ??? ??? ??? ??? ?name:"name19"
?? ??? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?style:{"background-color":"#C7fFAF"},
?? ??? ??? ??? ??? ??? ?size:{width:200},
?? ??? ??? ??? ??? ??? ?layout: "Block",
?? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ?size: {border:"1px solid #D2E0F2"},
?? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#E8E5E5"},
?? ??? ??? ??? ??? ??? ??? ?layout: "Form",
?? ??? ??? ??? ??? ??? ??? ?options: {t:3,b:3,l:3,r:10},
?? ??? ??? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#B7EA0A"},
?? ??? ??? ??? ??? ??? ??? ??? ?label:"name",
?? ??? ??? ??? ??? ??? ??? ??? ?size:{width:80}
?? ??? ??? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ??? ??? ?style: {"background-color":"#fff"},
?? ??? ??? ??? ??? ??? ??? ??? ?size:{"border":0},
?? ??? ??? ??? ??? ??? ??? ??? ?type:"textfield"
?? ??? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ?}]
?? ??? ??? ?},{
?? ??? ??? ??? ?size: {height:80},
?? ??? ??? ??? ?style: {"background-color":"#D2E0F2"},
?? ??? ??? ??? ?options:{region:"south"},
?? ??? ??? ??? ?layout:"Block",
?? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ?style: {"background-color":"#D2E0F2"},
?? ??? ??? ??? ??? ?size:{"border-left":"1px solid #99BBE8","border-right":"1px solid #99BBE8","border-bottom":"1px solid #99BBE8"},
?? ??? ??? ??? ??? ?options:{b:3,l:6,r:6}
?? ??? ??? ??? ?}]
?? ??? ??? ?},{
?? ??? ??? ??? ?id:"mainJSP",
?? ??? ??? ??? ?style: {"background-color":"#D2E0F2"},
?? ??? ??? ??? ?options:{region:"center"},
?? ??? ??? ??? ?layout:"Block",
?? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ?style: {"background-color":"#D2E0F2"},
?? ??? ??? ??? ??? ?size:{"border":"1px solid #99BBE8"},
?? ??? ??? ??? ??? ?options:{l:6,r:6}
?? ??? ??? ??? ?}]
?? ??? ??? ?}]
?? ??? ??? ?
?? ??? ?}]
?? ?});
?? ?
?? ?var menuPanel = new jh.gui.Panel({
?? ??? ?id:"westMenuPanel",
?? ??? ?layout: "Vertical",
?? ??? ?style:{"background-color":"#fff"},
?? ??? ?size:{width:$("#westPanel").width(), height:$("#westPanel").height()},
?? ??? ?options:{shrink:false},
?? ??? ?items:[{
?? ??? ??? ?style: {"background-color":"#D9E7F8"},
?? ??? ??? ?size:{height:25},
?? ??? ??? ?layout:"Block",
?? ??? ??? ?items:[{
?? ??? ??? ??? ?style: {"background-color":"#D9E7F8"},
?? ??? ??? ??? ?size:{} //這里缺少驗證，至少要寫一個空的size
?? ??? ??? ?}]
?? ??? ?},{
?? ??? ??? ?style: {"background-color":"#D9E7F8"},
?? ??? ??? ?size:{height:25},
?? ??? ??? ?layout:"Block",
?? ??? ??? ?items:[{
?? ??? ??? ??? ?style: {"background-color":"#D9E7F8"},
?? ??? ??? ??? ?size:{"border-top":"1px solid #99BBE8"}
?? ??? ??? ?}]
?? ??? ?},{
?? ??? ??? ?style: {"background-color":"#D9E7F8"},
?? ??? ??? ?size:{height:25},
?? ??? ??? ?layout:"Block",
?? ??? ??? ?items:[{
?? ??? ??? ??? ?style: {"background-color":"#D9E7F8"},
?? ??? ??? ??? ?size:{"border-top":"1px solid #99BBE8"}
?? ??? ??? ?}]
?? ??? ?},{
?? ??? ??? ?style: {"background-color":"#D9E7F8"},
?? ??? ??? ?size:{height:25},
?? ??? ??? ?layout:"Block",
?? ??? ??? ?items:[{
?? ??? ??? ??? ?style: {"background-color":"#D9E7F8"},
?? ??? ??? ??? ?size:{"border-top":"1px solid #99BBE8"}
?? ??? ??? ?}]
?? ??? ?},{
?? ??? ??? ?style: {"background-color":"#D9E7F8"},
?? ??? ??? ?size:{height:25},
?? ??? ??? ?layout:"Block",
?? ??? ??? ?items:[{
?? ??? ??? ??? ?style: {"background-color":"#D9E7F8"},
?? ??? ??? ??? ?size:{"border-top":"1px solid #99BBE8"}
?? ??? ??? ?}]
?? ??? ?},{
?? ??? ??? ?style: {"background-color":"#D9E7F8"},
?? ??? ??? ?size:{height:25},
?? ??? ??? ?layout:"Block",
?? ??? ??? ?items:[{
?? ??? ??? ??? ?style: {"background-color":"#D9E7F8"},
?? ??? ??? ??? ?size:{"border-top":"1px solid #99BBE8"}
?? ??? ??? ?}]
?? ??? ?},{
?? ??? ??? ?style: {"background-color":"#D9E7F8"},
?? ??? ??? ?size:{height:25},
?? ??? ??? ?layout:"Block",
?? ??? ??? ?items:[{
?? ??? ??? ??? ?style: {"background-color":"#D9E7F8"},
?? ??? ??? ??? ?size:{"border-top":"1px solid #99BBE8"}
?? ??? ??? ?}]
?? ??? ?},{
?? ??? ??? ?style: {"background-color":"#D9E7F8"},
?? ??? ??? ?size:{height:25},
?? ??? ??? ?layout:"Block",
?? ??? ??? ?items:[{
?? ??? ??? ??? ?style: {"background-color":"#D9E7F8"},
?? ??? ??? ??? ?size:{"border-top":"1px solid #99BBE8"}
?? ??? ??? ?}]
?? ??? ?},{
?? ??? ??? ?style: {"background-color":"#D9E7F8"},
?? ??? ??? ?size:{height:25},
?? ??? ??? ?layout:"Block",
?? ??? ??? ?items:[{
?? ??? ??? ??? ?style: {"background-color":"#D9E7F8"},
?? ??? ??? ??? ?size:{"border-top":"1px solid #99BBE8"}
?? ??? ??? ?}]
?? ??? ?},{
?? ??? ??? ?style: {"background-color":"#D9E7F8"},
?? ??? ??? ?size:{height:25},
?? ??? ??? ?layout:"Block",
?? ??? ??? ?items:[{
?? ??? ??? ??? ?style: {"background-color":"#D9E7F8"},
?? ??? ??? ??? ?size:{"border-top":"1px solid #99BBE8"}
?? ??? ??? ?}]
?? ??? ?},{
?? ??? ??? ?style: {"background-color":"#D9E7F8"},
?? ??? ??? ?size:{height:25},
?? ??? ??? ?layout:"Block",
?? ??? ??? ?items:[{
?? ??? ??? ??? ?style: {"background-color":"#D9E7F8"},
?? ??? ??? ??? ?size:{"border-top":"1px solid #99BBE8"}
?? ??? ??? ?}]
?? ??? ?},{
?? ??? ??? ?style: {"background-color":"#D9E7F8"},
?? ??? ??? ?size:{height:25},
?? ??? ??? ?layout:"Block",
?? ??? ??? ?items:[{
?? ??? ??? ??? ?style: {"background-color":"#D9E7F8"},
?? ??? ??? ??? ?size:{"border-top":"1px solid #99BBE8","border-bottom":"1px solid #99BBE8"}
?? ??? ??? ?}]
?? ??? ?}]
?? ?});
?? ?
?? ?menuPanel.render($("#westPanel"));
?? ?mainJSP.render($("#mainJSP"));
?? ?$("#wForm").wrap("<form id='testForm'></form>");
?? ?var input = $("<input type='submit' value='Submit'></input>");
?? ?$("#wForm").append(input);
?? ?input.css({"background-color":"#333","width":60,"height":25,"z-index":5,"position":"absolute"});
?? ?
?? ?
?? ?
?? ?$("#testForm").validate({
?? ??? ?rules: {
?? ??? ??? ?name1: "required",
?? ??? ??? ?name2: "required",
?? ??? ??? ?name3: {
?? ??? ??? ??? ?required: true,
?? ??? ??? ??? ?minlength: 2
?? ??? ??? ?},
?? ??? ??? ?name4: {
?? ??? ??? ??? ?required: true,
?? ??? ??? ??? ?minlength: 2
?? ??? ??? ?},
?? ??? ??? ?name5: {
?? ??? ??? ??? ?required: true,
?? ??? ??? ??? ?minlength: 5
?? ??? ??? ?},
?? ??? ??? ?name6: {
?? ??? ??? ??? ?required: true,
?? ??? ??? ??? ?minlength: 5,
?? ??? ??? ??? ?equalTo: "#name5"
?? ??? ??? ?},
?? ??? ??? ?name7: {
?? ??? ??? ??? ?required: true,
?? ??? ??? ??? ?email: true
?? ??? ??? ?},
?? ??? ??? ?name8: {
?? ??? ??? ??? ?required: "#newsletter:checked",
?? ??? ??? ??? ?minlength: 2
?? ??? ??? ?},
?? ??? ??? ?name9: "required"
?? ??? ?},
?? ??? ?messages: {
?? ??? ??? ?name1: "Please enter your firstname",
?? ??? ??? ?name2: "Please enter your lastname",
?? ??? ??? ?name4: {
?? ??? ??? ??? ?required: "Please enter a username",
?? ??? ??? ??? ?minlength: "Your username must consist of at least 2 characters"
?? ??? ??? ?},
?? ??? ??? ?name5: {
?? ??? ??? ??? ?required: "2Please enter a username",
?? ??? ??? ??? ?minlength: "2Your username must consist of at least 2 characters"
?? ??? ??? ?},
?? ??? ??? ?name6: {
?? ??? ??? ??? ?required: "Please provide a password",
?? ??? ??? ??? ?minlength: "Your password must be at least 5 characters long"
?? ??? ??? ?},
?? ??? ??? ?name7: {
?? ??? ??? ??? ?required: "Please provide a password",
?? ??? ??? ??? ?minlength: "Your password must be at least 5 characters long",
?? ??? ??? ??? ?equalTo: "Please enter the same password as above"
?? ??? ??? ?},
?? ??? ??? ?name8: "Please enter a valid email address",
?? ??? ??? ?name9: "Please accept our policy"
?? ??? ?},
?? ??? ?errorPlacement1:function(label,element,t){
?? ??? ??? ?element.parent().append(label);
?? ??? ??? ?label.css({overflow:"hidden",position:"absolute",width:element.width()+111,height:element.height(),left:element.css("left"),top:element.css("top")})
//?? ??? ??? ?var p = element.parent();
//?? ??? ??? ?var i = new jh.gui.Input({
//?? ??? ??? ??? ?style:{"border":0},
//?? ??? ??? ??? ?size:{width:element.width(),height:element.height()},
//?? ??? ??? ??? ?position:{left:element.css("left"),top:element.css("top")},
//?? ??? ??? ??? ?options:{shrink:false}
//?? ??? ??? ?});
//?? ??? ??? ?
//?? ??? ??? ?var inp = i.render(p);
//?? ??? ??? ?inp.val(label.text()).attr("readonly",true)
//?? ??? ??? ?.attr({"for":? t.idOrName(element), generated: true})
//?? ??? ??? ?.addClass(t.settings.errorClass);
//?? ??? ??? ?
//?? ??? ??? ?inp.bind("focus",function(e){
//?? ??? ??? ??? ?var p = $(e.target).parent();
alert($(e.target).parent().find("input").attr("name"))
//?? ??? ??? ??? ?$(e.target).remove();
//p.find("input").focus();
//
//?? ??? ??? ?});
?? ??? ?}
?? ?});

/**
?* 界面生成根據配置信息，界面重新布局，根據父節點的布局進行設置
?* 如果是Border，當改變總大小時，只重新計算中間的布局，因為上下左右都是相對的布局，所以盡量多用Border布局
?* 如果是Horizontal，Vertical，不須驗證子容器了
?* 如果是Block則需要驗證，子容器，不過也只有一個
?* 對于表單布局也：驗證原則，只要外部是定死的，即絕對的，那么里面的布局就不會改變
?*
?* 校驗策略：每個容器要有布局屬性，在渲染完成后就要添加的屬性，每個容器都要有一個在父容器中的位置屬性：
?* north，south，west，east，center，block，absolute
?* 布局屬性：Absolute，Border，Block，Vertical，Horizontal，Card，Form
?* 收縮的布局只有Block，Border，Card，其他的都是絕對的布局，加入容器中已經滿了，怎么辦
?* 對于所有的容器我們可以有自己的集合式數據結構進行管理，也可以由dom樹進行管理，我們自己的管理只是組件進入布局的接口，最終
?* 還是要交給dom樹的，所以我們要嚴格驗證組件的進入，如果容器滿了就不能裝了，否則就沒有規則了，處理起來也較麻煩，也不符合邏輯
?* 只有Card和Absolute是無限子容器的
?*
?* 容器的基本屬性：矩形大小，位置(在父容器中的位置)，布局，樣式：子容器不能超出其父容器范圍，除非特殊設置允許，一般不需要這樣做，
?* 那么當父容器收縮時呢，超出大小就隱藏，這樣的隱藏是從里到外的
?*
?*
?* 我們對新建的所有容器設置這些屬性，目的就是實現容器的布局化，所有的東西都交給布局管理器，這樣如果我們向一個容器中添加組件的時候，
?* 只要調用添加方法就可以了，容器中要存儲所有的布局信息
?*
?*** 主要問題
?* 容器配置：
?* 容器屬性：
?* 容器生成：
?* 容器收縮：
?* 容器添加：
?*
?* 盡量保證父容器大于子容器，容器的一點特性就是，絕對定位的配置生成的大小不變，位置可以通過布局重新校驗，總之配置的東西不會改變
?*
?* 絕對布局的好處就是不受文檔流的影響，可控性更強
?* */?? ?
?? ?
?? ?
?? ?var searchWindow = new jh.gui.Panel({
?? ??? ?id:"searchPanel",
?? ??? ?layout: "Block",
?? ??? ?style:{"background-color":"#CCD8E7"},
?? ??? ?size:{width:700, height:400, "border":"1px solid #99BBE8"},
?? ??? ?position:{left:400*jh.gui.screen.WP,top:100*jh.gui.screen.HP},
?? ??? ?items:[{
?? ??? ??? ?style: {"background-color":"#758"},
?? ??? ??? ?layout:"Border",
?? ??? ??? ?size:{}, //這里必須定義size屬性
?? ??? ??? ?items:[{
?? ??? ??? ??? ?style: {"background-color":"#CCD8E7"},
?? ??? ??? ??? ?size:{height:25},
?? ??? ??? ??? ?options: {region:"north"}
?? ??? ??? ?},{
?? ??? ??? ??? ?style: {"background-color":"#CCD8E7"},
?? ??? ??? ??? ?size:{height:25},
?? ??? ??? ??? ?options: {region:"center"},
?? ??? ??? ??? ?layout: "Block",
?? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ?style: {"background-color":"#CCD8E7"},
?? ??? ??? ??? ??? ?size:{"border":"1px solid #99BBE8"},
?? ??? ??? ??? ??? ?options:{b:6,l:6,r:6},
?? ??? ??? ??? ??? ?layout:"Border",
?? ??? ??? ??? ??? ?items:[{
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#78d"},
?? ??? ??? ??? ??? ??? ?size:{height:40},
?? ??? ??? ??? ??? ??? ?options: {region:"north"}
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#E7E"},
?? ??? ??? ??? ??? ??? ?options: {region:"west"},
?? ??? ??? ??? ??? ??? ?size:{width:150}
?? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ?style: {"background-color":"#9BDE7E"},
?? ??? ??? ??? ??? ??? ?options: {region:"center"}
?? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ?}]
?? ??? ??? ?}]
?? ??? ?}]
?? ?});
?? ?
?? ?$("#upMenuPanel").bind("click", function() {
?? ??? ?alert($("#testForm")[0].length)
?? ??? ?$("#testForm").submit();
?? ??? ?/*

?? ??? ?var search = searchWindow.render();
?? ??? ?$("#jh-panel-129").append($("<table id='gridTable'></table>"));
?? ??? ?var mydata = [{"id":"13",invdate:"invdate",name:"name",amount:"amount",tax:"tax",total:"total",note:"note"},
?? ??? ?????????????? {"id":"13",invdate:"invdate",name:"name",amount:"amount",tax:"tax",total:"total",note:"note"}];
?? ??????? var ttt = jQuery("#gridTable").jqGrid({
?? ??? ??? ??? datatype: "local",
?? ??? ??? ??? data:mydata,
?? ??? ??? ??? colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
?? ??? ??? ??? colModel:[ {name:'id',index:'id', width:55},
?? ??? ??? ?????????????? {name:'invdate',index:'invdate', width:90,editable:true},
?? ??? ??? ?????????????? {name:'name',index:'name asc, invdate', width:100},
?? ??? ??? ?????????????? {name:'amount',index:'amount', width:80, align:"right",
?? ??? ??? ??????????? ??? ?? editable:true,editrules:{number:true}},
?? ??? ??? ?????????????? {name:'tax',index:'tax', width:80, align:"right",
?? ??? ??? ??????????? ??? ??? ?? editable:true,editrules:{number:true}},
?? ??? ??? ?????????????? {name:'total',index:'total', width:80,align:"right"},
?? ??? ??? ?????????????? {name:'note',index:'note', width:150, sortable:false,formatter:function(a,b,c){
?? ??? ??? ??????????? ??? ?? var a=a,b=b,c=c;
?? ??? ??? ??????????? ??? ?? //eval("test2(this,a,b,c)");
?? ??? ??? ??????????? ??? ?? return "<input type='checkbox' οnclick=eval(\"test2(this)\")></input>"}} ],
?? ??? ??? ?????????????? caption:"Cell Edit Example",
?? ??? ??? ?????????????? forceFit : true,
?? ??? ??? ?????????????? cellEdit: true,
?? ??? ??? ?????????????? onCellSelect:function(){alert(3535)},
?? ??? ??? ?????????????? afterEditCell: function (id,name,val,iRow,iCol) {
?? ??? ??? ??????????? ??? ?? if(name=='invdate' || name=="amount") {
?? ??? ??? ??????????? ??? ?? //jQuery("#"+iRow+"_invdate","#celltbl").datepicker({dateFormat:"yy-mm-dd"});
?? ??? ??? ??????????? ??? ?// new d();
?? ??? ??? ??????????? ??? ?? }
?? ??? ??? ?????????????? },
?? ??? ??? ?????????????? afterSaveCell : function(rowid,name,val,iRow,iCol) {
?? ??? ??? ??????????? ??? ? ?
?? ??? ??? ?????????????? }

?? ??? ??? ????????? });

?? ?*/});
?? ?
?? ?
?? ?
?? ?/**********************************************************************************************/

?? ?/**********************************************************************************************/
?? ?var $body = $("body");
?? ?//alert($("#jh-panel-1").data("config").size.width)
?? ?var config_;
?? ?function search(array) {
?? ??? ?//console.log(array[i]);
?? ??? ?for(var i=0; i<array.length; i++) {
?? ??? ??? ?if($(array[i]).data("config") != undefined) {
?? ??? ??? ??? ?config_ = $(array[i]).data("config");
?? ??? ??? ??? ?LayoutManager(array[i]);
?? ??? ??? ??? ?//console.log(array[i]);
?? ??? ??? ?}
?? ??? ?}
?? ??? ?return;
?? ?}
?? ?//search($body);
?? ?//每個容器都必須有布局，且向容器中添加組件必須通過布局管理器，不能通過append方法，因為這是沒有布局的管理，如果指定的位置有組件，則刪除，再添加
?? ?
?? ?/**
?? ? * 布局規范：既然我們使用自己的布局管理器，就不需使用文檔流來進行布局管理
?? ? * (Absolute
?? ? *???? (組件個數 無限)
?? ? * ?? ??? (組件位置 任意)
?? ? * ?? ??? (組件大小 定高，定寬)
?? ? *???? (配置默認值 高-0，寬-0)
?? ? *???? (組件添加 按相對位置進行添加)
?? ? *??? ?
?? ? *???? (特性 相對某個方向的位置不變)
?? ? * )
?? ? *
?? ? * (Block-layout:{l:0,t:0,r:0,b:0}
?? ? *???? (組件個數 1)
?? ? * ?? ??? (組件位置 上下左右偏移)
?? ? * ?? ??? (組件大小 減去(上下左右偏移 + 邊框))
?? ? *???? (配置默認值 上下左右偏移為0，邊框為0)
?? ? *???? (組件添加 只有一個位置)
?? ? *??? ?
?? ? *???? (特性
?? ? *??? ??? ??? ?擁有Block布局的容器，其組件自適應其大小
?? ? *??? ??? ??? ?唯一一個可以有邊框的布局，用于加邊框
?? ? *??? ??? ??? ?是一個精確定位的布局，相對父容器上下左右精確定位
?? ? *???? )
?? ? * )
?? ? *
?? ? * (每個容器要記錄：
?? ? * 布局方式：
?? ? * 布局位置：區域，偏移，方向
?? ? * 子容器的總個數
?? ? * 子容器所占的位置
?? ? *
?? ? *
?? ? * ?? ?布局管理器功能：
?? ? * ?? ?生成容器
?? ? * ?? ?驗證容器
?? ? * ?? ?添加容器
?? ? * ?? ?刪除容器
?? ? * ?? ?查詢容器
?? ? * ?? ?修改容器
?? ? * )
?? ? *
?? ? * (Border-layout:{p:center}
?? ? *???? (組件個數 最多5個)
?? ? * ?? ??? (組件位置 東西南北中)
?? ? * ?? ??? (組件大小 南北定高-東西定寬-中間自適應，這也是布局順序)
?? ? *???? (配置默認值 高-0，寬-0，中間填滿父容器)
?? ? *???? (組件添加 默認添加到中間)
?? ? *??? ?
?? ? *???? (特性
?? ? *??? ??? ??? ?擁有Border布局的容器，其組件自適應其大小
?? ? *??? ??? ??? ?當沒有南北，相當于向兩邊浮動中間自適應的Horizontal布局
?? ? *??? ??? ??? ?當沒有東西，相當于向兩邊浮動中間自適應的Vertical布局
?? ? *??? ??? ??? ?當沒有東南西北，相當于Block默認布局
?? ? *???? )
?? ? * )
?? ? *
?? ? * (Horizontal
?? ? *???? (組件個數 無限)
?? ? * ?? ??? (組件位置 從容器最左開始，依次向右添加)
?? ? * ?? ??? (組件大小 定寬)
?? ? *???? (配置默認值 寬-0)
?? ? *???? (組件添加 默認添加到最后，應該提供任意位置添加的接口)
?? ? *??? ?
?? ? *???? (特性 父容器大小改變，子容器相對左坐標不變)
?? ? *???? (擴展 實現向右浮動)
?? ? * )
?? ? *
?? ? * (Vertical
?? ? *???? (組件個數 無限)
?? ? * ?? ??? (組件位置 從容器最上開始，依次向下添加)
?? ? * ?? ??? (組件大小 定高)
?? ? *???? (配置默認值 高-0)
?? ? *???? (組件添加 默認添加到最后，應該提供任意位置添加的接口)
?? ? *??? ?
?? ? *???? (特性 父容器大小改變，子容器相對上坐標不變)
?? ? *???? (擴展 向下浮動)
?? ? * )
?? ? *
?? ? * (Form 應該作為組件存在
?? ? *???? (組件個數 2)
?? ? * ?? ??? (組件位置 左右)
?? ? * ?? ??? (組件大小 西中的Border布局)
?? ? *???? (配置默認值 西-0，中-滿)
?? ? *???? (組件添加 默認添加到最后，應該提供任意位置添加的接口)
?? ? *??? ?
?? ? *???? (特性 是簡單的Border布局，但具有表單校驗功能)
?? ? *???? (擴展 向下)
?? ? * )
?? ? *
?? ? * (Button 組件，當節點類型不是容器，那么其就不能添加組件
?? ? *???? (組件個數 無限)
?? ? * ?? ??? (組件位置 從容器最上開始，依次向下添加)
?? ? * ?? ??? (組件大小 定高)
?? ? *???? (配置默認值 高-0)
?? ? *???? (組件添加 默認添加到最后，應該提供任意位置添加的接口)
?? ? *??? ?
?? ? *???? (特性 父容器大小改變，子容器相對上坐標不變)
?? ? *???? (擴展 向下)
?? ? * )
?? ? * */
/*?? ?var Border_ = new jh.gui.layout.Border_();
?? ?function LayoutManager(config) {
?? ??? ?switch(config.layout) {
?? ??? ?case "Border":
?? ??? ??? ?Border_.beginLayout();
?? ??? ??? ?break; //重新設置容器的大小
?? ??? ?case "Block":break;
?? ??? ?case "Vertical":break;
?? ??? ?case "Horizontal":break;
?? ??? ?case "Absolute":break;
?? ??? ?case "Form":break;
?? ?}
?? ?}*/
?? ?
/*?? ?function f() {
?? ??? ?this.name = "name";
?? ?}
?? ?f.age = 3;
?? ?
?? ?var ttt = new f();
?? ?
?? ?alert(f.age);*/
});

轉載于:https://www.cnblogs.com/zhjhxxxjh/archive/2012/12/11/2813301.html

總結

以上是生活随笔為你收集整理的基于jquery的一个javascript前端框架实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。