可折叠的面板

[置顶] Lite-Ext 适合WebPage的轻量级Ext

在 google code 持续更新，这里停止

演示@google code

 

 

本以为用 windowlite 就可以了，偏偏有需求要 dock 的效果，放一长条在那占位置，点的话就展开，实现下试试。



效果：

 

使用代码:

 

//一般定位
	var c=new Ext.ux.CollapseLite({
		//标题头
		title:'一般定位测试头',
		//内容
		content:'一般定位测试content',
		//渲染容器id
		renderTo:'test1'
	});
	
	c.on("expand",function(){
		alert("expand occur !");
	});		
	
	c.on("collapse",function(){
		alert("collapse occur !");
	});
			
	//一般定位暂时不支持direction r
	new Ext.ux.CollapseLite({
		title:'一般定位测试头 - 不支持direction r',
		content:'一般定位测试content',
		direction:'r'
	});	
	
	
	//绝对定位		
  new Ext.ux.CollapseLite({
		title:'绝对定位测试头',
		content:'绝对定位测试content',
		style:'position:absolute;left:100px;top:300px;width:500px;'
	});
	
	
	
	//绝对定位支持direction r		
  new Ext.ux.CollapseLite({
		title:'绝对定位测试头 - 支持direction r',
		content:'绝对定位测试content',
		style:'position:absolute;left:100px;top:600px;width:500px;',
		//收缩方向
		direction:'r'
	});

 

 

/*
	@author:yiminghe.iteye.com
	v1.0(20090826) 做个可以折叠，展开的panel吧，注意绝对定位与其他定位分别处理。
	v1.1(20090902) 增加alignCollapseBar配置，绝对定位时重新对齐collapsebar，状态查询isExpanded
	
*/