Results 1 to 2 of 2

Thread: Cannot apply a custom mask without loading spinner and icon instead

  1. #1
    Sencha Premium User
    Join Date
    Mar 2012

    Default Cannot apply a custom mask without loading spinner and icon instead


    I would like to mask a grid when the store has no records. the mask should show a text "empty" for example, and the most important is that i don't want the loading spinner ("x-mask-loading" css class)For this i tried to customize the classic loadMask by giving another object css reference like this:
    grid.mask("empty", "custom-class");
    but it doesn't seems to be enough because i see the new icon and the spinner too!
    I am certainly false on how to give this custom class in css file:
    background: url(/Content/icons/fam/Alert.png) no-repeat center top;
    may be background is not what we need but here i don't find a solution.

    i also tried loadMask constructor and then and the loading spinner is always here.

    i also found this jsfiddle solution but it's not so clear:

    the grid element has no viewConfig in what i see in architect 2.2

    may be it's loadingCls that i should change, then how to give the viewConfig dynamically?

    help would be appreciated.thanks in advance.

  2. #2
    Sencha User
    Join Date
    Oct 2008
    New York


    You mean something like this:

    Ext.create('', {
        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', 
        deferEmptyText: false
    var panel = Ext.create('Ext.grid.Panel', {
        title: 'Test Empty Grid',
        viewConfig: emptyViewConfig,
        columns: [
            { text: 'Column 1',  dataIndex: 'column1' },
            { text: 'Column 2', dataIndex: 'column2', flex: 1 }
        height: 300,
        width: 400,
        renderTo: Ext.getBody()

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts