`

Extjs 静态tree

阅读更多
Ext.onReady(function(){
    Ext.QuickTips.init();
  var mytree=new Ext.tree.TreePanel({
      el:"container",
      animate:true,
      title:"Extjs静态树",
      collapsible:true,
      enableDD:true,
      enableDrag:true,
      rootVisible:true,
      autoScroll:true,
      autoHeight:true,
      width:150,
      lines:true
  });
 
  //根节点
  var root=new Ext.tree.TreeNode({
      id:"root",
      text:"控制面板",
      expanded:true
  });
 
  //第一个子节点及其子节点
  var sub1=new Ext.tree.TreeNode({
      id:"news",
      text:"新闻管理",
      singleClickExpand:true
  });
  sub1.appendChild(new Ext.tree.TreeNode({
      id:"addNews",
      text:"添加新闻",
      href:"http://www.baidu.com",
      hrefTarget:"mainFrame",
      qtip:"打开百度",
      listeners:{//监听
          "click":function(node,e){
                      alert(node.text)
                  }
      }
  }));
  sub1.appendChild(new Ext.tree.TreeNode({
      id:"editNews",
      text:"编辑新闻"
  }));
  sub1.appendChild(new Ext.tree.TreeNode({
      id:"delNews",
      text:"删除新闻"
  }));
 
  root.appendChild(sub1);
 
  root.appendChild(new Ext.tree.TreeNode({
        id:"sys",
        text:"系统设置"
  }));
 
  mytree.setRootNode(root);//设置根节点
 
  mytree.render();//不要忘记render()下,不然不显示哦
})
分享到:
评论

相关推荐

    extjs的tree的使用

    在深入探讨ExtJS中Tree组件的使用之前,我们先来了解一下ExtJS本身。ExtJS是一个用JavaScript编写的开源前端框架,旨在帮助开发者构建复杂、高性能的Web应用程序。它提供了丰富的UI组件库,其中包括Tree(树形)组件...

    ExtJS静态使用示例

    ExtJS是一种广泛应用于Web开发的...总的来说,"ExtJS静态使用示例"提供了一个学习和实践ExtJS基础功能的机会,通过Grid、Panel和Tree的使用,可以帮助开发者掌握如何在Web应用中构建交互性和功能性丰富的用户界面。

    Extjs之tree

    ExtJS的Tree组件提供了强大而灵活的树形结构展示功能,无论是静态数据还是动态数据加载,都能轻松应对。通过深入理解其工作原理和API,我们可以构建出满足各种需求的树形界面,提升用户体验。在实际项目中,结合其他...

    EXTJS动态树——基于mysql、jsp

    一个关于extjs的动态树demo 好久没裸写(不用框架)过了,都不记得关闭数据连接的语句写在哪里了。 这个demo至少要你懂得一些extjs语法,否则,你会看着很费劲。 里面提供了需要的表结构和mysql驱动 如果你不会mysql...

    Extjs Combotree

    2. **定义数据源**:创建符合JSON Tree格式的数据,可以是服务器端动态生成,也可以是静态数据。 3. **创建Combotree组件**:使用ExtJS的`Ext.create`方法,指定组件类型为`Ext.tree.Panel`,并配置相关属性,如...

    Extjs 通用后台模板| 经典 Tree+Tab+Grid

    这个"Extjs 通用后台模板| 经典 Tree+Tab+Grid"是一个基于ExtJS的预配置模板,它集成了常见的界面元素,如树形视图(Tree)、选项卡(Tab)和网格(Grid),为开发高效能、用户友好的后台应用提供了便利。...

    extjs目录树编辑

    工具类可能包含静态方法,如`addNode`, `deleteNode`, `editNode`, 和 `findNode`,方便在项目中各个地方调用。 6. **事件监听**:EXTJS的事件驱动模型使得在编辑操作时能够实时响应用户的交互。例如,可以监听`...

    extjs+asp例子

    ExtJS的Store组件可以方便地接收并解析这些数据,用于显示在Grid、Tree或其他组件中。 - **Ajax通信**:ExtJS的Ajax请求(Ext.Ajax.request)可以与ASP的Web服务或页面方法进行通信,实现异步更新和数据交换。 - *...

    extjs-tree-editor-example:树面板项目和表单面板输入之间的迭代示例

    "extjs-tree-editor-example" 指的是一个使用Ext JS库实现的树形面板编辑器的示例项目。这个项目展示了如何在树结构中进行数据编辑,并可能与表单面板的交互。"树面板项目"通常用于展示层次结构的数据,而"表单面板...

    extjs4官方示例以及api文档html版

    这些示例涵盖了EXTJS4的各种组件和功能,包括表格(Grid)、面板(Panel)、表单(Form)、菜单(Menu)、工具栏(Toolbar)、树形视图(Tree)、图表(Charts)等。通过运行示例,你可以直观地看到组件的外观和交互...

    extjs2.0 下拉列

    在描述中提到了 "extjs下拉树",这可能是指 `Ext.tree.TreePanel` 结合 `TreeStore` 来实现的下拉树结构。下拉树允许用户从一个下拉框中选择一个树形结构的节点。实现方式是在 `ComboBox` 的配置中添加一个 `tree` ...

    extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面

    我是这样实现的 代码如下: var root = new Ext.tree.TreeNode({ text: ‘根节点’, expanded: true }); tree.setRootNode(root); var nodes = {}; nodes.children = mydata;/*TreeGrid的json数据[{……},{……}]*/ ...

    ExtJS实用开发指南

    - **解压文件**:将下载的压缩包解压到项目的静态资源目录下,例如`public/js/extjs/`。 - **引入脚本**:在HTML文件中引入ExtJS的核心脚本文件,通常为`ext-all.js`。 ```html <!DOCTYPE html> <title>ExtJS ...

    ExtJS-3.4.0系列目录

    - `Ext.form.field.ComboBox`:下拉列表框,可以是静态或动态加载的。 - `Ext.form.field.Time`:时间选择器。 - `Ext.form.field.Date`:日期选择器。 - `Ext.form.field.Hidden`:隐藏字段。 - `Ext.form....

    EXTJS源码人力资源

    在人力资源管理系统的上下文中,EXTJS可以用来创建各种组件,如表格(Grid)、表单(Form)、树形视图(Tree)等,以展示员工信息、管理招聘流程、处理考勤记录、进行绩效评估等。EXTJS的数据绑定机制使得与后台...

    很不错的ExtJs PPT

    EXTJS不仅外观引人注目,还包含了JSON和AJAX技术,支持自定义验证、静态数据提交和静态分页等功能,极大提升了网页应用的交互性和效率。 EXTJS中的组件多样,例如下拉列表有两种形式:Select和Combo。Select仅提供...

    Extjs4生成树

    ExtJS4是一款强大的JavaScript库,特别适合构建富客户端应用,其中树组件(Tree)是其重要组成部分,用于展示层次化的数据。 首先,让我们了解基本的HTML页面设置。在示例中,`index.html`是应用程序的入口点,它...

    ExtJs组件类的对应表

    8. **`treepanel`** - `Ext.tree.TreePanel`,树型面板,用于展示层级结构的数据。 9. **`flash`** - `Ext.FlashComponent`,自3.0版本起支持,用于显示Flash内容的组件。 10. **`grid`** - `Ext.grid.GridPanel...

    Extjs树菜单的构成

    通过TreeNode和TreePanel,开发者可以轻松构建静态和动态的树结构,并通过丰富的配置选项和选择模型来满足各种需求。在实际应用中,还可以结合Ajax和后台数据接口,实现动态加载和实时更新的树形视图。

    ExtJS使用笔记

    Ext.tree.TreePanel组件用于展示树状结构的数据,可以构建静态的树结构,也可以动态地从服务器加载数据构建树。TreePanel提供了丰富的方法和事件,以便于操作和交互。 最后,ExtJS中的Menu、Button和Toolbar组件...

Global site tag (gtag.js) - Google Analytics