归属
[置顶] Lite-Ext 适合WebPage的轻量级Ext
在 google code 持续更新,这里停止维护
很荣幸 该组件被 <<Extjs 高级程序设计>> 采纳使用 :)
利用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(); }}); });
使用注意:
暂时没有 destroy , close 方法的解决: (2.5开始增加close方法 )
我当初用ext window的时候很少close,closeaction我设的都是hide,考虑尽量重用,修改win.body 就可以重用一个window ,因为建立一个window很耗资源的
不过 destroy 为了完备性 方法会加进去的。
关键是注意 window的重用就行了,看看alertlite,所有的alert重用一个window
不过 destroy 为了完备性 方法会加进去的。
关键是注意 window的重用就行了,看看alertlite,所有的alert重用一个window
窗体操作:
window.body 为窗体的内容显示区域,为 Ext.Element 类型,可在建立窗体后对 window.body 用 Ext.DomHelper 的相关工具函数进行操作来填充修改窗体。