溢出时工具栏中的 ExtJS 5 标签未更新答案

【问题标题】：ExtJS 5 Label in Toolbar not updated when overflow溢出时工具栏中的 ExtJS 5 标签未更新
【发布时间】：2017-01-15 06:32:56
【问题描述】：

var enableBtn = Ext.create('Ext.button.Button', {
        text    : 'Edit Label',
        disabled: false,
        scope   : this,
        handler : function() {
            //disable the enable button and enable the disable button
            //enableBtn.disable();
            //disableBtn.enable();

        //enable the toolbar
        //toolbar.enable();
        tFieldPage.setText('7');
    }
});

var tFieldPage = new Ext.form.Label({
            text: 1
        });

var toolbar = Ext.create('Ext.toolbar.Toolbar', {
    //renderTo: document.body,
    //width   : 400,
    enableOverflow: true,
    margin  : '5 0 0 0',
    items   : [enableBtn, tFieldPage]
});


Ext.create('Ext.window.Window', {
        title: 'Standard',
        closable: false,
        height:250,
        width: 500,
        bodyStyle: 'padding:10px',
        //contentEl: 'content',
        scrollable: true,
        tbar: toolbar
    }).show();

我正在使用 ExtJS 5.0.1，我发现当您缩小窗口并且标签“1”进入溢出菜单时，当我按下按钮更新标签时，它不会更新。但是，当我展开工具栏时，标签会再次更新。经过检查，我意识到当溢出时，会自动创建另一个标签。如何获取我创建的原始组件以更新溢出菜单中的克隆组件？

我使用 sencha fiddle 测试了上面的代码，同样的错误也出现了。有什么建议还是这是一个框架问题？

编辑：我的小提琴链接：https://fiddle.sencha.com/#view/editor&fiddle/1nc7

谢谢。

【问题讨论】：

如果您分享一个小提琴fiddle.sencha.com 以获得帮助会更好。
嗨，我已经添加了小提琴链接。
看起来这是 extjs5 中的一个错误。如果您在 extjs6 fiddle 上尝试它，您会发现它正在工作。您可以做的是开始使用与 v5 非常相似的 extjs6，或者您可以比较两个版本的 Ext.layout.container.boxOverflow.Menu 类源代码，并查看您的问题的缺失/错误部分。然后你可以轻松地覆盖它。
嗨，abeyaz，似乎它仍然发生在 extjs 6 中。你在小提琴中测试了哪个版本的 extjs6？我选择了最新版本（Ext JS 6.2.1.167 Classic）。当菜单溢出并且我单击按钮时，标签不会更新。只有当我再次展开工具栏时它才会更新。
它看起来已经部分解决了，但是如果您将视图调整为窄并在它仍然显示 1 时查看溢出，将其调整为更宽，单击按钮，然后将其缩小再次，它仍然会说 1。似乎这种行为至少在 7.1.0 版本中仍然存在。

标签： javascript extjs extjs5

【解决方案1】：

标签组件在私有Ext.layout.container.boxOverflow.Menu 中重新创建（两次 - 我不研究为什么）。重新创建标签是使用原始标签的初始配置。所以有可能：

获取原始标签
- 将按钮处理程序范围设置为标签
- 获取工具栏然后标签：comp.up('toolbar').down('label'))
更改原始标签文本：setText()

在重新创建的标签更改初始配置中设置文本

var tFieldPage = new Ext.form.Label({
    text: 1
});

var enableBtn = Ext.create('Ext.button.Button', {
  text    : 'Edit Label',
  disabled: false,
  scope   : tFieldPage,//bind scope
  handler : function(comp, event) {
    console.log('btnhandler scope: ',comp.id);
    console.log('btnhandler scope.owner: ',comp.ownerCt.id);
    if(comp.up('button')){
        console.log('original label: ', comp.up('toolbar').down('label'));
        console.log('recreated label: ', comp.nextSibling());
    }
    this.setText('7');
    this.initialConfig.text = 7;
  }
});

这里是fiddle

【讨论】：