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

沃梦达教程 Java开发

2024-02-25 13

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

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

创建一个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的操作。

创建一个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的加载状态。