Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    41
    Vote Rating
    0
    karnak is on a distinguished road

      0  

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

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


    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!

  2. #2
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


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

  3. #3
    Sencha User
    Join Date
    Mar 2010
    Posts
    41
    Vote Rating
    0
    karnak is on a distinguished road

      0  

    Default


    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>

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,833
    Vote Rating
    609
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    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.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Sencha User
    Join Date
    Mar 2010
    Posts
    41
    Vote Rating
    0
    karnak is on a distinguished road

      0  

    Default


    Evan,

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

    Thanks!

  6. #6
    Sencha User
    Join Date
    Mar 2010
    Posts
    41
    Vote Rating
    0
    karnak is on a distinguished road

      0  

    Default


    Jamie,

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

    Thanks!

Similar Threads

  1. [CLOSED][3.1.2] Incomplete Mask over grid.
    By Stju in forum Ext 3.x: Bugs
    Replies: 2
    Last Post: 9 Mar 2010, 4:04 AM
  2. [CLOSED][2.2.1] Unable to mask row in grid in FF3
    By PierceSD in forum Ext 2.x: Bugs
    Replies: 2
    Last Post: 23 Mar 2009, 2:19 PM
  3. Replies: 11
    Last Post: 11 Mar 2009, 12:26 PM
  4. Set Grid's groupField in code
    By chalu in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 1 Sep 2008, 6:08 AM

Thread Participants: 2

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi