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

Question

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

我使用煎茶 fiddle 测试了上面的代码，同样的错误也出现了。有什么建议或者这是框架问题吗？

编辑：我的 fiddle link ：https://fiddle.sencha.com/#view/editor&fiddle/1nc7

谢谢。

Answer 1

标签组件私下重新创建Ext.layout.container.boxOverflow.Menu（两次 - 我不研究为什么）。对于重新创建标签，使用原始标签的 initialConfig。所以有可能：

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

在重新创建的标签更改 initialConfig 中设置文本

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

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

ExtJS 5 Label in Toolbar not updated when overflow

javascript

extjs

extjs5