Results 1 to 4 of 4

Thread: Binding components ui variable to viewModel

  1. #1

    Default Binding components ui variable to viewModel

    Hi all,

    according to the documentation 6.5.1 every component is able to bind the state of the 'ui' var to some ViewModel property. But if i try this by simply setting
    bind : {
       ui : '{ui}'
    i get an binding[config].names ... error telling me that there is currently no setter method available. But when I declare it by
    bind : {
       uI : '{ui}'
    the according setter can be found in the component class
    . So to instantiate the ui for the component correctly I need to do
    ui : 'some-initial-ui',
    bind : {
       uI : '{ui}'
    to initialise it correctly. Something seems to be wrong here, these are in fact two properties, or not ??

  2. #2
    Sencha Premium User
    Join Date
    Apr 2007
    Sydney, Australia

  3. #3


    Sorry, my mistake, was talking about the classic toolkit. Forked your fiddle, see
    Error :
    Uncaught Error: Cannot bind ui on Ext.panel.Panel - missing a setUi method.
        at new Ext.Error (VM22060 ext-all-debug.js:2744)
        at Function.raise (VM22060 ext-all-debug.js:2803)
        at Object.Ext.raise (VM22060 ext-all-debug.js:2882)
        at constructor.applyBind (VM22060 ext-all-debug.js:56698)
        at constructor.setter [as setBind] (VM22060 ext-all-debug.js:11180)
        at constructor.<anonymous> (VM22060 ext-all-debug.js:11159)
        at constructor.initBindable (VM22060 ext-all-debug.js:56843)
        at constructor.beforeRender (VM22060 ext-all-debug.js:68065)
        at constructor.callParent (VM22060 ext-all-debug.js:13104)
        at constructor.beforeRender (VM22060 ext-all-debug.js:152607)
    Uncaught TypeError: this[binding._config.names.set] is not a function
        at constructor.onBindNotify (VM22060 ext-all-debug.js:56913)
        at constructor.notify (VM22060 ext-all-debug.js:106846)
        at constructor.react (VM22060 ext-all-debug.js:107053)
        at constructor.notify (VM22060 ext-all-debug.js:104393)
        at constructor.onTick (VM22060 ext-all-debug.js:104424)
        at VM22060 ext-all-debug.js:7101
        at Object.elevate (VM22060 ext-all-debug.js:2552)
        at timerFn (VM22060 ext-all-debug.js:7312)
    By the way, thx for the hint with the modern toolkit. In contrast to the classic, the ui property defined on Ext.Widget as superclass of Ext.Component has a "real" ui property, which is internally called the right way :
    addUi: function(ui) {
                this.setUi(this.doAddUi(ui, this.getUi()));
    Last edited by aicgroup-dev; 4 Jan 2018 at 3:59 PM. Reason: anno added

  4. #4


    Ext.define('Overrides.Component', {
        override: 'Ext.Component',
        setUi: function(newUi){
            var oldUi = this.ui,
                childNodes ='[id^=' + this.getId() + '][class*=' + oldUi + ']', this.getEl().dom);
            this.ui = newUi;
            Ext.each(childNodes, function(node) {
                node =;
                var classList = Ext.String.splitWords(node.getAttribute('class'));
                Ext.each(classList, function(cls) {
                    if (cls.indexOf(oldUi) != -1) {
                        node.replaceCls(cls, cls.replace(oldUi, newUi));

Similar Threads

  1. [OPEN] Binding ViewModel to stateful components
    By sytel in forum Ext JS 6.x Bugs
    Replies: 5
    Last Post: 18 Aug 2019, 11:24 AM
  2. ViewModel (binding) perfomance
    By truedrog in forum Ext JS 6.x Q&A
    Replies: 4
    Last Post: 29 Oct 2015, 4:14 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts