`
rdman
  • 浏览: 84317 次
  • 性别: Icon_minigender_1
  • 来自: 陕西
社区版块
存档分类
最新评论

loadmask在树上应用

    博客分类:
  • ext
 
阅读更多
<script language="JavaScript" type="text/javascript">
    <!--
    Ext.BLANK_IMAGE_URL = '../resources/ext/resources/images/default/s.gif';

    Ext.onReady(function() {
        var ddTree = new Ext.tree.TreePanel({
            el: 'ddTree',
            useArrows: true,
            enableDD: true,
            width: 200,
            height: 300,
            loader: new Ext.tree.TreeLoader({
                dataUrl: "xxx.ashx"
            }),
            rootVisible: false,
            root: new Ext.tree.AsyncTreeNode({}),
            listeners: {
                'beforeload': beforeloadHandler,
                'load': loadHandler
            }
        });

        ddTree.render();
        ddTree.expandAll(); // 展开所有结点

     var loading = null;
        function beforeloadHandler() { // 加载前事件响应处理
            loading = new Ext.LoadMask(Ext.get(ddTree.getEl()), { msg: "请等待 " });
            loading.show();
        }

        function loadHandler() { // 加载后事件响应处理
            loading.hide();
        }
    });
    -->
    </script>

分析问题:
1、是否是xxx.ashx出现异常?
     使用Firefox工作正常,所以排除,并且通过Firebug取到xxx.ashx输出json数据如下,所以该可能排除。
[{"id":59,"text":"web development","leaf":false,"children":[{"id":60,"text":"asp.net","leaf":false,"children":[]},{"id":61,"text":"php","leaf":false,"children":[]}]},{"id":62,"text":"web development","leaf":false,"children":[{"id":63,"text":"asp.net","leaf":false,"children":[]},{"id":64,"text":"php","leaf":false,"children":[]}]}]
2、TreePanel不兼容IE?
  这显然是个笑话。不过可以验证下,将Firebug取到的json数据放入root结点的children: json。在IE下工作正常。所以该可能排除。
3、TreeLoader在IE下工作不正常?
  暂时其它可能排除了,所以就它最可能了。
  那怎么解决呢?可以使用Ajax取到xxx.ashx传来的数据,然后转为json放入root结点的children就ok了。试下。
  Code
<script language="JavaScript" type="text/javascript">
    <!--
    Ext.BLANK_IMAGE_URL = '../js/ext/images/default/s.gif';

    Ext.onReady(function() {
        var forumTree = new Ext.tree.TreePanel( {
            el: 'forumtree',
            useArrows: true,
            enableDD: true,
            width: 200,
            height: 300,
            rootVisible: false,
            root: new Ext.tree.AsyncTreeNode({})
        });
       
        forumTree.render();
       
        // 加载提示
        var loading = null;
               
        function showLoading() {
            loading = new Ext.LoadMask(Ext.get(forumTree.getEl()), { msg: "请等待 " });
            loading.show();
        }

        function hideLoading() {
            loading.hide();
        }
       
        showLoading();
       
        // 由于使用TreeLoader在IE下无法正常加载数据,所以使用Ajax先获取数据再填充数据到root node下
        Ext.Ajax.request({
            url: 'xxx.ashx',
            success: function(request) {
                var data = Ext.util.JSON.decode(request.responseText);
                forumTree.getRootNode().appendChild(data);
                forumTree.getRootNode().expandChildNodes(true);
               
                hideLoading();
            },
            failure: function() {
                hideLoading();
               
                Ext.MessageBox.show({
                    title: '版块管理',
                    msg: '对不起,加载数据出现异常,请重试!',
                    buttons: Ext.MessageBox.OK,
                    icon: Ext.MessageBox.ERROR
                });
            }
        });
    });
    -->
    </script>
问题解决。。。

不过这样我们又会碰到一个问题,就是当CRUD这个树结点提交到Server后,如何刷新Tree。如果只是重新调用Ajax。会有重复的结点出现。
因为上面使用的是在root下用appendChild来实现。所以刷新时应该先删除root下的所有子结点。怎么删呢?
forumTree.root.removeChildNodes()?噢,sorry。这个方法不存在。简单我们自己来一个。
  Code
function removeChildNodes(node) {
            while(node.firstChild) {
                removeChildNodes(node.firstChild);
            }
 
            if(node.getDepth() != "0") {
                node.remove();
            }
        }

分享到:
评论

相关推荐

    jQuery的loadmask插件

    如果你希望在整个页面上应用遮罩,可以使用`body`作为选择器。 loadmask插件还提供了许多可配置的选项,以满足各种需求。例如,你可以设置遮罩的颜色、透明度,甚至添加自定义的提示消息。下面是一个带有自定义配置...

    jquery loadmask 插件的使用方法

    在本文中,我们将深入探讨jQuery LoadMask插件的安装、配置以及在实际项目中的应用。首先,我们需要了解基本的HTML结构,然后引入jQuery库和LoadMask插件的JavaScript文件。 1. **安装和引入** 要使用jQuery ...

    jquery.loadmask.js

    jquery.loadmask.js

    Silverlight版本的LoadMask DemoSL

    【Silverlight版本的LoadMask DemoSL】是一款基于微软Silverlight技术的应用示例,它展示了如何在用户界面(UI)上实现加载遮罩(LoadMask),为用户提供一种视觉提示,表明应用程序正在进行后台处理或数据加载。...

    jquery loadmask 简单的遮罩

    这个工具在页面加载数据或者进行异步操作时,可以为用户提供一个视觉上的反馈,表明程序正在处理请求,避免用户在等待过程中感到不耐烦或疑惑。"jquery loadmask 遮罩 好用 占用比较小"这一描述恰好体现了Loadmask ...

    jquery-loadmask-0.4[蜗牛修改版]

    jquery-loadmask-0.4[蜗牛修改版],是对jquery-loadmask-0.4 ,基于jquery,实现指定页面DOM元素、指定等候、锁屏时间等功能;语法:$("#锁定DOM元素ID").mask("正在处理,请稍等......", -10[出现廷迟时间毫秒], ...

    jquery.loadmask.zip

    Loadmask是一个jquery plugin,使用此插件可以在DOM元素加载或更改内容时为此DOM元素添加一个屏蔽层,以防止用户互动,同时起到提醒用户后台任务正在运行的作用。 使用此插件可以大大提高用户体验,此插件是一个...

    xheditor+requireJS+loadmask

    "loadmask"是jQuery的一个插件,用于在页面元素上显示遮罩层,通常用于在数据处理或加载过程中给予用户反馈,防止误操作。 在这个特定的项目中,"xheditor+requireJS+loadmask"的集成意味着开发者创建了一个功能...

    extjs mask load

    通常,当你调用某个组件(如Grid或Window)的`loadMask`方法时,会在该组件上显示一个半透明的覆盖层,表示后台正在执行加载或处理操作。 `mask`功能可以结合使用`Ext.LoadMask`类,这是一个独立的组件,可以附加到...

    Extjs 动态加载树

    标题“Extjs 动态加载树”涉及到的是一个前端开发技术话题,主要集中在使用Extjs框架构建能够动态加载数据的树形结构。Extjs是一个基于JavaScript的组件化UI库,常用于开发富客户端应用。动态加载树(Dynamic ...

    extjs实现动态树

    动态树(Dynamic Tree)是指在运行时可以动态加载、添加、删除或更新节点的树形控件。在ExtJS中,这种功能主要通过`Ext.tree.TreePanel`或其现代版本`Ext.tree.View`来实现。 一、ExtJS 动态树基础 1. `Ext.tree....

    Ext+json+jsp动态加载树

    在动态加载树的场景中,服务器通过JSP生成JSON格式的数据,这些数据包含了树节点的信息,如节点ID、文本、子节点等,然后由前端的ExtJS应用解析并展示在树形视图上。 3. **JSP(JavaServer Pages)**:JSP是Java的...

    Ext 动态树

    Ext是Sencha公司开发的一款基于...在实际应用中,结合具体的业务需求,可以通过组合这些特性来创建灵活、功能强大的树形组件。在`ExtTest`这个项目中,你可以通过查看代码和运行示例来进一步理解和实践这些概念。

    ExtJS下拉列表树控件1

    在实际应用中,我们需要根据具体需求调整这些配置和逻辑,例如,根据数据动态加载树结构,或者实现过滤和搜索功能。同时,为了提高用户体验,还可以考虑添加异步加载(使用`loadMask`和`loadingText`)和错误处理...

    ExtJs TreePanel应用

    9. **loadMask**: 是否在加载数据时显示遮罩层,提供更好的用户体验。 TreePanel还支持多种事件,例如`itemclick`, `itemcontextmenu`, `beforeitemexpand`等,这些事件可以绑定回调函数以处理用户的交互行为。例如...

    js遮罩层插件

    JavaScript 遮罩层插件是一种常见的前端开发工具,它用于在页面上创建一个半透明的覆盖层,通常用于在用户等待加载数据或执行异步操作时提供视觉反馈。在这个场景中,我们讨论的插件可能名为“LoadMask”或者“lwb_...

    Extjs4.0+MVC模式+存动态加载

    3. **动态加载树叶子节点(Tree Leafs)**:对于大型数据树,可以只在用户展开节点时请求子节点数据。`Ext.tree.TreePanel`的`load`事件和`store`的`loadData`方法可用于实现这一功能。 **后台Servlet模拟JSON数据*...

    extjs ajax tree(js动态树,无需递归)

    ExtJS是一个功能丰富的JavaScript UI库,提供了多种组件,包括表格、表单、树形视图等,用于构建富客户端应用。 在ExtJS中,创建一个AJAX树通常涉及以下几个步骤: 1. **引入ExtJS库**:首先,你需要在HTML页面中...

    EXTJS动态树的实现举例

    在EXTJS中实现动态树,主要是通过EXTJS的TreePanel组件来完成,下面将详细介绍EXTJS动态树的实现过程及其相关知识点。 1. TreePanel组件: TreePanel是EXTJS中用来展示树形结构数据的组件。它包含节点(Node)、根...

    再探Ext中TreePanel控件和TabPanel控件搭配测试

    在实际应用中,我们可以通过配置TreePanel的属性来定制其外观和行为,例如设置rootVisible来决定是否显示根节点,或者使用loadMask来显示加载遮罩。 接着,我们来看TabPanel。TabPanel是ExtJS提供的一种布局管理器...

Global site tag (gtag.js) - Google Analytics