ExtJS 动态添加选项卡
ExtJS dynamically adding tabs
大家!
我正在使用 ExtJS 创建一个应用程序,并且我定义了一个选项卡面板。我还得到了一个树形面板菜单,其中包含所有项目和每个项目的类。我想要实现的是,当我单击菜单项时,它会自动向选项卡面板添加一个新选项卡,但会根据 parentNode 的名称更改标题。但是,例如,当我单击主页按钮时,它会添加两个新选项卡,一个具有正确配置的标题,但没有任何内容(http://tinypic.com/r/2whmo2d/5),另一个没有任何标题,但内容和其他所有内容都配置为类定义文件(http://tinypic.com/r/105thyb/5)。如何设法获得一个带有标题和内容的选项卡?
感谢您的任何回答。
菜单 JSON 示例:
{
"children": [
{
"text": "Home",
"leaf": true,
"dbName": "home"
},
{
"text": "Sveatlo",
"expanded": false,
"leaf": false,
"dbName": "sveatlo",
"children": [
{
"text": "Vydané faktúry",
"leaf": true,
"dbName": "vydane-faktury"
},
{
"text": "Prijaté faktúry",
"leaf": true,
"dbName": "prijate-faktury"
}
]
},
{
"text": "Hájočka",
"expanded": false,
"leaf": false,
"dbName": "hajocka",
"children": [
{
"text": "Vydané faktúry",
"leaf": true,
"dbName": "vydane-faktury"
},
{
"text": "Prijaté faktúry",
"leaf": true,
"dbName": "prijate-faktury"
}
]
}
],
"success": true
}
添加新选项卡的代码(从主控制器):
setMenuItem: function(record){
var dbName = record.get('dbName');
var classname;
if(record.isLeaf()){
classname = 'Fleximanager.view.pages.' + Ext.String.createVarName(dbName);
} else {
classname = 'Fleximanager.view.pages.CorpMain';
}
var tabPanel = Ext.getCmp('flexitabs');
var tabId = dbName + 'tab'
var tabIndex = tabPanel.items.findIndex('id', tabId)
if(tabIndex != -1){
tabPanel.setActiveTab(tabIndex);
} else {
if(record.isLeaf() && dbName != 'home'){
tabPanel.add(Ext.create(classname),{
title: record.parentNode.get('text') + ' - ' + record.get('text')
});
} else {
tabPanel.add(Ext.create(classname),{
title: record.get('text')
});
}
tabPanel.setActiveTab(tabId);
}
}
我的标签面板:
Ext.define('Fleximanager.view.main.TabPanel', {
extend: 'Ext.tab.Panel',
alias: 'widget.flexitabs',
id: 'flexitabs',
layout: {
type: 'fit',
},
width: '100%',
height: '100%',
items: [{
title: 'Start',
closable: true,
layout: 'vbox',
id: 'starttab',
items: [{
xtype: 'panel',
border: 5,
html: 'Statistics',
listeners: {
click: {
element: 'el',
fn: function(){
Ext.getCmp('statsMenu').expand(true);
}
}
}
},{
xtype: 'panel',
border: 5,
html: 'Contacts',
listeners: {
click: {
element: 'el',
fn: function(){
Ext.getCmp('contactsMenu').expand(true);
}
}
}
},{
xtype: 'panel',
border: 5,
html: 'Calendar',
listeners: {
click: {
element: 'el',
fn: function(){
Ext.getCmp('calendarMenu').expand(true);
}
}
}
}]
}]
});
例如,我的一个菜单项的定义:
Ext.define('Fleximanager.view.pages.home', {
extend: 'Ext.panel.Panel',
xtype: 'hometab',
id: 'hometab',
closable: true,
layout: 'vbox',
items: [{
xtype: 'panel',
html: 'HOME TAB'
}]
});
您在将选项卡添加到面板的代码中有错误。试试这个:
if (record.isLeaf() && dbName != 'home') {
tabPanel.add(Ext.create(classname, {
title: record.parentNode.get('text') + ' - ' + record.get('text')
}));
} else {
tabPanel.add(Ext.create(classname, {
title: record.get('text')
}));
}
在您的代码中,您添加 2 个选项卡 - 一个从类名创建,另一个只有标题。IMO 您应该将标题应用于从类名创建的选项卡,这就是为什么它应该作为 Ext.create
的第二个参数。
相关文章:
- 如何为下拉列表的每个选项添加一个属性
- 使用jQuery向“选择选项”添加默认属性
- 将默认选项添加到ng-if
- 从jquery中的select选项添加两个不同的数组值(text&value)
- 为selectize.js选项添加数据属性
- 将select选项添加到id中
- AngularJS ng选项添加了另一个选项
- 将选项添加到插件msDropdown生成的下拉列表的最佳方式是什么
- 将选项添加到多选并设置为选定
- 如何将空白选项添加到木偶收藏视图生成的选择中
- 如何将此选项添加到此图像选取器项目中
- 使用 XHR 更新服务器文件并将选项添加到 html 选择
- 如何使用 JavaScript 将选项添加到 HTML 表单下拉列表中
- 为什么当我将数据选项添加到骨干模型获取时,它不会触发回调
- 如何将下拉列表中的所有选项添加到 php 中的数组中
- 角度JS多选选项添加额外的?选择
- 自动选择<选项>添加到<选择>
- 如何动态地将所选选项添加到表中
- 动态地将选项添加到 Angular 选定的组合框中
- AngularJS:将选项添加到选择而不选择它