`
再逢山水
  • 浏览: 157034 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

ExtJs 实现 tree + tab

阅读更多
//设置树的点击事件
function treeClick(node,e) {
if(node.isLeaf()){
   e.stopEvent();
   var n = tab.getComponent(node.id);
   if (!n) {
    var idSrcString = node.id;
    var idSrcArr = idSrcString.split("|");
    var n = tab.add({
     'id' : idSrcArr['0'],
     'title' : node.text,
     closable:true,
     html : "<iframe height='100%' width='100%' src='./php/"+idSrcArr['1']+".php'></iframe>"
     });
   }
   tab.setActiveTab(n);
}
}

//生成标签页
var tab = new Ext.TabPanel({
    region:'center',
    deferredRender:false,
    activeTab:0,
    resizeTabs:true, // turn on tab resizing
    minTabWidth: 115,
    tabWidth:135,
    enableTabScroll:true
   });

Ext.onReady(function(){
   //layout
   var viewport = new Ext.Viewport({
   layout:'border',
   items:[
    new Ext.BoxComponent({
     region:'north',
     el: 'north',
     height:80
    }),new Ext.BoxComponent({
     region:'south',
     el: 'south',
     height:25
    }),{
    region:'west',
    id:'west-panel',
    split:true,
    width: 200,
    minSize: 175,
    maxSize: 400,
    margins:'0 0 0 0',
    layout:'accordion',
    title:'系统菜单',
    collapsible :true,
    layoutConfig:{
     animate:true
     },
      items: [
       {
      title:'后台',
      border:false,
      html:'<div id="tree-div" style="overflow:auto;width:100%;height:100%"></div>'
      //iconCls:'nav'
       }]
    },
         tab//初始标签页
   ]
});

//设置树形面板
var Tree = Ext.tree;
// set the root node
var root = new Tree.AsyncTreeNode({
   text: '后台',
   draggable:false,
   id:'root'
});

var tree = new Tree.TreePanel({
   el:'tree-div',
   autoScroll:true,
   root:root,
   animate:true,
   enableDD:false,
   border:false,
   rootVisible:false,
   containerScroll: true,
   loader: new Tree.TreeLoader({
    dataUrl:'treedata.php'
   })
});

    tree.setRootNode(root);
// render the tree
tree.render();
root.expand();
tree.on('click',treeClick);

//end loding
setTimeout(
     function() {
      Ext.get('loading').remove();
      Ext.get('loading-mask').fadeOut({remove:true});
     }, 250
     );
});
分享到:
评论

相关推荐

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

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

    Extjs的Tree和Tab使用json做tree数据交互

    在ExtJS中,Tree和Tab是两种常用的组件,分别用于展示层次结构的数据(如目录结构)和创建多页面布局。本篇文章将详细探讨如何利用JSON数据来实现这两者的交互。 首先,让我们了解一下`Tree`组件。在ExtJS中,Tree...

    Extjs做的treepanel+tab切换页

    在"Extjs 做的treepanel+tab切换页"这个项目中,我们主要关注的是如何利用ExtJS 3.2版本来创建一个具备折叠面板(Collapsible Panel)功能的树形视图(TreePanel),以及与之联动的选项卡(TabPanel)。这个设计允许...

    ExtJs Tree

    综上所述,ExtJs Tree不仅提供了丰富的配置选项来满足多样化的应用场景需求,而且通过高度定制化的API接口,开发者可以根据实际业务逻辑轻松实现复杂的交互效果。这对于构建具有强大数据管理能力的企业级应用来说是...

    extJs3升级extjs4方案

    在 ExtJS4 中,API 也发生了很大的变化,包括 tree、tab panel、grid、window、form、chart、data stores、border layout 等等。这些变化使得大型应用程序迁移变得非常困难。 在 ExtJS3 中,我们可以使用 Ext....

    ExtJs 后台通用界面布局,左侧树,Center Tab 选项

    本主题主要关注的是ExtJs 中的一个常见布局模式:左侧树形导航与中心Tab选项卡结合的后台通用界面布局。 首先,我们要理解ExtJs中的“布局”(Layouts)。布局是ExtJs组件管理其子组件的方式,决定了子组件如何在...

    tree with tab

    extjs 左边窗口treepanel 菜单与右边窗口tabpanel 交互 var westPanel = Ext.create('Ext.tree.Panel', { title : '菜单', region : 'west', margins : '0 5 0 0', width : 200, store : store1, ...

    extjs4.0 实现了主页面框架 动态菜单 例子 表单 ajax

    extjs4.0 实现了主页面框架(主框架使用Ext.Viewport,banner使用Ext.panel.Panel,通过toolbar来放置按钮),包括左侧动态菜单实现(采用Ext.tree.Panel)动态从数据库加载数据来显示菜单(后台代码也在了通过json...

    extjs4 实现下拉树并支持复选

    在EXTJS4中,实现一个下拉树(Combobox Tree)并支持多选和复选功能,主要是通过自定义组件(Ext.define)来完成的。这个组件继承自EXTJS的Picker字段(Ext.form.field.Picker),并添加了树形结构和复选功能。以下...

    Extjs中通过Tree加载右侧TabPanel具体实现

    综上所述,通过Extjs实现左侧功能树到右侧TabPanel的动态加载,涉及到的主要知识点包括Ext.tree.Panel的使用、Ext.tab.Panel的使用、组件的扩展和别名设置、事件的绑定和处理。掌握了这些知识点,开发者就可以在...

    EXTJS4.0视频教程

    - **Tab Panel**:标签页组件,可以在不同的标签页之间切换内容。 - **Window**:弹出窗口组件,常用于显示额外信息或收集用户输入。 - **Tree Panel**:树形结构组件,适用于展示层级关系数据。 - **Button**:按钮...

    AnyFo_-_ExtJS_移魂大法

    通过上述内容,我们已经详细介绍了如何搭建ExtJS开发环境、使用布局管理器、事件机制、窗体、表单、Tree、Tab、Grid、数据展示以及如何使用Ajax技术。希望这些知识点能帮助您更好地理解和使用ExtJS框架。

    ExtJS-3.4.0系列目录

    - **Ext.tab.Panel**:页签面板,用于展示多个页面内容,每个页面作为一个单独的Tab。 6. **Tree 组件** - **Ext.tree.Panel**:用于展示树形结构的数据,包含配置项和方法,如节点的添加、删除和操作。 7. **...

    Extjs折叠布局中添加树

    整个程序的入口点是`Ext.onReady`函数,这里创建了三个主要的面板:顶部的`topPanel`,左侧的`leftPanel`(包含折叠布局和树),以及右侧的`rightPanel`(使用了标签页布局Tab Panel)。各个面板通过`region`属性...

    ExtJS4下拉树组件

    `createPicker`方法负责创建下拉面板(`Ext.tree.Panel`)。面板的配置包括: - 使用指定的数据存储(`store`)。 - 设置浮动属性(`floating`)和隐藏属性(`hidden`)。 - 宽度(`width`)和最大高度(`maxHeight`)。 - 根据...

    ExtJS6学习资料

    - **组件多样性**:ExtJS 提供了大量的 UI 组件,包括但不限于数据网格(datagrid)、选项卡面板(tab panels)、树状控件(tree controls)、日期选择器等。 - **应用场景**:这些组件特别适用于构建复杂的数据展示...

    使用Sencha ExtJS和Sencha Cmd开发RIA程序.pdf

    Sencha ExtJS中还包含了一些常用的组件,如Ext.grid.Panel(网格面板)用于创建交互式的表格数据视图,Ext.tree.Panel(树面板)用于展示层级数据,Ext.form.Panel(表单面板)用于构建用户输入表单,以及Ext.tab....

    extjs C#控件全示例

    5. Tree Panel:用于展示树形结构的数据,如文件系统或组织结构。 6. Tab Panel:创建带有多个标签的面板,便于组织和切换内容。 7. Charting:数据可视化组件,可以创建各种图表,如柱状图、饼图、线图等。 通过这...

Global site tag (gtag.js) - Google Analytics