Results 1 to 4 of 4

Thread: [4.1.0 B2] missing grid loadMask on first load

    Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-5324 in a recent build.
  1. #1
    Sencha User
    Join Date
    Nov 2009
    Location
    Poland
    Posts
    84

    Default [4.1.0 B2] missing grid loadMask on first load

    REQUIRED INFORMATION
    Ext version tested:
    • Ext 4.1.0 BETA 2
    Browser versions tested against:
    • Chrome 16
    • Chrome 17
    • Firefox 9
    • Firefox10
    DOCTYPE tested against:
    • <!doctype html>
    Description:
    • On first load of the grid with remote json store, loadmask is not displayed. But when refreshing the store, loadMask appears.
    Steps to reproduce the problem:
    • use attached code and put in on webserver
    The result that was expected:
    • loadMask appears every time while the store loads
    The result that occurs instead:
    • loadmask doesn't appear on store first load
    Test Case:
    Code:
    <!DOCTYPE html>
    <head>
        <meta http-equiv = "content-type" content = "text/html; charset=utf-8" />
        <meta http-equiv = "content-language" content = "en" />
        <meta name = "language" content = "en" />
        <title id = "page-title">loadMask test</title>
        <link rel = "stylesheet" type = "text/css" href = "ext/resources/css/ext-all.css">
    </head>
    <body>
        <script type = "text/javascript" src = "ext/ext-all-debug.js"></script>
        <script type = "text/javascript">
            Ext.onReady(function() {
                var grid = Ext.create('Ext.grid.Panel', {
                    columns    : [],
                    store    : Ext.create('Ext.data.Store', {
                        fields    : [],
                        proxy: {
                            type    : 'ajax',
                            url        : 'data.php',
                            reader    : {
                                type: 'json',
                                root: 'data'
                            }
                        },
                        autoLoad: true,
                        listeners    : {
                            'metachange'    : function(store, meta, eOpts) {
                                grid.reconfigure(store, meta.columns);
                            }
                        }
                    }),
                    tools    : [
                        {
                            type    :'refresh',
                            tooltip    : 'Refresh',
                            handler : function(event, toolEl, panel) {
                                grid.getStore().load();
                            }
                        }
                    ],
                    title    : 'loadMask missing on first load',
                    width    : 500,
                    height    : 500,
                    renderTo: Ext.getBody()
                });
            });
    
    
    
    
        </script>
    </body>
    </html>
    php code returning grid:
    Code:
    <?php
    function get() {
        $rows = array();
        $fields = array();
    
    
    
    
        $fields = array(
            array(
                'name'    => 'test_id',
                'type'    => 'int'
            ),
            array(
                'name'    => 'test_name',
                'type'    => 'string'
            )
        );
    
    
    
    
        $columns = array(
            array(
                'text' => '#',
                'xtype' => 'rownumberer'
            ),
            array(
                'text' => 'Test header',
                'dataIndex' => 'test_name',
                'id' => 'test_name',
                'flex'    => 1
            )
        );
    
    
    
    
        $rows = array(
            array(
                'test_id'    => 1,
                'test_name'    => 'row1'
            ),
            array(
                'test_id'    => 2,
                'test_name'    => 'row2'
            ),
            array(
                'test_id'    => 3,
                'test_name'    => 'row1'
            ),
            array(
                'test_id'    => 4,
                'test_name'    => 'row1'
            ),
            array(
                'test_id'    => 5,
                'test_name'    => 'row1'
            ),
        );
    
    
    
    
        die(json_encode(array(
            'metaData' => array(
                'root' => 'rows',
                'fields' => $fields,
                'columns' => $columns
            ),
            'rows' => $rows,
        )));
    } //get
    
    
    
    
    sleep(4);
    get();

    note that PHP execution is slowed by 4 seconds, to better show what I mean.

    HELPFUL

    See this URL for live test case: http://108-166-108-223.static.cloud-ips.com

    Possible fix:

    • not provided
    Additional CSS used:
    • only default ext-all.css
    Operating System:
    • Ubuntu 10.04
    • Ubuntu 12.04
    • Windows 7

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    Thanks for the report.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,232

    Default

    The workaround is simple
    -- just provide an initial dummy column:
    Code:
    // ...
    
    columns: [{header:''}],
    
    // ...

  4. #4
    Sencha User
    Join Date
    Nov 2009
    Location
    Poland
    Posts
    84

    Default

    @mystix thanks, workaround works well.

Posting Permissions

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