List emptyText: disable scrolling and fill parent container

[Tegola]

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

[mitchellsimoens]

Use CSS to style it all if the white background is all you don't want.

[Tegola]

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.

[bluehipy]

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

[bluehipy]

On updateData is not working but on refresh is fine.


http://www.senchafiddle.com/#8mt51

Ext.Loader.setConfig({
    enabled: true
});
Ext.define("MyList",{
    extend:'Ext.dataview.List',
    xtype:'xmylist',
    initialize:function()
    {
        this.callParent(arguments);
        this.setScrollable(false);
        this.on('refresh',this.handleUpdateData,this);
    },
    handleUpdateData:function()
    {
        this.setScrollable(this.getStore().getCount() > 0);
        
    }
});
Ext.application({
    name: 'SenchaFiddle',
    
    launch: function() {
        Ext.create('Ext.Panel', {
            fullscreen: true,
            layout:'vbox',
            items:[
                {
                      xtype:'xmylist',
                    flex:2,
                },
                {
                    xtype:'button',
                    text:'add',
                    flex:1,
                    handler:function()
                    {
                        Ext.Viewport.down('xmylist').setStore(
                            {
                                fields:['label','value'],
                                data:[
                                    {label:'aaaa', value:'bbbb'},
                                    {label:'aaaa', value:'bbbb'},
                                    {label:'aaaa', value:'bbbb'},
                                    {label:'aaaa', value:'bbbb'},
                                    {label:'aaaa', value:'bbbb'}
                                ]
                            }
                        );
                    }
                },
                {
                      xtype:'button',
                    text:'remove',
                    flex:1,
                    handler:function()
                    {
                        Ext.Viewport.down('xmylist').getStore().removeAll();
                    }
                }
                
            ]
        });
    }
});

[Tegola]

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...

[Tegola]

Finally made it:

The base list class which will stop scrolling when there are no items:

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:

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:

.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

.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

[aberlinguette]

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

[Tegola]

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:

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:

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:

.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;
    }
}