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

我使用sencha小提琴测试了上面的代码，同样的错误也出现了。任何建议或这是一个框架问题？

编辑：我的小提琴链接：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标签未更新

1 个答案: