Hybrid View

  1. #1
    Sencha User
    Join Date
    Mar 2011
    Posts
    63
    Vote Rating
    0
    jorgeluislay is an unknown quantity at this point

      0  

    Default LoadMask customizing it and dom, el en Ext.getBody() questions.

    LoadMask customizing it and dom, el en Ext.getBody() questions.


    Hi!

    I need help.. again -.- If you know something, just post, whatever you can, i will definitely read it!

    So i am having a grid which it aoutoload and i use a loadMask which is configured by myself like this:
    PHP Code:
        loadMask: new Ext.LoadMask(Ext.getBody(), {
            
    msg '<p align="center">Lade Daten... </p><br>'
                
    '<button class="x-btn-wrap x-btn billWide x-btn-text" onclick="'
                
    'Ext.Ajax.abort(Ext.getCmp(\'Grid\').getStore().proxy.getConnection().transId);'
                
    'Ext.getBody().unmask();'
                
    'Ext.getCmp(\'search\').enable();'
                
    '">Abbrechen</button>'
            
    }), 
    So, what i want is to set the loadMask to the grid with id: 'grid' but it doesnt work. When i put instead of Ext.getBody() -> Ext.getCmp('Grid'), it doesnt reconize it and than ii doesnt unmask the grid.

    Whats the difference betwenn el and dom ?

    Can someone tell me if -> Ext.getCmp("grid") == Mixed: el <- is or whats the difference to this ->Ext.getBody() <- ?

    The API say this:

    newExt.LoadMask( el, config ) : Ext.LoadMaskCreate a new LoadMask
    Available since: Ext 1
    Parameters


    • el : MixedThe element or DOM node, or its id <-- whats this ?
    • config : ObjectThe config object <-- whats this ?

    Returns

    Ext.LoadMask


    Please Help, im very very deseperate

  2. #2
    Sencha User
    Join Date
    Jan 2011
    Posts
    546
    Vote Rating
    52
    willigogs is a jewel in the rough willigogs is a jewel in the rough willigogs is a jewel in the rough

      0  

    Default


    Use Ext.getCmp('grid').getEl()

  3. #3
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    To give some more detail,

    new Ext.LoadMask( el, config ) : Ext.LoadMaskCreate a new LoadMask

    here "el" means the element of the component which you would like to show the mask on.

    var yourGrid = Ext.getCmp('idOfYourGrid'),
    yourGridEl = yourGrid.getEl();

    new Ext.LoadMask(yourGridEl, { ... });
    or
    new Ext.LoadMask('idOfYourGrid', { ... }); will do the job.
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  4. #4
    Sencha User
    Join Date
    Mar 2011
    Posts
    63
    Vote Rating
    0
    jorgeluislay is an unknown quantity at this point

      0  

    Default


    PHP Code:
    myapp.mygrid Ext.extend(Ext.grid.GridPanel, {
    id'mygrid',
    loadMask: new Ext.LoadMask(Ext.getCmp('mygrid').getEl(), {
            
    msg '<p align="center">Lade Daten... </p><br>'
                
    '<button class="x-btn-wrap x-btn billWide x-btn-text" onclick="'
                
    'Ext.Ajax.abort(Ext.getCmp(\'mygrid\').getStore().proxy.getConnection().transId);'
                
    'Ext.getCmp(\'mygrid\').getEl().unmask();'
                
    '">Cancel</button>'
            
    }),
    initComponent : function() {
                  
    readerstore ...
            
    Ext.apply(this, {
                
    store:store
                  
    .
                
    cm: ..
                  .
                  .
                
    sm: ..
                  .
                  .
                  .

            }); 
    // eo apply
            // call parent
            
    myapp.mygrid.superclass.initComponent.apply(this,arguments);
        } 
    // eo function initComponent
    }); 
    this doesnt work .. what i want to do is a cancel button in the autoLoad mask of a grid. Normaly when you pass this configuration to the grid:

    autoload: true,

    you have an autoload function, which will started at the very beggining of the application. now i want the posibility to stop this and at the same time to unmask the grid element

  5. #5
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default Trying to get component before it's defined

    Trying to get component before it's defined


    The problem is you are trying to get component before it's defined.

    Set loadMask property in afterRender method and apply it to "this" instance.

    afterRender: function(){
    Ext.grid.GridPanel.superclass.afterRender.apply(this, arguments);
    this.loadMask = new Ext.LoadMask(this.el, { ... });
    }
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  6. #6
    Sencha User
    Join Date
    Mar 2011
    Posts
    63
    Vote Rating
    0
    jorgeluislay is an unknown quantity at this point

      0  

    Default


    PHP Code:
    listeners: {
       
    'afterrender': function(){
         
    Ext.grid.GridPanel.superclass.afterRender.apply(thisarguments);
          
    this.loadMask = new Ext.LoadMask(Ext.getCmp('mygrid').getEl(), {msg:'..'});
                        }
                    }, 

    you mean like this ?

Thread Participants: 2