WindowLite 轻量级的Ext窗口

归属

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

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

很荣幸 该组件被 <<Extjs 高级程序设计>> 采纳使用 :)

关闭窗口演示@google code

隐藏窗口演示@google code

修改窗体演示@google code

任务栏演示@google code

利用ext core重新简化实现 Ext.Window ，单用的话更节省网络带宽。

跟风整理了部分到 google code 可 svn 直接下载新版(持续维护) : lite-ext@code.google

实现要点：

1.注意 extjs window 背景的设置 < 左><右><中> </中> </右> </左>

2.用户初始设置是设置窗体body的大小

3.注意 调节大小时 ，body 大小的得出 ，因为 Extjs Resizeable 的 resize 事件得到的是 整个窗体调节后的大小 而不是窗体body的大小，技巧是 根据 调节前后窗体的大小差 == 调节前后窗体body的大小差 ,来得出调节后窗体body的大小进行设置

4.setHeight,setWidth,setSize Ext-core已经自动减去 边框长度和padding      实际上是 setOffsetHeight setOffsetWidth setOffsetSize

5.增加示例实现 alert

AOL Skin:

3.0 增加 taskbar

/*
	http://yiminghe.iteye.com/blog/374182
	v1.0(20090424) 偷窃ext window素材以及利用ext core,DD,Resizable 简化重新实现Window
	v1.1(20090424) 修正ie显示问题
	v1.5  抄袭extjs window 拖放ghost实现  
	v1.6(20090426) 增加底部按钮设置（静态，动态）
	v1.6.5(20090427) 修正resize 工具条上移，计算button高度,难点:resize后动态按纽处理
	v1.7(20090428) ie6 按钮底部多出bug修正,overflow要设置hidden
	v1.8(200900504) 通过css2.1 validation
	v2.0(200900509) 提升初始化效率,修改宽度高度计算,setHeight,setWidth,setSize Ext-core已经自动减去 边框长度和padding 
		实际上是 setOffsetHeight setOffsetWidth setOffsetSize 
	v2.0.1(200900512)	隐藏设置高度为0，防止占用页面空间
	v2.2(200900525) 增加利用windowlite 编写 alertlite 示范,fix ie6 height:100% bug
	v2.3(200900610) 增加窗体阴影Shadow-min.js设置，resize错误修正,利用闭包实现alert单例模式
	v2.3.5(200900611) 增加设置：defaultButton，buttonAlign(默认右对齐)，方法：focusButton,removeButton,修正removeAllButtons，见示例html
	v2.4(200900613) 逼近extjs window:增加方法autoHeight,根据内容自适应高度,resize计算改变,增加show方法参数animEl,alertlite 增加icon以及callback设置
	v2.4.2(20090616) 增加closable配置，修正没有默认按钮焦点设置问题
	v2.5(20090723) 增加 maximizable 配置(窗口最大化处理).
	v2.5.1(20090728) 增加 closeAction 配置，默认hide,可以完全内存中移除window
	v2.5.2(20090730) ie6 select 突出bug解决,close内存释放改进
	v2.5.3(20090811) width不设置时，自动宽度大小调整
	v2.8(20090812) show 方法调整，option 配置，添加 constrainToView ，避免浏览器出现滚动条，
									双击标题关闭窗口，点击窗体使得所属窗口到最前端，
									优化代码结构，支持多达1.5M table数据直接渲染到 窗体body ，参见：windowlite_close.html
	v2.9(20090902) 代码整理，加入 AOL 皮肤，详见示例
	v2.9.2(20090903) 加入 tools 配置 [{cls:'',click:function(evt){}},...] ,添加其他图标
	v2.9.5(20090909) 修正 constrainToView 在浏览器出现滚动条时，仍然全部保留在当前可见区域中。(show({x:,y:})):x,y应为当前窗口可见区域,
									 show (x,y ,constrainToView:true)保证窗口的四个角有一个角在x,y位置，参见window的右键菜单功能表示
									 
	v2.9.8(20090914)	对浏览器出现滚动条时的 constrainToView 行为大量修正，保证window时出现在视窗里面。具体：
	 		              最大化窗口里在window弹出的浏览器滚动条问题修正,body - > overflow:auto,left,top->scrollTop,scrollLeft
				            注意滚动条在firefox3中占据viewsize !
  v2.9.8.2(20090919) 全屏时firefox修正		
  v2.9.8.5(20090927) 增加minHeight,maxHeight配置，可单独调用constrainHeight.
  v3(20091010) 重要更新：增加 taskbar 配置，可以出现 窗口管理栏了，参见 windowlite_taskbar.html            
*/

var mwindow = new Ext.ux.WindowLite({			
			//窗体内容的大小，注意不是窗体的大小
        width:1000,
        height:300,
        html:'<table width="100%"><tr><td>zzzzzqq</td><td width="90%">zzzzzqqddddddddddddddddddddddddddddddddddddddddd</td></tr></table>',
        //是否支持拖放,请载入 DDCore-min.js
        drag:true,
        title:'请选择职位',
        
        //是否允许最大化窗口
        maximizable:true,
        
        shadow:'frame',//默认sides
				shadowOffset:6,//默认4
        
        //是否有关闭按钮,默认true
        //closable :false,
        
        //设置默认焦点按钮
        //defaultButton:'AlertLite 1',
        //静态设置按钮       
        buttons:[{
        	text:'AlertLite 1',
        	handler:function(evt) {
        		Ext.ux.MessageBoxLite.alert({title:'AlertLite 1',
        			info:'设置按钮1展示一下',
        			icon:['error','info','warning','question'][Math.floor(Math.random()*4)],
        			callback:function(){
        				alert('icon alert 88');
        			}
        		});
        		evt.stopEvent();
        	}
        },
        {
        	text:'AlertLite 2',
        	handler:function(evt) {
        		Ext.ux.MessageBoxLite.alert({title:'AlertLite 2',
        			info:'设置按钮2展示一下long的'
        		});
        		evt.stopEvent();
        	}
        }
        ],
        //是否模态窗口
        modal:true,
        //是否支持用户调节大小      	
        resizable:true
   });	
	//动态设置按钮,scope 可以设置，默认 mwindow
	mwindow.addButton({text:'动态按钮',handler:function(){
		alert('fun');
		this.removeAllButtons();
	}
	//,scope:xx
	});
	mwindow.addButton({text:'动态按钮2',handler:function(){
		alert('fun2');
		this.addButton({text:'动态按钮3',handler:function(){
			this.removeButton('动态按钮3');
		}
		});
	}
	//,scope:window
	});
  mwindow.on('hide',function(){
  	//alert('窗体隐藏了');
  });
   mwindow.on('beforehide',function(){
  	 //if(!confirm('是否隐藏'))
  	 	//	return false;
  });
    Ext.fly('action_a').on('click', function(evt) {
    	 var xy=evt.getXY();
    	 mwindow.show({
    		//animateTarget:'action_a',
    		x:xy[0],
    		y:xy[1],
    		constrainToView:true
    	});
    	
    });
    Ext.fly('action_c').on('click', function() {
        (mwindow.hide());
    });
    Ext.fly('action_b').on('click', function() {
        mwindow.addButton({text:'动态按钮xx',handler:function(){
					mwindow.removeAllButtons();
		
				}});
    });