Set an empty text to grid if store has an exception

[coshmos]

Hi.

I've got the panel

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [{
        text: 'Name',
        dataIndex: 'name'
    },
    {
        text: 'Email',
        dataIndex: 'email',
        flex: 1
    },
    {
        text: 'Phone',
        dataIndex: 'phone'
    }],
    height: 200,
    width: 400,
    renderTo: Ext.getBody(),
    viewConfig: {
        emptyText: 'Something is wrong'
    }
});

And the store:

Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields: ['name', 'email', 'phone'],
    data: {
        'items': [{
            'name': 'Lisa',
            "email": "lisa@simpsons.com",
            "phone": "555-111-1224"
        },
        {
            'name': 'Bart',
            "email": "bart@simpsons.com",
            "phone": "555-222-1234"
        },
        {
            'name': 'Homer',
            "email": "home@simpsons.com",
            "phone": "555-222-1244"
        },
        {
            'name': 'Marge',
            "email": "marge@simpsons.com",
            "phone": "555-222-1254"
        }]
    },
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    },
    url: 'StoreUrl',
    listeners: {
        exception: function(proxy, response, operation) {
            Ext.Msg.show({
                title: 'Exception',
                msg: response.statusText + response.status,
                buttons: Ext.Msg.OK,
                icon: Ext.Msg.ERROR
            });
        }
    }
});

I want to set an emptyText (or just show it) when 'exception' is fired. Is it possible?

[mitchellsimoens]

The view will listen to the load event of the store and if the store has zero records in it it will show the emptyText. It may listen to datachanged, not 100% on that without looking.

[coshmos]

I add a listener through store proxy events and it works:

this.store.proxy.on('exception', function (proxy, response, operation) {
	me.emptyText = 'Error: ' + response.statusText + '<br/>Code: ' + response.status;
	me.view.loadMask.hide();
});​

But the emptyText doesn't appear. Why?

[coshmos]

Ok. The EmptyText doesn't appear because I've got dirty data. So, I just add a dummy row and then remove all rows. Not a good code, but it's working.

this.store.proxy.on('exception', function (proxy, response, operation) {
            if (autoUpdateTask)
                Ext.TaskManager.stop(autoUpdateTask);
            me.emptyText = 'Error: ' + response.statusText + '<br/>Code: ' + response.status;
            if (me.items.items[0]) {
                me.items.items[0].store.add({});
                me.items.items[0].store.removeAll();
            }
            me.view.loadMask.hide();
});

I need one little step to update emptyText from default to custom.

[coshmos]

Done!

		this.store.proxy.on('exception', function (proxy, response, operation) {
			if (autoUpdateTask)
				Ext.TaskManager.stop(autoUpdateTask);
			var emptyText = 'Error: ' + response.statusText + '<br/>Code: ' + response.status;
			me.view.emptyText = '<div class="x-grid-empty">' + emptyText + '</div>';
			if (me.items.items[0]) {
				me.items.items[0].store.add({});
				me.items.items[0].store.removeAll();
			}
			me.view.loadMask.hide();
		});