[CLOSED-EXTJSIV-257] Grid mask not displaying when the datastore has groupField

**karnak** · 22 Mar 2011 8:30 AM

Greetings!

I am having an issue with a GridPanel's loadmask not showing when the page initially load. I have a GridPanel defined that is based on the Grouping grid example. I load my datastore using ajax. If the datastore does NOT have a groupField defined, then the loadmask displays on initial page load just fine.

If I have a groupField defined, then the loadmask is not showing on initial page load, however the data still eventually populates.

Am I doing something wrong?

Thanks!

**Jamie Avins** · 22 Mar 2011 10:46 AM

Can you post a code sample so we can review what may be happening.

**karnak** · 22 Mar 2011 5:36 PM

Jamie,

Below is the code.

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Test</title>
    <link href="CSS/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/bootstrap.js" type="text/javascript"></script>

       <script type="text/javascript">
           Ext.require(['Ext.data.*', 'Ext.grid.*']);

           Ext.onReady(function () {
               Ext.QuickTips.init();

               Ext.regModel('myOrder', {
                   fields: ['OrderNumber', 'SubmitterName', 'CompanyName', 'OrderDate', 'OrderTime', 'CustomerNumber', 'WorkPhone'],
                   idProperty: 'OrderNumber'
               });

               // create the Data Store
               var store = new Ext.data.Store({
                   storeId: 'orders',
                   model: 'myOrder',
                   groupField: 'OrderDate',
                   remoteSort: true,
                   proxy: {
                       // load using script tags for cross domain, if the data in on the same domain as
                       // this page, an HttpProxy would be better
                       type: 'ajax',
                       url: 'getdata.aspx?operation=readOrdersM',
                       reader: {
                           type: 'json',
                           model: 'myOrder',
                           root: 'data',
                           idProperty: 'OrderNumber'
                       }
                   }
               });

               // create the grid
               var grid = new Ext.grid.GridPanel({
                   store: store,
                   features: [{
                       ftype: 'grouping'
                   }],
                   headers: [
                    { text: "Id", width: 50, dataIndex: 'OrderNumber', sortable: true },
                    { text: 'Order Date', width: 75, dataIndex: 'OrderDate', sortable: true },
                    { text: 'Order Time', width: 75, dataIndex: 'OrderTime', sortable: false },
                    { text: "Name", width: 175, dataIndex: 'SubmitterName', sortable: false },
                    { text: "Company", flex: 1, dataIndex: 'CompanyName', sortable: true },
                    { text: "Work Phone", dataIndex: 'WorkPhone', sortable: true }
                    ]
               });

               grid.getSelectionModel().on('selectionchange', function (sm, selectedRecord) {
                   if (selectedRecord.length) {
                       alert('Order Date ' + selectedRecord[0].get('OrderDate'));
                   }
               });

               Ext.create('Ext.Viewport', {
                   layout: {
                       type: 'border',
                       padding: 5
                   },
                   defaults: {
                       split: true
                   },
                   items: [
        {
            region: 'north',
            collapsible: false,
            split: false,
            height: 85
        },
        {
            region: 'west',
            collapsible: true,
            floatable: true,
            title: 'Starts at width 30%',
            split: true,
            width: '30%',
            html: 'west<br>I am floatable'
        },
        {
            region: 'center',
            layout: 'fit',
            collapsible: true,
            floatable: true,
            split: true,
            items: grid
        },
        {
            region: 'east',
            collapsible: true,
            floatable: true,
            split: true,
            width: 200,
            title: 'East',
            layout: {
                type: 'vbox',
                padding: 5,
                align: 'stretch'
            },
            items: [{
                xtype: 'textfield',
                fieldLabel: 'Text field'
            }, {
                xtype: 'component',
                html: 'I am floatable'
            }]
        },
        {
            region: 'south',
            collapsible: true,
            split: true,
            height: 200,
            title: 'South',
            layout: {
                type: 'fit',
                padding: 5
            },
            html: 'South Central'
        }]
               });

               store.proxy.extraParams = { showAll: 1 };
               store.load();
           });
       </script>
</head>
<body>
    <form id="form1" runat="server">
        
    </form>
</body>
</html>

**evant** · 22 Mar 2011 6:15 PM

I can't confirm this using the latest code. The loadMask shows up fine for me.

Note that I had to add an artificial delay to make the loadMask show, my server was returning the data instantly.

**karnak** · 22 Mar 2011 6:48 PM

Evan,

By latest code, are you referring to developer preview 5?

Thanks!

**karnak** · 23 Mar 2011 10:07 AM

Jamie,

Do you know if Evan's response indicates that it should be working in the Developer Preview 5?

Thanks!

[CLOSED-EXTJSIV-257] Grid mask not displaying when the datastore has groupField

Thread Tools

Search Thread

Display

[CLOSED-EXTJSIV-257] Grid mask not displaying when the datastore has groupField

[CLOSED-EXTJSIV-257] Grid mask not displaying when the datastore has groupField

Similar Threads

[CLOSED][3.1.2] Incomplete Mask over grid.

[CLOSED][2.2.1] Unable to mask row in grid in FF3

[2.??][CLOSED] Checkbox Render Bug (mask+original displaying)

Set Grid's groupField in code