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

实现“Extjs中通过Tree加载右侧TabPanel”需要以下步骤:

  1. 创建一个Ext.tree.Panel,用于显示树形结构,其中需要配置store,root等属性。

示例代码:

Ext.create('Ext.tree.Panel', {
  store: yourTreeStore,
  root: {
    text: 'Root',
    expanded: true,
    children: yourTreeData
  },
  listeners: {
    itemclick: function(tree, node) {
      // TODO: load tab panel based on selected node
    }
  }
});

其中,yourTreeStore指定了树形结构的数据源,yourTreeData指定了树形结构的初始数据,itemclick事件监听器可以在树节点被点击时触发,并执行加载右侧TabPanel的操作。

  1. 创建一个Ext.TabPanel,用于显示右侧的Tab。在itemclick事件监听器中,可以通过add()方法向TabPanel中添加新的Tab,并指定Tab所需的配置信息。在TabPanel中加载组件时,可以使用Ext.ComponentQuery查找已注册的组件,或者使用直接创建组件对象的方式。

示例代码:

var tabPanel = Ext.create('Ext.TabPanel', {
  items: [
    {
      title: 'Tab 1',
      html: 'Content of Tab 1'
    }
  ]
});

Ext.create('Ext.tree.Panel', {
  store: yourTreeStore,
  root: {
    text: 'Root',
    expanded: true,
    children: yourTreeData
  },
  listeners: {
    itemclick: function(tree, node) {
      if (node.get('leaf')) {
        var id = node.get('id');
        var title = node.get('text');
        var tab = tabPanel.child('#tab_' + id);

        if (!tab) {
          tab = tabPanel.add({
            xtype: 'panel',
            title: title,
            closable: true,
            id: 'tab_' + id,
            html: 'Loading ' + title + '...'
          });

          var panel = Ext.create(node.get('xtype'), node.get('config'));

          // Load content of tab
          tab.setLoading(true);
          panel.on('afterrender', function() {
            tab.setLoading(false);
            tab.add(panel);
          });
        }

        tabPanel.setActiveTab(tab);
      }
    }
  }
});

在上述示例代码中,我们先创建一个TabPanel,并添加了一个默认的Tab。在itemclick事件监听器中,我们在用户首次点击一个节点时创建新的Tab,并向Tab中添加组件。如果用户再次点击相同的节点,则直接激活该Tab,而不是再次创建新的Tab。在创建Tab时,我们设置了closable属性为true,允许用户关闭Tab。在加载Tab的内容时,我们使用了setLoading(true)setLoading(false)方法来显示和隐藏Tab的加载状态。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Extjs中通过Tree加载右侧TabPanel具体实现 - Python技术站

(0)
上一篇 2023年6月15日
下一篇 2023年6月15日

相关文章

  • Java实现解析JSON大文件JsonReader工具详解

    Java实现解析JSON大文件JsonReader工具详解 1. 什么是JsonReader? JsonReader 是 Google 提供的一个用于解析 JSON 的 Java 工具,它可以有效地解析大型 JSON 文件,并将 JSON 数据转化为 Java 对象。相比于其他 JSON 解析工具,JsonReader 不会将整个 JSON 文件载入内存,而…

    Java 2023年5月26日
    00
  • 详解Java的Spring框架中的事务管理方式

    详解Java的Spring框架中的事务管理方式 什么是事务管理 事务管理是指对于需要具有原子性和一致性的业务流程操作,保证其执行结果要么全部成功执行完成,要么全部回滚到最初状态,异常情况下,业务操作要么完全执行成功,要么完全执行失败。 Spring框架中的事务管理 在Spring框架中,主要有三种方式进行事务管理:编程式事务、声明式事务、注解式事务。 编程式…

    Java 2023年5月19日
    00
  • 浅谈SpringMVC对RESTfull的支持

    浅谈SpringMVC对RESTful的支持 什么是RESTful RESTful是一种基于HTTP协议的Web服务架构风格,它是一种轻量级、简单易用的架构风格,可以用于构建分布式系统。RESTful架构风格的核心是资源,每个资源都有一个唯一的URI,通过HTTP协议的GET、POST、PUT、DELETE等方法对资源进行操作。 SpringMVC对REST…

    Java 2023年5月17日
    00
  • 通过Tomcat开启JMX监控的方法图解

    下面是通过Tomcat开启JMX监控的方法图解的完整攻略,包含以下步骤: 步骤一:修改Tomcat配置文件 首先,我们需要修改Tomcat的配置文件,以允许JMX监控。具体操作如下: 打开Tomcat的conf目录下的catalina.properties文件; 找到并注释掉如下内容: #com.sun.management.jmxremote.port=1…

    Java 2023年5月19日
    00
  • 使用IDEA开发配置Java Web的初始化过程

    以下是使用IDEA开发配置Java Web的初始化过程详细攻略: 步骤一:创建项目 1.打开IDEA,选择File -> New -> Project 2.选择“Java Web”,点击“Next” 3.填写“Project name”和“Project location”,然后点击“Next” 4.选择“Web Application”,并选择…

    Java 2023年5月19日
    00
  • Java8新特性之深入解析日期和时间_动力节点Java学院整理

    Java8新特性之深入解析日期和时间_动力节点Java学院整理 为什么需要新的日期和时间API Java早期的日期和时间API出现了很多问题,如: API不一致:Java提供了大量日期和时间API,但它们之间的API不一致,这使得编写日期和时间代码非常困难。 可变性:Java早期的日期和时间API中的大多数类都是可变的,这意味着我们可以随时更改日期和时间,这…

    Java 2023年6月1日
    00
  • Java实现多线程聊天室

    实现多线程聊天室,在Java中可以通过使用Socket和Thread来实现。 具体步骤如下: 1.创建服务器端- 创建ServerSocket对象,并设置端口号- 创建Socket对象,以接受客户端请求- 使用Thread创建一个线程,以接受客户端发来的消息,并将消息广播给其他客户端- 使用ArrayList存储客户端(每个客户端都对应一个Socket对象)…

    Java 2023年5月18日
    00
  • Java案例使用集合方法实现统计任意字符串中字符出现的次数

    Java案例使用集合方法实现统计任意字符串中字符出现的次数 需求分析 我们需要编写一个Java程序,统计任意一个字符串中每个字符出现的次数。输入任意一个字符串,程序返回一个Map,其中键为字符,值为该字符在字符串中出现的次数。 设计思路 本问题我们将使用 Java 语言中的 Map 与字符数组( char[] )来实现。 遍历输入的字符串,将字符串中出现的字…

    Java 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部