`
atgoingguoat
  • 浏览: 195172 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

ExtJS DWR 入门级代码 源代码

    博客分类:
  • js
阅读更多



 

  这两天在搞一个项目升级,用户要操作方便。要用树操作。在网上找了半天,发现 extjs tree 文档比较多,所以用它了。因为原有的项目是用 dwr ,所以,这里动态数据也用它了。其它不多说了。

见代码。全工程代码,用 JBuilder 2006 开发的。

 




 

 

 

 

如果改成复选框。只要改点小地方。 node  -->checked : false,

再加个 :

 

    tree.on('checkchange', function(node, checked) {
                        node.expand();
                        node.attributes.checked = checked;
                        node.eachChild(function(child) {
                                    child.ui.toggleCheck(checked);
                                    child.attributes.checked = checked;
                                    child.fireEvent('checkchange', child,
                                            checked);
                                });
     }, tree);

 

 

 

全代码如下:

 

Ext.onReady(function(){  
 
    Ext.BLANK_IMAGE_URL = "resources/images/default/s.gif";  
      
    var root = new Ext.tree.TreeNode({  
        text:'主菜单',  
        expanded:true 
    });  
      
    var tree = new Ext.tree.TreePanel({  
        root:root,
        animate : true,
        border : false,
        autoHeight : true,
        useArrows:true,
        autoScroll:true,
        animate:true,
        enableDD:true,
        containerScroll: true,
        rootVisible: false,
        frame: true,
       
        width:200  
    });  
      
    function queryTree()  
    {  
        var menu = new Array();  
          
        DWREngine.setAsync(false); //同步方法
          
        //取得根结点下的第一级子菜单  
        menuService.queryFirstMenu(0, function(data){
        //0代表根结点ID是0  
            for(var i = 0; i < data.length; i++)  
            {  
                var node = new Ext.tree.TreeNode({  
                    text:data[i].menuName,  
                    id:data[i].menuId,  
                    url:data[i].menuUrl,  
                    allowDrag : false,
                    checked : false,
                    expanded:true
                });  
                  
                root.appendChild(node);  
                  
                menu.push(node);  
            }  
        });  
          
        //循环队列  
        for(var i = 0; i < menu.length; i++)  
        {  
            menuService.queryFirstMenu(menu[i].id, function(data2){  
                for(var j = 0; j < data2.length; j++)  
                {  
                    var node = new Ext.tree.TreeNode({  
                        text:data2[j].menuName,  
                        id:data2[j].menuId,  
                        url:data2[j].menuUrl,
                        allowDrag : false,
                        checked : false,
                        expanded:true
                    });  
                      
                    menu[i].appendChild(node);  
                      
                    menu.push(node);  
                }  
            });  
        }  
          
        DWREngine.setAsync(true);  
    }  

          

    queryTree();  
    tree.setRootNode(root);

    tree.on('checkchange', function(node, checked) {
                        node.expand();
                        node.attributes.checked = checked;
                        node.eachChild(function(child) {
                                    child.ui.toggleCheck(checked);
                                    child.attributes.checked = checked;
                                    child.fireEvent('checkchange', child,
                                            checked);
                                });
     }, tree);
   
    tree.render(Ext.getBody());  
      
}); 

  • 大小: 21.2 KB
  • 大小: 4.7 KB
  • 大小: 26.9 KB
  • 大小: 19.6 KB
分享到:
评论

相关推荐

    ExtJS快速入门 ExtJS快速入门 ExtJS快速入门

    ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS...ExtJS快速入门 ExtJS快速入门 ExtJS快速入门ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门

    extjs dwr hibernate spring

    extjs dwr hibernate spring 整合的树!

    ExtJs DWR扩展 DWRProxy、DWRTreeLoader、DWRGridProxy

    ExtJs和Direct Web Remoting (DWR) 是两种在Web应用程序中实现富客户端交互的技术。ExtJs是一个强大的JavaScript框架,用于构建用户界面,而DWR则是一个允许JavaScript直接调用服务器端Java方法的库,无需AJAX的...

    ExtJs+ Dwr 页面登入功能

    DWR是一种JavaScript到Java的反向AJAX库,它允许前端JavaScript代码直接调用Java后台方法,从而实现了前端与后端的无缝交互。DWR简化了AJAX开发,使得开发者无需处理XMLHttpRequest对象和JSON或XML数据格式化,可以...

    extjs_dwr整合例子

    **ExtJS** 是一个JavaScript库,主要用于构建桌面级的Web应用。它提供了一套完整的UI组件,包括数据绑定、布局管理、表单处理等,让开发者可以创建出美观且功能丰富的用户界面。ExtJS基于MVC(Model-View-Controller...

    文具申请系统 Extjs dwr spring 实现

    4. **源代码分析**:项目中的"电子书"和"源代码"部分可能包含详细的设计文档、教程和实现代码。通过这些资源,开发者可以深入理解系统架构,学习如何整合Extjs、Dwr和Spring,以及如何设计一个完整的业务流程,包括...

    Extjs3.1例子源代码

    Extjs3.1例子源代码Extjs3.1例子源代码Extjs3.1例子源代码vv

    深入浅出ExtJS 源代码

    深入浅出ExtJS 源代码深入浅出ExtJS 源代码深入浅出ExtJS 源代码深入浅出ExtJS 源代码深入浅出ExtJS 源代码

    Inter(extjs 的案例源代码)源代码

    【Inter(extjs 的案例源代码)源代码】这个资源是一个基于ExtJS的示例集合,主要展示了在实际项目中如何运用这个强大的JavaScript框架。ExtJS是一个用于构建富客户端Web应用的框架,它提供了丰富的组件库,包括数据...

    EXTJS高级程序设计源代码6-4

    EXTJS高级程序设计源代码6-4 EXTJS高级程序设计源代码6-4

    EXTJS高级程序设计源代码6-3

    EXTJS高级程序设计源代码6-3 EXTJS高级程序设计源代码6-3

    extjs4.0教程源代码

    extjs4.0教程源代码,精品分享

    ExtJs4 进销存 源代码

    这个进销存源代码示例展示了如何利用ExtJs4实现库存管理、销售管理和采购管理的核心功能,帮助开发者更好地理解和应用ExtJs4在实际项目中的实践。 进销存系统是企业管理中不可或缺的一部分,它涵盖了采购...

    EXTJS高级程序设计源代码6-2

    EXTJS高级程序设计源代码6-2 EXTJS高级程序设计源代码6-2

    李赞红老师 轻松搞定ExtJS 实例 源代码

    北大青鸟 李赞红老师 轻松搞定ExtJS 实例 源代码

    ExtJS MVC入门级开发案例

    这个"ExtJS MVC入门级开发案例"是一个理想的学习资源,适合初学者理解并掌握如何在ExtJS中应用MVC架构。 **1. MVC模式详解** Model(模型):负责处理应用程序的数据逻辑,与后端服务器进行交互,获取和存储数据。...

    开发extjs程序可查看页面源代码

    本资源文件“FullSource”旨在解决这个问题,它提供了查看ExtJS程序实际源代码的能力。这通常通过某种方式如插件、扩展或者特定的开发工具实现,使开发者能透明地观察到应用程序的运行状态,包括生成的DOM元素、CSS...

Global site tag (gtag.js) - Google Analytics