Custom empty text mask

http://stackoverflow.com/questions/15286775/loadmask-image-extjs

by brian428

HTML

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

CSS

.empty-grid {
    height: 99%;
    text-align: center;
    background-color: #e0e0e0;
}

.empty-grid .x-mask-msg {
    display: inline-block;
    position: relative;
    top: 45%;
    margin-top: -10px;
}
.empty-grid .mask-icon {
    background-image: none;
    padding: 5px 10px;
    cursor: inherit;
}

JavaScript

Ext.create('Ext.data.Store', {
    storeId:'Store',
    proxy: {
        type: 'memory'
    }
});

var emptyViewConfig = {
    emptyText: [
        '<div class="empty-grid">', 
            '<div class="x-mask-msg x-mask-msg-default"><div style="position:relative" class="mask-icon">',
                'There are no records to display', 
            '</div></div>',
        '</div>'
    ].join(''),
    deferEmptyText: false
};

var panel = Ext.create('Ext.grid.Panel', {
    title: 'Test Empty Grid',
    viewConfig: emptyViewConfig,
    store: Ext.data.StoreManager.lookup('Store'),
    columns: [
        { text: 'Column 1',  dataIndex: 'column1' },
        { text: 'Column 2', dataIndex: 'column2', flex: 1 }
    ],
    height: 300,
    width: 400,
    renderTo: Ext.getBody()
});