ExtJS：在绑定表单上更新 HTML 的问题答案

【问题标题】：ExtJS: Issue updating HTML on bound formExtJS：在绑定表单上更新 HTML 的问题
【发布时间】：2017-08-02 19:09:25
【问题描述】：

请参考以下小提琴：Binding HTML Issue

当您从左侧面板的组合框中选择一行时，它会打印绑定值以及右侧表单中的一些 HTML。当您然后单击标记为“测试更新”的按钮时，它首先清除下拉列表中的绑定值，然后应该更新 HTML 以清除它。

问题是，Ext.ComponentQuery.query 中引用的displayfield 的更新无法按此顺序进行。如果我首先在小提琴中进行更新，它可以工作，但如果我在我的实际应用程序中尝试这个，它不会（在我的应用程序中，combobox 上的setValue 确实可以工作，但随后会留下 HTML 标签 - 它我要清除）。

非常欢迎您提供关于为什么会发生这种行为的想法。

【问题讨论】：

标签： extjs binding

【解决方案1】：

您可能希望为此使用一个公式，它可以简化其背后的逻辑。

viewModel: {
    formulas: {
        foo: function(get) {
            var sel = get('peopleComboRef.selection');

            return sel ? ('HTML Label: ' + sel.get('name')) : '';
        }
    }
},

然后将此公式绑定到您的displayfield。

{
    xtype: 'displayfield',
    itemId: 'displayTest',
    bind:  {
        html: '{foo}'
    }
}

小提琴：https://fiddle.sencha.com/#fiddle/24f5&view/editor

【讨论】：

甜蜜！我什至没有考虑过使用公式。