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
    Code:
    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
    Code:
    bind : {
       uI : '{ui}'
    }
    ,
    the according setter can be found in the component class
    Code:
    setUI
    . So to instantiate the ui for the component correctly I need to do
    Code:
    ...
    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 evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,250
    Answers
    758
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3

    Default

    Sorry, my mistake, was talking about the classic toolkit. Forked your fiddle, see https://fiddle.sencha.com/#view/editor&fiddle/2bic.
    Error :
    Code:
    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)
    Code:
    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 :
    Code:
    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

    Default

    Code:
    Ext.define('Overrides.Component', {
        override: 'Ext.Component',
    
    
        setUi: function(newUi){
            var oldUi = this.ui,
                childNodes = Ext.DomQuery.select('[id^=' + this.getId() + '][class*=' + oldUi + ']', this.getEl().dom);
    
            this.ui = newUi;
    
            Ext.each(childNodes, function(node) {
                node = Ext.fly(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));
                    }
                });
            });
        }
    });
    Thanks
    Albanir Neves

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
  •