Results 1 to 7 of 7

Thread: Component mask renderTpl override

  1. #1
    Sencha User
    Join Date
    Dec 2007
    Posts
    3
    Vote Rating
    0
      0  

    Default Answered: Component mask renderTpl override

    Can't find a way to override mask html markup created by component.mask() method.

    I can however override LoadMask renderTpl which works as expected in grids and manually created LoadMask objects but when using component mask() method this isn't happening.

    Created a fiddle to illustrate https://fiddle.sencha.com/#view/editor&fiddle/2le0

  2. You can't override it. The mask() method on component calls the underlying mask() method on Ext.dom.Element.

    Your best bet would be to add a new method that automatically constructs a loadmask instance for you:

    Code:
    Ext.define(null, {
        override: 'Ext.Component',
        
        realMask: function(cfg) {
            this.realUnmask();
            this._realMask = Ext.create(Ext.apply({
                xtype: 'loadmask',,
                target: this
            }, cfg));
            this._realMask.show();
        },
    
        realUnmask: function() {
            this._realMask = Ext.destroy(this._realMask);
        },
    
        destroy: function() {
            this.realUnmask();
            this.callParent();
        }
    });
    https://fiddle.sencha.com/#view/editor&fiddle/2lg1

  3. #2
    Ext Team Member
    Join Date
    Sep 2017
    Posts
    509
    Answers
    2
    Vote Rating
    -206
      -1  

    Default

    Hi there- I will send the fiddle over to the support team so they may see whats going on. We will get back with you as soon as possible with some assistance. Thank you for your patience!

  4. #3
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,131
    Answers
    739
    Vote Rating
    976
      1  

    Default

    You can't override it. The mask() method on component calls the underlying mask() method on Ext.dom.Element.

    Your best bet would be to add a new method that automatically constructs a loadmask instance for you:

    Code:
    Ext.define(null, {
        override: 'Ext.Component',
        
        realMask: function(cfg) {
            this.realUnmask();
            this._realMask = Ext.create(Ext.apply({
                xtype: 'loadmask',,
                target: this
            }, cfg));
            this._realMask.show();
        },
    
        realUnmask: function() {
            this._realMask = Ext.destroy(this._realMask);
        },
    
        destroy: function() {
            this.realUnmask();
            this.callParent();
        }
    });
    https://fiddle.sencha.com/#view/editor&fiddle/2lg1
    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.

  5. #4
    Ext Support Team
    Join Date
    Jan 2018
    Posts
    47
    Vote Rating
    -60
      -2  

    Default

    check this fiddle This may help you,

    https://fiddle.sencha.com/#view/editor&fiddle/2lge

  6. #5
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,131
    Answers
    739
    Vote Rating
    976
      0  

    Default

    How is that override relevant? It's exactly the same as the current mask method, but uses a literal string instead of the passed message.
    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.

  7. #6
    Sencha User
    Join Date
    Dec 2007
    Posts
    3
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by evant View Post
    You can't override it. The mask() method on component calls the underlying mask() method on Ext.dom.Element.

    Your best bet would be to add a new method that automatically constructs a loadmask instance for you:

    Code:
    Ext.define(null, {
        override: 'Ext.Component',
        
        realMask: function(cfg) {
            this.realUnmask();
            this._realMask = Ext.create(Ext.apply({
                xtype: 'loadmask',,
                target: this
            }, cfg));
            this._realMask.show();
        },
    
        realUnmask: function() {
            this._realMask = Ext.destroy(this._realMask);
        },
    
        destroy: function() {
            this.realUnmask();
            this.callParent();
        }
    });
    https://fiddle.sencha.com/#view/editor&fiddle/2lg1
    Thanks for the reply!

    Yes, this works in a way of calling realmask() manually. However manually masking and unmasking in a rather large application is not very realistic. Any idea how to make this work with basicform's waitMsgTarget, so loading and submitting will automatically call this new realMask method?

  8. #7
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,131
    Answers
    739
    Vote Rating
    976
      0  

    Default

    Unfortunately, waitMsgTarget is even worse, because it calls the underlying element mask directly:

    Code:
    if (waitMsgTarget === true) {
        me.owner.el.mask(waitMsg, maskCls);
    } else if (waitMsgTarget) {
        waitMsgTarget = me.waitMsgTarget = Ext.get(waitMsgTarget);
        waitMsgTarget.mask(waitMsg, maskCls);
    } else {
    You don't have much hope here unless you override those underlying methods.
    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.

Similar Threads

  1. Override RenderTpl used in ProgressbarWidget
    By Senchurian in forum Ext 5: Q&A
    Replies: 3
    Last Post: 11 Dec 2015, 3:47 PM
  2. Replies: 3
    Last Post: 6 May 2013, 8:06 PM
  3. Replies: 3
    Last Post: 1 May 2013, 1:53 AM
  4. Override default loading mask msg
    By gabrielstuff in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 30 Aug 2011, 12:31 PM

Posting Permissions

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