grid emptyText w/o locking

by Johan Vandeplas

HTML

<script src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all-dev.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css">

CSS

.x-grid-empty {
    background-color: #ff0000;
    color: #ffffff;    
}

JavaScript

Ext.onReady(function () {
    Ext.define('MyApp.model.Person', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'id',
            type: 'int'
        }, {
            name: 'name',
            type: 'string'
        }, {
            name: 'email',
            type: 'string'
        }, {
            name: 'phone',
            type: 'string'
        }]
    });
    Ext.define('MyApp.store.Persons', {
        extend: 'Ext.data.Store',

        //best to require the model if you  put it in separate files
        requires: ['MyApp.model.Person'],
        model: 'MyApp.model.Person',
        storeId: 'personStore',
        data: {
            items: [{
                id: 1,
                name: "Lisa",
                email: "[email protected]",
                phone: "555-111-1224"
            }, {
                id: 2,
                name: "Bart",
                email: "[email protected]",
                phone: "555-222-1234"
            }, {
                id: 3,
                name: "Homer",
                email: "[email protected]",
                phone: "555-222-1244"
            }, {
                id: 4,
                name: "Marge",
                email: "[email protected]",
                phone: "555-222-1254"
            }]
        },
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });

    var grid = Ext.create('Ext.grid.Panel', {
        height: 400,
        title: "Example",
        frame: true,
        renderTo: Ext.getBody(),
        store: Ext.create('MyApp.store.Persons'),
        viewConfig: {
            emptyText: 'no items'  
        },
        columns: [{
            header: 'id',
            dataIndex: 'id'
        }, {
            header: 'Name',
            dataIndex: 'name'
        }, {
            header: 'Email',
            dataIndex: 'email'
        }, {
            header: 'Cell',
           ...