日期:2014-05-16 浏览次数:20320 次
项目一忙起来就没谱,结果Ext JS 就抛弃了很久也没过问了。
?? 这几天稍稍有点闲暇时间,没事翻了翻那本搁置了许久的书,用Ext JS 的库做了几个小控件,也移到了项目中的一个小页面用了用。个人感觉还不错,除了加载速度稍稍有点慢。网上相传Ext 很耗性能,现在使用的人越来越少了,个人感觉,Ext 也就是个工具库,应用它要结合自己的项目,看有没有可适用性,不要因用Ext 而去用,而是要用Ext 能发挥其优势再考虑去用,然后就是怎么用,怎么去优化了。
??? 学Ext ,它自带的示例是最好的学习文档,当然,还有API,找一个小型服务器(个人使用的是resin),把ext 包部署上去,就能顺畅流利的访问ext 里面的各种文档了。
/** * @name showWindow.js * @remark 弹出一个选择员工的面板 * @author ceetao@foxmail.com * @version 1.0 * @crateDt 2009.7.10 */ var tree = new Ext.tree.TreePanel({ useArrows:true, autoScroll:true, animate:true, enableDD:true, containerScroll: true, rootVisible: false, frame: true, root: { nodeType: 'async' }, loader:new Ext.tree.TreeLoader({ dataUrl:"extjs/check-nodes.json" }), listeners: { 'checkchange': function(node, checked){ if(checked){ node.getUI().addClass('complete'); }else{ node.getUI().removeClass('complete'); } } } }); var win = new Ext.Window({ el:'test', title:'员工列表', layout:'fit', //布局方式 width:400, height:300, maximizable:true, //最大化按钮 minimizable:true, //最小化按钮,点击时需要重写事件或方法 closeAction:'hide', //关闭窗口是隐藏还是彻底关闭销毁 modal:true, //底色是否被灰不可用 constrain:true, //窗口移动不允许超出边界 animateTarget:'target', //弹出窗口动画效果 buttonAlign:'right', //按钮位置 items: [ //包含内容 tree ], buttons: [{ text:'确定', handler:function(){ var msg = '',selNodes = tree.getChecked(); Ext.each(selNodes, function(node){ if(msg.length > 0){ msg += ', '; } msg += node.text; }); Ext.Msg.show({ title: '所选员工', msg: msg.length > 0 ? msg : '没有选择员工', icon: Ext.Msg.INFO, minWidth: 200, buttons: Ext.Msg.OK }); } },{ text:'取消' }] })
?
一个弹出选择员工的列表框的js,稍稍的把自带的样例改了改,实际应用中还可以做的更复杂,比如,tree 各个子节点的异步加载数据,修改节点名称,数据过滤等等。