Ext JS 学习笔记2

最新推荐文章于 2024-10-31 15:25:20 发布

ceetao

最新推荐文章于 2024-10-31 15:25:20 发布

阅读量124

点赞数

分类专栏： Ext JS 文章标签： EXT json 应用服务器

Ext JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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