CODEWITHSUNDEEP
extjsbinding
horcle_buzz
horcle_buzz

Reputation: 2161

ExtJS: Issue updating HTML on bound form

Please refer to the following fiddle: Binding HTML Issue

When you select a row from the combobox on the left panel, it prints the bound value, along with some HTML in the form on right. When you then click on the button labeled as 'Test Update' it first clears the bound value in the drop down, and then is supposed to update the HTML to clear it, as well.

Problem is, that the update for the displayfield referenced in the Ext.ComponentQuery.query does not work in this order. If I do the update first in the fiddle it works, but if I try this in my actual app, it does not (in my app the setValue on the combobox DOES work though, but then leaves the HTML label - which I want to clear).

An ideas as to why this behavior is occurring would be most welcome.

Upvotes: 0

Views: 346

Answers (1)

Guilherme Lopes
Guilherme Lopes

Reputation: 4760

You probably would want to use a formula for that, it simplifies the logic behind it.

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

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

then bind this formula to your displayfield.

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

fiddle: https://fiddle.sencha.com/#fiddle/24f5&view/editor

Upvotes: 1

Related Questions