ExtJs 学习笔记2

项目一忙起来就没谱，结果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 各个子节点的异步加载数据，修改节点名称，数据过滤等等。