Agile Development. more fun less stress.

Ext.dataview.DataView and setEmptyText

Posted: February 16th, 2012 | Author: vid | Filed under: Development | Tags: , , , , | No Comments »

I’m currently developing a Sencha Touch application and therefore I use Sencha Touch Beta2.

I had to change the emptyText property of a Ext.dataview.List via setEmptyText() and ran into a little bug which adds another emptyTextCmp component inside the list’s element rather than update the existent one.

So I came up with an override for this. maybe this helps someone out there too.

The function code we are going to override is Ext.dataview.Dataview#updateEmptyText:

Original function code:

updateEmptyText: function(newEmptyText) {
        var me = this;
        if (newEmptyText) {
            me.emptyTextCmp = me.add({
                xtype: 'component',
                cls: me.getBaseCls() + '-emptytext',
                html: newEmptyText,
                hidden: true
            });
        }
        else if (me.emptyTextCmp) {
            me.remove(me.emptyTextCmp, true);
            delete me.emptyTextCmp;
        }
    }

Override:

Ext.define('My.override.of.dataview.DataView', {
    override: 'Ext.dataview.DataView',
   
    updateEmptyText: function(newEmptyText){
        var me = this;
        if (newEmptyText) {
            if (me.emptyTextCmp){
                me.emptyTextCmp.setHtml(newEmptyText);
            } else {
                me.emptyTextCmp = me.add({
                    xtype: 'component',
                    cls: me.getBaseCls() + '-emptytext',
                    html: newEmptyText,
                    hidden: true
                });
            }
        } else if (me.emptyTextCmp) {
            me.remove(me.emptyTextCmp, true);
            delete me.emptyTextCmp;
        }
    }
});