Touch 2 List loading mask problem !!!!

[reco123]

I have a question about set list masked. Here is my code. I use "masked" to gray out the list before data get loaded. But how can I remove the mask afterward?

I tried to listen to the event load.. but it never fired.. which event i should listen to ?
also, I tried to use c.setMasked(false); but it does't work. how can i get the list instance inside the event function?
Thanks!

    var list =     {
      xtype: 'list',
      title: 'Game List',
      id: 'gameList',
      ui: 'round',
      flex: 1,
      width: 300,
      store: 'Games',
      cls: 'gameList',
      masked: {
                xtype: 'loadmask',
                message: 'loading data'
            }, // masked
      listeners: {
        painted: function(c) {
              list.setMasked(false);
        }
      },
      itemTpl: Ext.create('Ext.XTemplate',
       '<div class="game">',
       '<img class="gameuserpic" src="{userPic}" />',
       '<img class="gamemoveimg" src="resources/images/{action}.png"/>',
       '<p class="info">{userName}</p>',
       '<p class="move">{move}</p>',
       '</div>'),
      //end itemTPl
      emptyText: 'Create some new Game!!'
    };

[bricemason]

List components will handle the removal of the mask automatically. Here's the snippet from the source of Ext.dataview.Dataview related to that:

onLoad: function(store) {
    //remove any masks on the store
    this.hasLoadedStore = true;
    this.setMasked(false);


    if (!store.getCount()) {
        this.showEmptyText();
    }
}

Your call to setMasked in the painted event failed because the parameter for that event is not a component but the element. Since the list automatically handles the removal of that mask, you don't need that painted event in there anymore.

Brice

[reco123]

It doesn't work. I tried what u said just let it remove the mask automatically... but it never happened ... Is there anyway i can remove it manually?

[bricemason]

You can certainly remove it manually however if the automatic removal is not working for you then there's another issue that needs to be worked out. Are there any errors or warnings in your browser console? Do you have a breakpoint set that has stopped processing?

For full reference, here's the code that I used.

app.js (launch function):

var list = {
    xtype: 'list',
    title: 'Game List',
    id: 'gameList',
    ui: 'round',
    flex: 1,
    width: 300,
    store: 'Games',
    cls: 'gameList',
    masked: {
        xtype: 'loadmask',
        message: 'loading data'
    }, 
    itemTpl: Ext.create('Ext.XTemplate',
        '<div class="game">',
        '<img class="gameuserpic" src="{userPic}" />',
        '<img class="gamemoveimg" src="resources/images/{action}.png"/>',
        '<p class="info">{userName}</p>',
        '<p class="move">{move}</p>',
        '</div>'),
    emptyText: 'Create some new Game!!'
};


// Initialize the main view
Ext.Viewport.add(list);

model:

Ext.define('MyApp.model.Game', {
    extend: 'Ext.data.Model',
    
    config: {
        fields: [
            {name: 'userPic', type: 'string'},
            {name: 'action', type: 'string'},
            {name: 'userName', type: 'string'},
            {name: 'move', type: 'string'}
        ]
    }
});

store:

Ext.define('MyApp.store.Games', {
   extend: 'Ext.data.Store',


   config: {
      storeId: 'Games',
      model: 'MyApp.model.Game',
      proxy: {
         type: 'ajax',
         url: 'data/games.json',
         reader: {
            type: 'json',
            rootProperty: 'games'
         }
      },
      autoLoad: true
   }
});

json snippet:

{
   "games": [
      { "userPic": "user-pic1", "action": "action1", "userName": "userName1", "move": "move1" },
      { "userPic": "user-pic2", "action": "action2", "userName": "userName2", "move": "move2" },
      { "userPic": "user-pic3", "action": "action3", "userName": "userName3", "move": "move3" }
   ]
}

For the code that you've already posted, you can obtain a reference to that list by doing:

var theList = Ext.getCmp('gameList');

to get the component which you can then remove the mask.

Brice

[reco123]

Thank you so much !! i just figured out. i used self-defined populate function to load the data which it never fired load event. Now i did it manually by calling "self.fireEvent("load");" so it works now !