1. #1
    Sencha User
    Join Date
    Jul 2012
    Location
    Italy
    Posts
    84
    Vote Rating
    4
    Answers
    1
    Tegola is on a distinguished road

      0  

    Default Answered: List emptyText: disable scrolling and fill parent container

    Answered: List emptyText: disable scrolling and fill parent container


    I'm finding myself in the need for a more advanced "no items found" placeholder inside a list. I'm already using the emptyText config with custom markup + css to make it look somewhat right, but there are two shortcomings:
    1. The emptyText container is not occupying the entire list height, so my custom markup won't fill the screen (see image below)
    2. Since the emptyText container has a different background, I don't want it to be scrollable when there is nothing to view, since it will reveal the white background behind it
    Any advice?

    Thanks

    emptyText.png
    Attached Images
    Last edited by Tegola; 5 Sep 2012 at 6:07 AM. Reason: Better title

  2. Sorry, I'm short of time to setup a Sencha Fiddle, but I hope that this updated versions for Sencha Touch 2.1rc3 will help you:

    Base list class which will stop scrolling when empty:
    Code:
    Ext.define('MyBaseList', {
        extend: 'Ext.List',
        
        config: {
            emptyText: [
                '<div class="x-no-items">',
                    '<div class="x-no-items-title">No items</div>',
                '</div>'
            ].join(''),
            
            listeners: {
                refresh: 'toggleScrolling'
            }
        },
        
        toggleScrolling: function() {
            this.setScrollable(this.getStore().getCount() > 0);
        }
    });
    The extended list, with a customized emptyText value:
    Code:
    Ext.define('MyExtendedList', {
        extend: 'MyBaseList',
        xtype: 'myextendedlist',
        
        config: {
            itemTpl: '{text}'
            
            emptyText: [
                '<div class="x-no-items">',
                    '<div class="x-no-items-icon my-icon-class"></div>',
                    '<div class="x-no-items-title">No custom items</div>',
                    '<div class="x-no-items-message">Additional message</div>',
                '</div>'
            ].join('')
        }
    });
    The SASS code needed to make the emptyText item fullscreen:
    Code:
    .x-list-emptytext {
        background-color: #dee3e9;
        @include insertion(100%, 100%);
        
        .x-innerhtml {
            height: 100%;
            @include display-box;
            @include box-orient(vertical);
            @include box-pack(center);
        }
    }
    .x-no-items {
        text-align: center;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
        
        .x-no-items-icon {
            margin: 0 auto;
            
            &.my-icon-class { /* Your sprite here */ }
        }
        
        .x-no-items-title {
            color: #666;
            font-weight: bold;
            font-size: 1em;
        }
        
        .x-no-items-text {
            color: #777;
            margin-top: 0.25em;
            font-size: 0.7em;
        }
    }

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    Answers
    3575
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Use CSS to style it all if the white background is all you don't want.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Jul 2012
    Location
    Italy
    Posts
    84
    Vote Rating
    4
    Answers
    1
    Tegola is on a distinguished road

      0  

    Default


    Styling the background with the right color will not solve anything. When the list will actually contain something I'll have the same problem, this time with the new background color.

    Anyway, I really don't want it to scroll when there's nothing inside the list. The only solution I can think of is to nest the list and the "no items" panel inside another panel, and do the logic to show/hide things if the number of the store elements is zero. This would be too heavy since I use a lot of lists in a navigation view, and I already have some jittery animation/movement when going too deep inside the nav view.

    Still searching for a solution.
    Last edited by Tegola; 7 Sep 2012 at 10:30 AM. Reason: Spelling

  5. #4
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    618
    Vote Rating
    29
    Answers
    67
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      1  

    Default


    You can make list scrollable:false during list initialisation and make it scrollable:true only when it has items, on updateData for example.

  6. #5

  7. #6
    Sencha User
    Join Date
    Jul 2012
    Location
    Italy
    Posts
    84
    Vote Rating
    4
    Answers
    1
    Tegola is on a distinguished road

      0  

    Default


    Thanks for your example. It's a bit sophisticated but it gives the idea.
    I still need to make the emptyText container fill the list height though...

  8. #7
    Sencha User
    Join Date
    Jul 2012
    Location
    Italy
    Posts
    84
    Vote Rating
    4
    Answers
    1
    Tegola is on a distinguished road

      0  

    Default


    Finally made it:

    The base list class which will stop scrolling when there are no items:
    Code:
    Ext.define('MyBaseList', {
        extend: 'Ext.List',
        xtype: 'baselist',
        
        config: {
            emptyText: [
                '<div class="x-no-items">',
                    '<div class="x-no-items-title">No items</div>',
                '</div>'
            ].join('')
        },
        
        initialize: function() {
            this.callParent(arguments);
            this.on('refresh', this.handleRefresh, this);
        },
        
        handleRefresh: function() {
            this.setScrollable(this.getStore().getCount() > 0);
        }
    });
    The extended list, with a customized emptyText value:
    Code:
    Ext.define('MyExtendedList', {
        extend: 'MyBaseList',
        xtype: 'myextendedlist',
        
        config: {
            emptyText: [
                '<div class="x-no-items">',
                    '<div class="x-no-items-icon my-icon-class"></div>',
                    '<div class="x-no-items-title">No custom items</div>',
                    '<div class="x-no-items-message">Additional message</div>',
                '</div>'
            ].join('')
    
            
                itemTpl: 'My value: {value}'
        }
    });
    The CSS needed to make the emptyText object fill the list:
    Code:
    .x-list-emptytext {
        background-color: #dee3e9;
        height: 100%;
        
        .x-innerhtml {
            height: 100%;
            @include display-box;
            @include box-orient(vertical);
            @include box-pack(center);
        }
    }
    And my CSS code to style the emptyText object
    Code:
    .x-no-items {
        text-align: center;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
        
        .x-no-items--icon {
            margin: 0 auto;
        }
        
        .x-no-items--title {
            color: #666;
            font-weight: bold;
            font-size: 1em;
        }
        
        .x-no-items-message {
            color: #777;
            margin-top: 0.25em;
            font-size: 0.8em;
        }
    }
    And here's my result (broken back button due to Chrome and Sencha 2.1.0 beta2):
    example.png

  9. #8
    Ext JS Premium Member
    Join Date
    Jul 2008
    Location
    Ottawa, Ontario
    Posts
    3
    Vote Rating
    0
    aberlinguette is on a distinguished road

      0  

    Default


    Anyway you can post a full example of your solution on http://www.senchafiddle.com? - i'm trying to get your example working and coming up short.

    Much appreciated

  10. #9
    Sencha User
    Join Date
    Jul 2012
    Location
    Italy
    Posts
    84
    Vote Rating
    4
    Answers
    1
    Tegola is on a distinguished road

      0  

    Default


    Sorry, I'm short of time to setup a Sencha Fiddle, but I hope that this updated versions for Sencha Touch 2.1rc3 will help you:

    Base list class which will stop scrolling when empty:
    Code:
    Ext.define('MyBaseList', {
        extend: 'Ext.List',
        
        config: {
            emptyText: [
                '<div class="x-no-items">',
                    '<div class="x-no-items-title">No items</div>',
                '</div>'
            ].join(''),
            
            listeners: {
                refresh: 'toggleScrolling'
            }
        },
        
        toggleScrolling: function() {
            this.setScrollable(this.getStore().getCount() > 0);
        }
    });
    The extended list, with a customized emptyText value:
    Code:
    Ext.define('MyExtendedList', {
        extend: 'MyBaseList',
        xtype: 'myextendedlist',
        
        config: {
            itemTpl: '{text}'
            
            emptyText: [
                '<div class="x-no-items">',
                    '<div class="x-no-items-icon my-icon-class"></div>',
                    '<div class="x-no-items-title">No custom items</div>',
                    '<div class="x-no-items-message">Additional message</div>',
                '</div>'
            ].join('')
        }
    });
    The SASS code needed to make the emptyText item fullscreen:
    Code:
    .x-list-emptytext {
        background-color: #dee3e9;
        @include insertion(100%, 100%);
        
        .x-innerhtml {
            height: 100%;
            @include display-box;
            @include box-orient(vertical);
            @include box-pack(center);
        }
    }
    .x-no-items {
        text-align: center;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
        
        .x-no-items-icon {
            margin: 0 auto;
            
            &.my-icon-class { /* Your sprite here */ }
        }
        
        .x-no-items-title {
            color: #666;
            font-weight: bold;
            font-size: 1em;
        }
        
        .x-no-items-text {
            color: #777;
            margin-top: 0.25em;
            font-size: 0.7em;
        }
    }