日期:2014-05-16 浏览次数:20404 次
项目一忙起来就没谱,结果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 各个子节点的异步加载数据,修改节点名称,数据过滤等等。