问题描述
将 ExtJS7.x 与现代工具包一起使用。
出于各种原因,我试图在 TabPanel 中对面板的标题进行数据绑定,这似乎工作正常,如果不是一个警告。绑定仅在选项卡变为活动状态后立即应用。在官方论坛上搜索,我发现这在 6 年前在 ExtJS 中被标记为 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'
}
},reference: 'auditgrid',iconCls: 'x-fa fa-clipboard-list',title: 'Audits',}
]
}
此处提供 fiddle 格式。
在此处绑定硬编码字符串以进行测试。它最终将是一个更可变的字符串,但我试图弄清楚这是否是 viewmodel 中可用数据的时间问题,因为字符串是从外部源加载的(似乎不是)
第一个选项卡的标题正确地被绑定中的数据覆盖,因为它是自动激活的。然而,第二个只有一个图标,没有标题,直到被点击。
我试图在 beforeShow 事件处理程序中偷偷地强制所有面板激活,但这不会触发绑定。这就引出了这个问题。有没有人有合理的解决方法或修复此问题?我试图对为 ExtJS6 提供的覆盖进行逆向工程,但没有任何运气使它工作。
还是我只是个笨蛋,我在这里做错了什么?
解决方法
尝试使用tab config属性来绑定标题,像这样:
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}'
}
}
},reference: 'auditgrid',iconCls: 'x-fa fa-clipboard-list',title: 'Audits',}]
});
}
});