仿ext写了个panel用jquery写的！

相关依赖的东西在博客中可以下载，大家给看看！我的思路对嘛？

EasyJs.Panel=function(config){ 
	EasyJs.Panel.superclass.constructor.call(this,config);
}
EasyJs.extend(EasyJs.Panel,EasyJs.Component,{
	renderTo: document.body,
	initTool:function(panelHeader){
		if(this.collapsible||this.minimizable||this.maximizable||this.closable){
			var panel_tool=$('<div class="panel-tool"></div>');
			if(this.closable)$('<div class="panel-tool-close"></div>').appendTo(panel_tool);
			if(this.maximizable)$('<div class="panel-tool-max"></div>').appendTo(panel_tool);
			if(this.minimizable)$('<div class="panel-tool-min"></div>').appendTo(panel_tool);
			if(this.collapsible)$('<div class="panel-tool-collapse"></div>').appendTo(panel_tool);
			panel_tool.appendTo(panelHeader);
		}
	},
	initBody:function(panel){
		$('<div id="'+this.getID()+'body" class="easyui-panel panel-body" style="width:'+(this.width-22)+'px; height:'+(this.height-48)+'px; padding: 10px; display: block;"></div>').appendTo(panel);
	},
	initComponent:function(){
		var panelOutside=$("<div class='easyui-panel-title' id="+this.getID()+"></div>");
		var panel=$('<div class="panel" style="display: block; width:'+this.width+'px;"></div>');
		var panelHeader=$('<div class="panel-header" style="width:'+(this.width-12)+'px;">');
			$('<div class="panel-title panel-with-icon">'+(this.title?this.title:"")+'</div>').appendTo(panelHeader);
		if(this.iconCls){
			$('<div class="panel-icon '+this.iconCls+'"></div>').appendTo(panelHeader);
		}
		this.initTool(panelHeader);
		panelHeader.appendTo(panel);
		this.initBody(panel);
		panel.appendTo(panelOutside);
		panelOutside.appendTo(this.getRenderTo());
		delete this.renderTo;
		this.initItems();
		this.initHtml();
		this.initEvent();
	},
	initItems:function(){
		var items=this.items;
		if(items&&items.length>0){
			var count=items.length;
			var pBody=$("#"+this.getID()+"body");
			for(var i=0;i<count;i++){
				$("#"+items[i].getID()).appendTo(pBody);
			}
		}
	},
	initHtml:function(){
		var html=this.html;
		if(html){
			$("#"+this.getID()+"body").append(html);
		}
	},
	initEvent:function(){
		var id=this.getID();
		var panel=$("#"+id),tool=panel.find("div.panel-tool"),tools=tool.find("> div");;
		tools.bind("mouseover",function(){$(this).addClass("panel-tool-over");});
		tools.bind("mouseout",function(){$(this).removeClass("panel-tool-over");});
		tool.find("div.panel-tool-close").click(function(e) {
		  panel.find("div.panel").hide();
		  e.stopImmediatePropagation();//阻止剩余的事件处理函数执行并且防止事件冒泡到DOM树上
		});
		tool.find("div.panel-tool-collapse").bind('click', function(e) {
			var th=$(this),newClass="panel-tool-expand",thBody=$('#'+id+'body');
			if(th.attr("class").indexOf(newClass)>-1){
				th.removeClass(newClass);
				thBody.slideDown('slow');
			}else{
				th.addClass(newClass);
				thBody.slideUp('slow');
			}
			e.stopImmediatePropagation();
		});
		tool.find("div.panel-tool-min").bind('click', function(e) {
			 panel.find("> div.panel").hide();
			 e.stopImmediatePropagation();
		});
	}
});
$(function(){
var t=new EasyJs.Panel({
	width:500,
    height:200,
    title:'panel',
	iconCls:"icon-save",//图标 className
	collapsible:true,//可折叠
	minimizable:true,//可以最小话
	maximizable:true,//可以最大化
	closable:true,//可以关闭
	items:[new EasyJs.Panel({width:100,height:100,title:"child title",collapsible:true,closable:true})],
	html:"ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd"
});
}
)

http://nmgxzm2001.iteye.com/blog/1316262

下了源码，看了下，是广告，easyui的广告。老大啊，别这样啊。

晕死 easyui 又没给楼主钱

看清楚好吗，只是用的easyui的图片和css.

话说代码格式太紧凑 看得太累.
重造轮子觉得没什么意思。
刚开始觉得ExtJS太复杂了，自己写个简单得。
后来发现自己写得扩展性不好不够用，再垒代码。
后来发现复杂度有点似曾相识。
最后写的跟ExtJS中得一样华丽，发现复杂得自己都不想看。
回头看看项目工期，然后悲剧发生了..

我要传递的是这些框架实现的原理和思想，如果是高手请绕行

需要了解这些框架背后的思想。大家一起努力。