实现“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的加载状态。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Extjs中通过Tree加载右侧TabPanel具体实现 - Python技术站