extjs - 如何使标签面板选项卡中的标题绑定在 ExtJS7 中工作?
问题描述
将 ExtJS7.x 与现代工具包一起使用。
由于各种原因,我试图在 TabPanel 中对面板的标题进行数据绑定,这似乎工作正常,如果不是一个警告的话。绑定仅在选项卡变为活动状态时应用。在官方论坛上搜寻,我发现这在 6 年前曾被标记为 ExtJS中的一个错误,并被报告为已修复。但是我仍然在 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',
}
]
}
在此处以小提琴格式提供。
在此处绑定硬编码字符串以进行测试。最终它将是一个更加可变的字符串,但我试图弄清楚这是否是 ViewModel 中可用数据的时间问题,因为字符串是从外部源加载的(似乎不是)
第一个选项卡的标题正确地被绑定中的数据覆盖,因为它是自动激活的。然而,第二个只有一个图标,没有标题,直到它被点击。
我试图在 beforeShow 事件处理程序中偷偷地强制所有面板激活,但这不会触发绑定。这导致了这个问题。有没有人有一个合理的解决方法或解决这个问题?我试图对为 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',
}]
});
}
});
推荐阅读
- java - 如何在旅途中重新索引列表?
- ios - ImageView 约束到底部呈现在顶部
- html - 嵌入到我的主页时,图像链接已损坏
- c# - 我无法从 JSON 获取数据并且没有错误
- reactjs - 如何在事件处理程序中访问 useSelector 值
- keil - 从 .s 文件启动调试器
- docker - 无法在主机上卷曲 docker 端口 - “(56) Recv failure: Connection reset by peer”
- excel - 根据您在多个下拉菜单中选择的内容更改行的颜色和单元格中的值
- swift - 从领域数据库中删除对象时,出现错误作为原因:“只能从它所属的领域中删除一个对象。”
- python - 如何从 Python 3 中的 ObservedList 中删除列表对象?