WindowLite 轻量级的Ext窗口

 

归属

 

 

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

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

 

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

关闭窗口演示@google code

 

隐藏窗口演示@google code

修改窗体演示@google code

任务栏演示@google code

 

 

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

 

跟风整理了部分到 google code 可 svn 直接下载新版(持续维护) : [e-mail]

 

 

实现要点：

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();
		
				}});
    });

 

使用注意：

暂时没有 destroy , close 方法的解决： (2.5开始增加close方法 )

我当初用ext window的时候很少close，closeaction我设的都是hide，考虑尽量重用,修改win.body 就可以重用一个window ,因为建立一个window很耗资源的 
不过 destroy 为了完备性 方法会加进去的。
关键是注意 window的重用就行了，看看alertlite，所有的alert重用一个window

窗体操作：

window.body 为窗体的内容显示区域，为 Ext.Element 类型，可在建立窗体后对 window.body 用 Ext.DomHelper 的相关工具函数进行操作来填充修改窗体。

评论

4 楼 you 2009-06-09  

Window的作用绝不会只是show一些固定内容吧

如果要show一些动态的信息呢？
比如是show一个url...

可以实现么？

3 楼 yiminghe 2009-05-25  

you 写道

Great!
有个小问题，Alert里面的按钮怎样才能居中？
buttonAlign:"center",或者center:true, 都无效

暂时没有实现，重用的是 window 的 button ，window 的 button 仿照 windowsxp 都是float;right ....

2 楼 you 2009-05-25  

Great!
有个小问题，Alert里面的按钮怎样才能居中？
buttonAlign:"center",或者center:true, 都无效

1 楼 freespace 2009-04-26  

收藏了，以后基于ext core这个东东的组件会多起了，毕竟ext core很小巧，适合互联网的web开发。