如何使 tabpanel 选项卡中的标题绑定在 ExtJS7 中工作?
How to make title binding in tabpanel tabs work in ExtJS7?
使用 ExtJS7.x 和现代工具包。
出于各种原因,我正在尝试 data-bind TabPanel 中面板的标题,这似乎工作正常,如果不是为了一个警告的话。绑定仅在选项卡激活后立即应用。在官方论坛上搜索我发现这在 ExtJS6 年前被标记为 bug,并且被报告为已修复。然而我仍然 运行 进入 7 中的类似行为。
我正在尝试做的事情的基本概述:
{
xtype: 'tabpanel',
defaults: {
iconAlign: 'left',
},
items: [
{
xtype: 'panel',
border: true,
padding: 5,
iconCls: 'x-fa fa-ellipsis-v',
title: 'Overview',
bind: {
title: '{anonymous.overview.title}'
}
},{
xtype: 'panel',
iconCls: 'x-fa fa-envelope-open',
bind: {
title: 'Test'
}
}, {
xtype: 'panel',
reference: 'auditgrid',
iconCls: 'x-fa fa-clipboard-list',
title: 'Audits',
}
]
}
此处提供 fiddle 格式。
在这里绑定一个 hard-coded 字符串用于测试目的。它最终将是一个更加可变的字符串,但我试图弄清楚这是否是 ViewModel 中可用数据的时间问题,因为字符串是从外部源加载的(似乎不是)
第一个选项卡的标题正确地被绑定中的数据覆盖,因为它是自动激活的。然而,第二个只有一个图标,没有标题,直到它被点击。
我试图偷偷摸摸地强制所有面板在 beforeShow 事件处理程序中激活,但这不会触发绑定。这就引出了这个问题。有没有人对此问题有合理的解决方法或修复方法?我已经尝试 reverse-engineer 为 ExtJS6 提供的覆盖,但没有任何运气让它工作。
还是我只是个笨蛋,是不是做错了什么?
尝试使用选项卡配置属性绑定标题,像这样:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.Viewport.add({
xtype: 'tabpanel',
viewModel: {
data: {
someTabTitle: 'Some Tab Title'
}
},
defaults: {
iconAlign: 'left',
},
items: [{
xtype: 'panel',
border: true,
padding: 5,
iconCls: 'x-fa fa-ellipsis-v',
title: 'Overview',
bind: {
title: 'Test 1'
}
}, {
xtype: 'panel',
iconCls: 'x-fa fa-envelope-open',
tab: {
bind: {
title: '{someTabTitle}'
}
}
}, {
xtype: 'panel',
reference: 'auditgrid',
iconCls: 'x-fa fa-clipboard-list',
title: 'Audits',
}]
});
}
});
使用 ExtJS7.x 和现代工具包。
出于各种原因,我正在尝试 data-bind TabPanel 中面板的标题,这似乎工作正常,如果不是为了一个警告的话。绑定仅在选项卡激活后立即应用。在官方论坛上搜索我发现这在 ExtJS6 年前被标记为 bug,并且被报告为已修复。然而我仍然 运行 进入 7 中的类似行为。
我正在尝试做的事情的基本概述:
{
xtype: 'tabpanel',
defaults: {
iconAlign: 'left',
},
items: [
{
xtype: 'panel',
border: true,
padding: 5,
iconCls: 'x-fa fa-ellipsis-v',
title: 'Overview',
bind: {
title: '{anonymous.overview.title}'
}
},{
xtype: 'panel',
iconCls: 'x-fa fa-envelope-open',
bind: {
title: 'Test'
}
}, {
xtype: 'panel',
reference: 'auditgrid',
iconCls: 'x-fa fa-clipboard-list',
title: 'Audits',
}
]
}
此处提供 fiddle 格式。
在这里绑定一个 hard-coded 字符串用于测试目的。它最终将是一个更加可变的字符串,但我试图弄清楚这是否是 ViewModel 中可用数据的时间问题,因为字符串是从外部源加载的(似乎不是)
第一个选项卡的标题正确地被绑定中的数据覆盖,因为它是自动激活的。然而,第二个只有一个图标,没有标题,直到它被点击。
我试图偷偷摸摸地强制所有面板在 beforeShow 事件处理程序中激活,但这不会触发绑定。这就引出了这个问题。有没有人对此问题有合理的解决方法或修复方法?我已经尝试 reverse-engineer 为 ExtJS6 提供的覆盖,但没有任何运气让它工作。
还是我只是个笨蛋,是不是做错了什么?
尝试使用选项卡配置属性绑定标题,像这样:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.Viewport.add({
xtype: 'tabpanel',
viewModel: {
data: {
someTabTitle: 'Some Tab Title'
}
},
defaults: {
iconAlign: 'left',
},
items: [{
xtype: 'panel',
border: true,
padding: 5,
iconCls: 'x-fa fa-ellipsis-v',
title: 'Overview',
bind: {
title: 'Test 1'
}
}, {
xtype: 'panel',
iconCls: 'x-fa fa-envelope-open',
tab: {
bind: {
title: '{someTabTitle}'
}
}
}, {
xtype: 'panel',
reference: 'auditgrid',
iconCls: 'x-fa fa-clipboard-list',
title: 'Audits',
}]
});
}
});