Ext.List shows emptyText immediatly irregardless of deferEmptyText

[John2011]

I have an ext.List and want to show a text when there are no items in it. According to the documentation I can use the emptyText config for that. However, I want this text to be only shown after loading data from the attached store. This should happen automatically because deferEmptyText is true by default.

However, the text is shown immediately. Is this a bug, is or is there something I am overlooking?

var list = Ext.create('Ext.List', {
                id: 'locationList',
                emptyText: 'No items found.',
                deferEmptyText: true,
                store: myStore
});

I am now going to try a workaround where the emptyText is set after the datachanged event, but it would be nice to know what exactly is going on here.

I am using Sencha Touch 2.0.0 PR2.
Relevant API Documentation: http://docs.sencha.com/touch/2-0/#!/....dataview.List

[John2011]

While working on my workaround I discovered another weird behavior.

The emptyText is placed inside an element with the class x-innerhtml. It is placed there the first time an emptyText is set. However, once the list is filled with items this element remains in the DOM. If there are any styles attached to it it will be visible on top of the list.

The workaround for this is to place another element inside the emptyText and apply the styling there.

This is the code that works:

myStore = Ext.create('Ext.data.JsonStore', {
     model: 'myModel',
     storeId: 'myStore',
     listeners: {
        datachanged: function() {
        
            myList.setEmptyText('<div id="noItemsMessage">No items found.</div>');
        }
});

[rdougan]

Thanks for the report. We shall look into it.