1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    104
    Vote Rating
    0
    rbahumi is on a distinguished road

      0  

    Default Answered: How to place a loading indicator above a button

    Answered: How to place a loading indicator above a button


    Hi,

    I am trying to place a loading indicator on top of a 'Post' button. The post button is placed inside a container (because the setMasked() is under the container API), and that container is placed inside a toolbar.

    Issue is, because the toolbar is narrow, the loading indicator appears on the bottom-left corner of the tool bar, instead of being placed above the 'Post' button.
    indicator.jpg
    Any idea how can that be fixed?
    Attached Images

  2. I think I understand what you're saying although it still seems strange to have that container in the toolbar with the button.

    I have an alternative method of handling this, not sure how silly or weird it is but it's a thought. Here's what I did with your 'newbutton'

    Code:
    var newButton = {
        xtype: 'button',
        data: 'Login',
        ui: 'decline',
        id: 'newbutton',
        tpl: [
            '<div class="x-loading-spinner">',
                '<span class="x-loading-top"></span>',
                '<span class="x-loading-right"></span>',
                '<span class="x-loading-bottom"></span>',
                '<span class="x-loading-left"></span>',
            '</div>',
            '<span class="x-button-label">{.}</span>'
        ].join(''),
        handler: function() {
            this.setDisabled(true);
            this.addCls('x-loading');
            this.setData('Loading');
        }
    };
    along with the styles to match:

    Code:
    #newbutton {
       .x-loading-spinner {
          display: none;
          font-size: 100%;
          float: left;
          margin-right: 2px;
       }
    
    
       .x-button-label {
          text-overflow: clip;
       }
    
    
       &.x-loading {
          .x-loading-spinner {
             display: block;
          }
       }
    }
    The button contains a template with the loading spinner included, but hidden by default. When the button is clicked, the button is disabled, a new label applied, and the css class used to show the spinner is added.

    You could modify the spinner color to suit your needs, not sure if this is even acceptable to you.

    Brice

  3. #2
    Sencha Premium Member bricemason's Avatar
    Join Date
    Jan 2008
    Location
    Upstate NY
    Posts
    280
    Answers
    49
    Vote Rating
    42
    bricemason has a spectacular aura about bricemason has a spectacular aura about bricemason has a spectacular aura about

      0  

    Default


    What is the purpose of masking the toolbar? Is it to prevent further interaction while you're processing the Post button or aesthetics or both?

    If it's to prevent further interaction, it makes more sense to call setMasked() on the whole view (not just the container inside the toolbar). If you truly want to prevent interaction with only the items in the toolbar it might be better to just disable the controls you want and display your own message.

    If you don't think these ideas fit your scenario, please post more details with what you want to accomplish along with any relevant code samples.

    Brice
    Brice Mason
    Front End Developer
    Modus Create

    @bricemason
    bricemason.com

    Sencha Touch Screencasts
    Vimeo - Sencha Touch Channel

    Github Projects:
    Sencha Cordova Builder enables the automatic creation, building, and running of PhoneGap (Cordova) projects with Sencha Touch.

    Am I Sencha Touch Ready? checks your system to determine what you need to do to start Sencha Touch development. If you're having trouble getting up and running, try this out.

    Sencha Tools Bridge allows Sencha SDK Tools to co-exist with Sencha Cmd on the same system.

  4. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    104
    Vote Rating
    0
    rbahumi is on a distinguished road

      0  

    Default


    Quote Originally Posted by bricemason View Post
    What is the purpose of masking the toolbar? Is it to prevent further interaction while you're processing the Post button or aesthetics or both?
    I have 2 screens:
    1. The first screen that contains the Toolbar and users posts. On this screen the user cannot change anything, therefor it doesn't require a 'login'.
    2. The second screen, is where the user can post new reports, this screen requires a login. (pressing the the button with text 'Post' on the first screen, will transform the user to this screen)

    The Toolbar itself is part of the first screen. It contains a single button, initially with the text 'Login'. When the user presses the login button, a Facebook connect attempt happens, and the mask is shown. When the login process has finished, the button text will be replaced with the text 'Post'.

    Quote Originally Posted by bricemason View Post
    If you don't think these ideas fit your scenario, please post more details with what you want to accomplish along with any relevant code samples.
    Brice
    Note: The indicator below the toolbar (The one I showed in my previous post ) belonged to a plugin, it is not part of the containers mask. However, the container's indicator still has a fixed frame, which a I wish to change - so the indicator will appear on top of the button.

    I have simplified the code, so the problem can be differentiated from the context. In this example there is a 'Login' button: when tapped, it shows the loader and the button text switches to 'Post'.
    Here is the picture of the loading indicator (the Toolbar height is set to 200, otherwise it wont show)

    loading.png

    Remember to add to this line to the sass file: @include sencha-loading-spinner;
    And the app.js code :
    Code:
    Ext.application({
        name: 'Surfspace',
        requires : ['Ext.tab.Panel', 'Ext.dataview.List', 'Ext.plugin.PullRefresh',],
        
        launch: function() {
            Ext.fly('appLoadingIndicator').destroy();
            var newButton = {
                xtype: "button",
                text: 'Login',
                ui: 'decline',
                id: 'newbutton',
                handler: function(){
                    Ext.getCmp('newbuttoncontainer').setMasked({
                    //Ext.getCmp('reportlisttoolbar').setMasked({
                        xtype: 'loadmask',
                        message: '',
                        indicator: true
                    });
                
                    var button = this;
                    button.setText('Post');
                },
                scope: newButton
            };
            
            var newbuttoncontainer = { 
                xtype: 'container',
                id: 'newbuttoncontainer',
                layout: 'hbox',
                items: [ newButton ],
                };
            
            var topToolbar = {
                xtype: "toolbar",
                height: 200,
                title: 'Reports',
                docked: "top",
                id: 'reportlisttoolbar',
                items: [
                    { xtype: 'spacer' },
                    newbuttoncontainer
                ]
            };
        
            Ext.Viewport.add(topToolbar);
        }
    });
    Attached Images

  5. #4
    Sencha Premium Member bricemason's Avatar
    Join Date
    Jan 2008
    Location
    Upstate NY
    Posts
    280
    Answers
    49
    Vote Rating
    42
    bricemason has a spectacular aura about bricemason has a spectacular aura about bricemason has a spectacular aura about

      0  

    Default


    I think I understand what you're saying although it still seems strange to have that container in the toolbar with the button.

    I have an alternative method of handling this, not sure how silly or weird it is but it's a thought. Here's what I did with your 'newbutton'

    Code:
    var newButton = {
        xtype: 'button',
        data: 'Login',
        ui: 'decline',
        id: 'newbutton',
        tpl: [
            '<div class="x-loading-spinner">',
                '<span class="x-loading-top"></span>',
                '<span class="x-loading-right"></span>',
                '<span class="x-loading-bottom"></span>',
                '<span class="x-loading-left"></span>',
            '</div>',
            '<span class="x-button-label">{.}</span>'
        ].join(''),
        handler: function() {
            this.setDisabled(true);
            this.addCls('x-loading');
            this.setData('Loading');
        }
    };
    along with the styles to match:

    Code:
    #newbutton {
       .x-loading-spinner {
          display: none;
          font-size: 100%;
          float: left;
          margin-right: 2px;
       }
    
    
       .x-button-label {
          text-overflow: clip;
       }
    
    
       &.x-loading {
          .x-loading-spinner {
             display: block;
          }
       }
    }
    The button contains a template with the loading spinner included, but hidden by default. When the button is clicked, the button is disabled, a new label applied, and the css class used to show the spinner is added.

    You could modify the spinner color to suit your needs, not sure if this is even acceptable to you.

    Brice
    Brice Mason
    Front End Developer
    Modus Create

    @bricemason
    bricemason.com

    Sencha Touch Screencasts
    Vimeo - Sencha Touch Channel

    Github Projects:
    Sencha Cordova Builder enables the automatic creation, building, and running of PhoneGap (Cordova) projects with Sencha Touch.

    Am I Sencha Touch Ready? checks your system to determine what you need to do to start Sencha Touch development. If you're having trouble getting up and running, try this out.

    Sencha Tools Bridge allows Sencha SDK Tools to co-exist with Sencha Cmd on the same system.

  6. #5
    Sencha User
    Join Date
    Sep 2012
    Posts
    104
    Vote Rating
    0
    rbahumi is on a distinguished road

      0  

    Default


    Thanks Brice, I really like your solution.

    Do you know any good article/explanation regarding the "loading-spinner" CSS?
    For example, what are the 'x-loading-<top|bottom|right|left>' and how to play with them?

    And thanks again. It is a great solution.

  7. #6
    Sencha Premium Member bricemason's Avatar
    Join Date
    Jan 2008
    Location
    Upstate NY
    Posts
    280
    Answers
    49
    Vote Rating
    42
    bricemason has a spectacular aura about bricemason has a spectacular aura about bricemason has a spectacular aura about

      1  

    Default


    To customize the color, there is a css var for it:

    http://docs.sencha.com/touch/2-1/#!/...-spinner-color

    but the best resource (and most fun to look at) is always the source. The partial scss for the spinner is located here:

    sdk-directory/resources/themes/stylesheets/sencha-touch/default/widgets/_loading-spinner.scss

    and is worth a read.

    Brice
    Brice Mason
    Front End Developer
    Modus Create

    @bricemason
    bricemason.com

    Sencha Touch Screencasts
    Vimeo - Sencha Touch Channel

    Github Projects:
    Sencha Cordova Builder enables the automatic creation, building, and running of PhoneGap (Cordova) projects with Sencha Touch.

    Am I Sencha Touch Ready? checks your system to determine what you need to do to start Sencha Touch development. If you're having trouble getting up and running, try this out.

    Sencha Tools Bridge allows Sencha SDK Tools to co-exist with Sencha Cmd on the same system.

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar