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
    Location
    germany
    Posts
    28

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

    Hi,

    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:
    .custom-loader{
    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 mask.show() and the loading spinner is always here.

    i also found this jsfiddle solution but it's not so clear:
    http://jsfiddle.net/molecule/frzk8/

    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 SimoAmi's Avatar
    Join Date
    Oct 2008
    Location
    New York
    Posts
    119

    Default

    You mean something like this:

    http://jsfiddle.net/TXPZr/

    Code:
    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()
    });

Posting Permissions

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