iteye_566 2010-06-22 13:52
浏览 231
已采纳

求一个例子：extjs树形菜单动态从后台加载节点的实例

本人目前在自学extjs,读的相关书籍是《深入浅出extjs》但是对于本书中的树形菜单动态加载节点以及相关节点的加载和点击事件，总是不能写出满意的例子来，希望各位中能抽出时间的帮忙写一个完整的实例，（可以写成jsp+servlet的，容易一些)要求：
首先，加载所有节点，然后再点击节点的时候能够进行请求提交。当然了，所有的节点都是动态从servlet中取到的。谢谢了。。。

  • 写回答

3条回答 默认 最新

  • upup1000 2010-06-22 15:35
    关注

    TreeSevice
    [code="java"]
    package name.sencha;

    public class TreeService {
    public String getLevel1Nodes(){
    return "[{text:\"北京\", id:\"1\"},{text:\"吉林\", id:\"2\"}]";
    }

    public String getLevel2Nodes(){
    return "[{text:\"丰台\", id:\"1-1\"},{text:\"海淀\", id:\"1-2\", leaf:true},{text:\"东城\", id:\"1-3\", leaf:true},{text:\"西城\", id:\"1-4\", leaf:true}]";
}

public String getLevel3Nodes(){
    return "[{text:\"长春\", id:\"2-1\", leaf:true},{text:\"吉林\", id:\"2-2\", leaf:true},{text:\"白山\", id:\"2-3\", leaf:true},{text:\"白城\", id:\"2-4\", leaf:true}]";
}

public String getLevel4Nodes(){
    return "[{text:\"丰台1区\", id:\"1-1-1\", leaf:true},{text:\"丰台2区\", id:\"1-1-2\", leaf:true},{text:\"丰台3区\", id:\"1-1-3\", leaf:true},{text:\"丰台小学\", id:\"1-1-4\", leaf:true}]";
}

public String getTreeNodeS(String id){
    if(id==null||id.length()==0){
        return "[]";
    }else if(id.equals("0")){
        return getLevel1Nodes();
    }else if(id.equals("1")){
        return getLevel2Nodes();
    }else if(id.equals("2")){
        return getLevel3Nodes();
    }else{
        return getLevel4Nodes();
    }
}

    }

    [/code]

    TreeServlet :
    [code="java"]
    package name.sencha;

    import java.io.IOException;

    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    public class TreeServlet extends HttpServlet{
    @Override
    public void doPost(HttpServletRequest request, HttpServletResponse response){
    String id = request.getParameter("id");
    if(id!=null&&id.length()>0){
    TreeService service = new TreeService();
    try {
    response.setCharacterEncoding("UTF-8");
    response.getWriter().write(service.getTreeNodeS(id));
    } catch (IOException e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
    }
    }
    }

    @Override
public void doGet(HttpServletRequest request, HttpServletResponse response){
    doPost(request, response);
}

    }

    [/code]

    web.xml:
    [code="java"]

    treeservlet
    name.sencha.TreeServlet


    treeservlet
    /tree

    [/code]

    html :
    [code="html"]
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">



    Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = "../../ext-3.0.0/resources/images/default/s.gif"; var rootNode = new Ext.tree.AsyncTreeNode({ text : "根", id : "0", expanded : true }); var tree = new Ext.tree.TreePanel({ root : rootNode, loader : new Ext.tree.TreeLoader({ dataUrl : "../../tree" }), width : 200, height : 400 }); tree.on("beforeload" , function(node){ tree.loader.baseParams.id = node.id; }); tree.on("click", function(node){ Ext.Ajax.request({ url : "../../tree", params : {id:1}, success : function(res){ var txt = res.responseText; var obj = Ext.decode(txt); alert(obj.length); } }); }); tree.render(Ext.get("tree_div")); });

    Insert title here



    [/code]

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

  • extjs在动态加载的时候，数据冲掉了
    2015-04-03 02:12
    回答 4 已采纳 哎，找到问题了，用错函数了，执行顺序除了问题啊，将beforerender改为added后就可以了
  • ExtJs6.0如何修改树节点名称？
    2016-03-24 01:58
    回答 3 已采纳 setConfig() http://docs.sencha.com/extjs/6.0/6.0.1-classic/#!/api/Ext.data.NodeInterface-method-set
  • extjs 4：仅按特定ID显示树面板节点 ajax javascript mysql php
    2013-02-12 09:16
    回答 1 已采纳 I think this will work for what you want: <?php mysql_connect("localhost", "root", "")
  • extjs做的动态树
    2009-05-19 22:40
    在这个名为“动态树”的示例中，我们将深入探讨EXTJS如何实现动态的树形控件。 树形控件在Web应用中广泛用于展示层次结构的数据，例如文件系统、组织架构或菜单导航。EXTJS提供了一个内置的TreePanel组件，可以轻松...
  • Extjs加载动态加载js文件 javascript
    2016-08-15 06:37
    回答 2 已采纳 你这个需求也太怪了。js不是理应就一次全部加载完成的么。 当然，你需要的话，在点击按钮的事件中，可以这么做。 ![图片说明](https://img-ask.csdn.net/upload/201
  • EXTJS4 SpringMVC框架的一个问题 spring
    2015-09-24 08:26
    回答 4 已采纳 可以参考一下 《EXT JS权威指南》 该框架控件都是封装好的，就是初始化调用的时候对于刚接触的选后来说不太习惯。 如果JS底子比较好的话，建议你上官网看一下demo ，像这种特别基本的东西，可以
  • EXTJS textarea内容有按回车键换行，之后无法提交文本域的值到后台 前端
    2018-07-11 08:58
    回答 2 已采纳 ``` 那个是\n回车符号啊。。ie下回车由\r\n组成，非ie是\n，要统一你应该替换掉\r，将r变为n。而且replace只替换一次，多个要用正则 xxxx.replace(
  • ExtJS 学习总结 （二）-- 项目实例
    2015-09-08 14:10
    isskingdom的博客 本文以项目实例来讲解使用ExtJS的MVVM架构开发的过程。本项目实例的开发环境是Tomcat+SpringMVC+Ibatis+ExtJS，其中Tomcat、SpringMVC与Ibatis的相关配置不在本文范围。在ExtJS中与后台接口交互的地方会简单阐述并给...
  • ExtJS 5.1，使用PHP从数据库加载网格数据 php
    2015-07-10 13:11
    回答 2 已采纳 Your PHP code doesn't return a valid JSon. See this fiddle works correctly: https://fiddle.sencha
  • 请教一个extjs组件的问题
    2017-08-24 08:40
    回答 6 已采纳 你renderTo到指定的div容器，div设置好大小位置不就好了？
  • Extjs4使用mvc模式，封装Store层的ArrayStore无法动态加载后台数据 mvc
    2015-07-27 10:39
    回答 2 已采纳 还是自己回答吧，没有悬赏的分。。 我发现把extend：继承的ArrayStore改成Store就好了，具体原因没时间研究，刚学了两个星期，工作需要不得不先做。同时我还发现了extjs4版本的g
  • 【面试题系列|前端面试题】前端高频面试题总结（2021年最新版）
    2020-12-23 17:51
    麦田上的字节的博客 面试过不少前端从业者，简历写的平平淡淡，别人会的技能他也都会，看起来什么都掌握一些；有些会请过来当面聊一下，有些就直接拒绝了（如果是公司内要求独立完成项目的岗位，简历里放很多学习时候的DEMO项目，没有...
  • ExtJS 快速反入门指南
    2017-08-07 10:18
    叶林的博客 单。 更多 ExtJS应用开发解决方案及案例,详见: ... 《ExtJS 快速反入门指南》专业ExtJS 应用解决方案成都蓝源信息技术...一、ExtJS 框架简介.........................................................................
  • ExtJS学习：MVC模式案例
    2015-01-26 14:04
    萝卜耳朵的博客 MVC模式案例（一） 实现效果：  由上图可知，网页的布局有三部分组成：顶部标题、左侧菜单和右侧主题内容显示。这里我们对案例的布局有个初步印象，方便今后我们的进一步学习。  了解了项目的最终效果，下面来...
  • ExtJS快速入门学习指南
    2018-08-04 18:02
    从放弃到开始的博客 前言：个人理解ExtJS其实 是一个Ajax 框架，是一个用javascript 写的。与EasyUI差不多的一个框架。学习并不难，先找好一定的学习资料与文档，然后再练习几个demo，这样大概就有所了解了。具体精通，那只有等你自己在...
  • ExtJS快速入门指南
    2013-11-15 14:40
    励志的蜗牛的博客 一、ExtJS 框架简介.......................................................................................................................... 2 二、如何使用Ext.....................................
  • extjs入门-1
    2016-01-15 17:03
    擦肩而过的博客 一、ExtJS 框架简介.......................................................................................................................... 2 二、如何使用Ext.....................................
  • Struts2 + Spring + Hibernate + ExtJS
    2014-03-09 11:21
    iteye_8039的博客 Struts2、Spring、Hibernate整合ExtJS SSHExtTree 百度文库提供下载：... 开标题就知道是Struts、Spring、Hibernate、ExtJS的Tree实例文档，其中包括Filter功能的checkNodeTree、 comboBox...
  • mxGraph 用户手册中文 – JavaScript客户端
    2020-04-27 17:14
    IT博客技术分享的博客 如果您正在查找JavaScript的条形图、 饼图、甘特图, 可以参考谷歌图表项目，或类似的信息 一个图是由顶点，也称为节点，以及边（节点之间的连接线）组成 。图论中没有定义图究竟如何来视觉呈现。本手册中术语图元 ...
  • 没有解决我的问题, 去提问

悬赏问题

  • ¥15 做个有关计算的小程序
  • ¥15 MPI读取tif文件无法正常给各进程分配路径
  • ¥15 如何用MATLAB实现以下三个公式（有相互嵌套）
  • ¥30 关于#算法#的问题：运用EViews第九版本进行一系列计量经济学的时间数列数据回归分析预测问题 求各位帮我解答一下
  • ¥15 setInterval 页面闪烁，怎么解决
  • ¥15 如何让企业微信机器人实现消息汇总整合
  • ¥50 关于#ui#的问题：做yolov8的ui界面出现的问题
  • ¥15 如何用Python爬取各高校教师公开的教育和工作经历
  • ¥15 TLE9879QXA40 电机驱动
  • ¥20 对于工程问题的非线性数学模型进行线性化