1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    14
    Vote Rating
    0
    thecodegenius is on a distinguished road

      0  

    Default Answered: loading mask animtated gif

    Answered: loading mask animtated gif


    Hi,
    I was hoping that somebody could shed some light on this issue for me. I have searched through the documentation and on the forums for a way to use an animated gif as a loading mask. Is it possible? and if so how can it be done.
    Thanks

  2. You mean like this?
    Code:
    (container).setMasked({
           xtype: 'loadmask'
            , html:"<img src='http://all-ez.com/images/smiling.gif'/>"
            , message: ''
            , indicator:false
        }
    });
    
    ...
    
    (container).unmask();

  3. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Answers
    124
    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

      1  

    Default


    Hi!

    you may try this:-

    Code:
    Ext.Viewport.add({
        masked: {
           xtype: 'loadmask'
            , html:"<img src='http://all-ez.com/images/smiling.gif'/>"
            , message: ''
            , indicator:false
        }
    });
    output:-

    mask.png
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  4. #3
    Sencha User
    Join Date
    Jul 2012
    Posts
    14
    Vote Rating
    0
    thecodegenius is on a distinguished road

      0  

    Default


    Thank you,
    it works but would you be able to advise me as to how I could add this to a existing project. I have tried adding it to the launch function in my app.js, Ext.setup() , and directly to the view which requires the loading mask without success. I am very new to web apps and have only started developing with sencha touch and web apps for the past 4 days. This is my final task before releasing my full app and so would you be kind enough to give an example of how this could be used in the example sencha touch Oreilly app twitter view or similar.
    thanks.

  5. #4
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      1  

    Default


    You mean like this?
    Code:
    (container).setMasked({
           xtype: 'loadmask'
            , html:"<img src='http://all-ez.com/images/smiling.gif'/>"
            , message: ''
            , indicator:false
        }
    });
    
    ...
    
    (container).unmask();

  6. #5
    Sencha User
    Join Date
    Jul 2012
    Posts
    14
    Vote Rating
    0
    thecodegenius is on a distinguished road

      0  

    Default


    Thanks for the reply, it's helped to push me in the right direction. I have now used the loading mask that I created with your guidance within a listener in my applications store. I use the beforeload: within my listener to show the mask whilst data is retrieved and the list is populated and I use load: to dismiss the mask once the operation has been completed. This works well, but the default mask is still loaded behind the mask that I have created with the animated gif. My question has been answered but I would like to know how to disable the default loading masks for lists or how to remove the greyish overlay that the spinner is contained in. I have tried using both list.loadMask.disable() and setLoadMask: 'false' without success and changing the values of x-mask, .x-mask.x-mask-gray in the .scss file doesn't seem to work either for removing the greyish background.

  7. #6
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


    What do you mean the default mask is still loaded? Did you use both mine and sword-it's code? If you did then that is a problem. You should only use one or the other.

    Or define a LoadMask class [ Ext.define(...) ] and use
    Code:
    (container).setMask(Ext.create('LoadMaskClassHere') || {xtype: 'myloadmaskxtype'});

  8. #7
    Sencha User
    Join Date
    Jul 2012
    Posts
    14
    Vote Rating
    0
    thecodegenius is on a distinguished road

      0  

    Default


    I didn't use both examples, but correct me if I'm wrong doesn't a list that uses the listpaging plugin have a default loading mask? I modified the twitter view of the oreilly example app as follows;


    Code:
    var loadMask = new Ext.LoadMask(Ext.getBody(), 
    							{
    								html:"<img src='resources/images/loadmask.gif'/>",
    								message: 'LOADING.....',
    								indicator:false
    
    
    
    
    							});
    
    
    Ext.define('Oreilly.store.Tweets', {
        extend: 'Ext.data.Store',
    
    
        config: {
    
    listeners: {
        beforeload: function(store, opt){
               loadMask.show();
    
    
        },
        load: function(store) {
              loadMask.hide();
        }
    },
    
            fields: ['from_user', 'profile_image_url', 'text', 'created_at'],
    
    
            pageSize: 10,
    
    
            proxy: {
                type: 'jsonp',
                url: 'http://search.twitter.com/search.json',
    
    
                pageParam: 'page',
                limitParam: 'rpp',
    
    
                reader: {
                    type: 'json',
                    rootProperty: 'results'
                }
            }
        }
    });
    This results in both the loading mask that I have created and the, "default," loading mask being shown.
    I'll post a screen shot

  9. #8
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


    Yeah I believe it just uses the standard LoadMask,


    // We provide our own load mask so if the Store is autoLoading already disable the List's mask straight away, // otherwise if the Store loads later allow the mask to show once then remove it thereafter if (store) { this.disableDataViewMask(store); }
    Source: ListPaging

    It should only be showing the default loading mask though if you don't define your own, though.

    Where is the code for where you define your listpaging plugin?

  10. #9
    Sencha User
    Join Date
    Jul 2012
    Posts
    14
    Vote Rating
    0
    thecodegenius is on a distinguished road

      0  

    Default


    the list paging plugin is defined in my view as follows;

    Code:
    Ext.define('template.view.Tweets', {
    
    
        extend: 'Ext.List',
        requires: [
            'Ext.plugin.PullRefresh',
            'Ext.plugin.ListPaging'
        ],
    
    
        xtype: 'tweets',
    
    
    
    
    
    
        config: {
    
    
    
    
    	title: 'TWEETS',
            iconCls: 'twitter2',
            cls: 'tweets',
    
    
    
    
            items: [
                {
    		title: 'TWEETS',
                    docked: 'top',
                    xtype: 'titlebar'
    
    
                },{
    		html: '<iframe src =\"adverts.html" width=\"100%\" height=\"55\" frameBorder=\"0\" scrolling=\"no\"></iframe>'
                          
    		}
            ],
    
    
            store: 'Tweets',
            limit: 20,
            disableSelection: true,
    
    
    
    
            plugins: [
                { type: 'listpaging' },
                { type: 'pullrefresh' }
            ],
    
    
            emptyText: '<p class="no-searches">No tweets</p>',
    
    
            itemTpl: Ext.create('Ext.XTemplate',
                '<div class="tweet">',
                    '<span class="posted">{[this.posted(values.created_at)]}</span>',
                    '<h2>{from_user}</h2>',
                    '<p>{text}</p>',
                '</div>',
                {
                    posted: function(date) {
                        try {
                            var now = Math.ceil(Number(new Date()) / 1000),
                                dateTime = Math.ceil(Number(new Date(date)) / 1000),
                                diff = now - dateTime,
                                str;
    
    
                            if (diff < 60) {
                                return String(diff) + ' seconds ago';
                            } else if (diff < 3600) {
                                str = String(Math.ceil(diff / (60)));
                                return str + (str == "1" ? ' minute' : ' minutes') + ' ago';
                            } else if (diff < 86400) {
                                str = String(Math.ceil(diff / (3600)));
                                return str + (str == "1" ? ' hour' : ' hours') + ' ago';
                            } else if (diff < 60 * 60 * 24 * 365) {
                                str = String(Math.ceil(diff / (60 * 60 * 24)));
                                return str + (str == "1" ? ' day' : ' days') + ' ago';
                            } else {
                                return Ext.Date.format(new Date(date), 'jS M \'y');
                            }
                        } catch (e) {
                            return '';
                        }
                    }
                }
            )
        }
    });

  11. #10
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


    I know the PullRefresh plugin uses its own loading spinner. Is that what you are talking about?

Thread Participants: 2

Tags for this Thread