1. #1
    Sencha User
    Join Date
    Jan 2013
    Posts
    16
    Vote Rating
    0
    rchernyshenko is on a distinguished road

      0  

    Default Problem with loadMask in Ext.window.Windiw

    Problem with loadMask in Ext.window.Windiw


    In my real project I use default loadMask for Ext.grid.Panel om my Ext.window.Window. Mask from Ext.grid.Panel overlaps Ext.window.Window. What should I do to avoid this problem or this is Ext bug? This small example to reproduce this problem.
    Code:
       <script type="text/javascript">
            Ext.require([
                'Ext.grid.*',
                'Ext.data.*',
                'Ext.util.*',
                'Ext.state.*',
                'Ext.container.Viewport',
                'Ext.LoadMask'
            ]);
            
            // Define Company entity
            // Null out built in convert functions for performance *because the raw data is known to be valid*
            // Specifying defaultValue as undefined will also save code. *As long as there will always be values in the data, or the app tolerates undefined field values*
            Ext.define('Company', {
                extend: 'Ext.data.Model',
                fields: [
                   {name: 'company'},
                   {name: 'price',      type: 'float', convert: null,     defaultValue: undefined},
                   {name: 'change',     type: 'float', convert: null,     defaultValue: undefined},
                   {name: 'pctChange',  type: 'float', convert: null,     defaultValue: undefined},
                   {name: 'lastChange', type: 'date',  dateFormat: 'n/j h:ia', defaultValue: undefined}
                ],
                idProperty: 'company'
            });
    
    
    
    
            Ext.onReady(function() {
                Ext.QuickTips.init();
    
    
    
    
                // sample static data for the store
                var myData = [
                    ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am'],
                    ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am'],
                    ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am'],
                    ['American Express Company',            52.55, 0.01,  0.02,  '9/1 12:00am'],
                    ['American International Group, Inc.',  64.13, 0.31,  0.49,  '9/1 12:00am'],
                    ['AT&T Inc.',                           31.61, -0.48, -1.54, '9/1 12:00am'],
                    ['Boeing Co.',                          75.43, 0.53,  0.71,  '9/1 12:00am'],
                    ['Caterpillar Inc.',                    67.27, 0.92,  1.39,  '9/1 12:00am'],
                    ['Citigroup, Inc.',                     49.37, 0.02,  0.04,  '9/1 12:00am'],
                    ['E.I. du Pont de Nemours and Company', 40.48, 0.51,  1.28,  '9/1 12:00am'],
                    ['Exxon Mobil Corp',                    68.1,  -0.43, -0.64, '9/1 12:00am'],
                    ['General Electric Company',            34.14, -0.08, -0.23, '9/1 12:00am'],
                    ['General Motors Corporation',          30.27, 1.09,  3.74,  '9/1 12:00am'],
                    ['Hewlett-Packard Co.',                 36.53, -0.03, -0.08, '9/1 12:00am'],
                    ['Honeywell Intl Inc',                  38.77, 0.05,  0.13,  '9/1 12:00am'],
                    ['Intel Corporation',                   19.88, 0.31,  1.58,  '9/1 12:00am'],
                    ['International Business Machines',     81.41, 0.44,  0.54,  '9/1 12:00am'],
                    ['Johnson & Johnson',                   64.72, 0.06,  0.09,  '9/1 12:00am'],
                    ['JP Morgan & Chase & Co',              45.73, 0.07,  0.15,  '9/1 12:00am'],
                    ['McDonald\'s Corporation',             36.76, 0.86,  2.40,  '9/1 12:00am'],
                    ['Merck & Co., Inc.',                   40.96, 0.41,  1.01,  '9/1 12:00am'],
                    ['Microsoft Corporation',               25.84, 0.14,  0.54,  '9/1 12:00am'],
                    ['Pfizer Inc',                          27.96, 0.4,   1.45,  '9/1 12:00am'],
                    ['The Coca-Cola Company',               45.07, 0.26,  0.58,  '9/1 12:00am'],
                    ['The Home Depot, Inc.',                34.64, 0.35,  1.02,  '9/1 12:00am'],
                    ['The Procter & Gamble Company',        61.91, 0.01,  0.02,  '9/1 12:00am'],
                    ['United Technologies Corporation',     63.26, 0.55,  0.88,  '9/1 12:00am'],
                    ['Verizon Communications',              35.57, 0.39,  1.11,  '9/1 12:00am'],
                    ['Wal-Mart Stores, Inc.',               45.45, 0.73,  1.63,  '9/1 12:00am']
                ];
    
    
    
    
                /**
                 * Custom function used for column renderer
                 * @param {Object} val
                 */
                function change(val) {
                    if (val > 0) {
                        return '<span style="color:green;">' + val + '</span>';
                    } else if (val < 0) {
                        return '<span style="color:red;">' + val + '</span>';
                    }
                    return val;
                }
    
    
    
    
                /**
                 * Custom function used for column renderer
                 * @param {Object} val
                 */
                function pctChange(val) {
                    if (val > 0) {
                        return '<span style="color:green;">' + val + '%</span>';
                    } else if (val < 0) {
                        return '<span style="color:red;">' + val + '%</span>';
                    }
                    return val;
                }
    
    
    
    
                // create the data store
                var store = Ext.create('Ext.data.ArrayStore', {
                    model: 'Company',
                    data: myData
                });
    
    
    
    
                // create the Grid
                var grid = {
                    xtype: 'gridpanel',
                    id : 'grid',
                    store: store,
                    stateful: true,
                    stateId: 'stateGrid',
                    columns: [
                        {
                            text     : 'Company',
                            flex     : 1,
                            sortable : false,
                            dataIndex: 'company'
                        },
                        {
                            text     : 'Price',
                            width    : 75,
                            sortable : true,
                            renderer : 'usMoney',
                            dataIndex: 'price'
                        },
                        {
                            text     : 'Change',
                            width    : 75,
                            sortable : true,
                            renderer : change,
                            dataIndex: 'change'
                        },
                        {
                            text     : '% Change',
                            width    : 75,
                            sortable : true,
                            renderer : pctChange,
                            dataIndex: 'pctChange'
                        },
                        {
                            text     : 'Last Updated',
                            width    : 85,
                            sortable : true,
                            renderer : Ext.util.Format.dateRenderer('m/d/Y'),
                            dataIndex: 'lastChange'
                        }
                    ],
                    height: 350,
                    width: 600,
                    title: 'Array Grid',
                    renderTo: Ext.getBody()
                };
    
    
                Ext.create('Ext.window.Window', {
                    autoScroll : true,
                    html: 'Some content',
                    width: 500,
                    height: 400,
                    items:[
                        grid
                    ],
                    buttons: [
                        {
                            xtype: 'button',
                            text: 'Show mask',
                            handler: function(button) {
                                Ext.getCmp('grid').getView().loadMask.show();
                                }
                        },
                        {
                            xtype: 'button',
                            text: 'Hide mask',
                            handler: function(button) {
                                Ext.getCmp('grid').getView().loadMask.hide();
                                }
                        }
                    ]
                }).show();
            });
        </script>
    Attached Images

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,404
    Vote Rating
    849
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You should mask the grid panel not the grid view.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jan 2013
    Posts
    16
    Vote Rating
    0
    rchernyshenko is on a distinguished road

      0  

    Default


    And how to do this?

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,404
    Vote Rating
    849
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Code:
    grid.setLoading('....')
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Jan 2013
    Posts
    16
    Vote Rating
    0
    rchernyshenko is on a distinguished road

      0  

    Default


    I use
    Code:
    Ext.getCmp('grid').setLoading('......')
    the same behavior
    Attached Images

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,404
    Vote Rating
    849
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I see, the width of the grid is wider than the window, the scroll bars are for the window not the grid. Why not give the window layout : 'fit' and remove the width and height from the grid? If you want the grid to scroll horizontally then give the columns width that will make it scroll.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  7. #7
    Sencha User
    Join Date
    Jan 2013
    Posts
    16
    Vote Rating
    0
    rchernyshenko is on a distinguished road

      0  

    Default


    This is simple example where I want to show You problem with loadmask. In my real project I have many panels in application, then i bring Ext.window.Window where I have several grids(some of grids is not visible, I need to scroll for see them), and loadmask for those grids appears outside window, because loadmask is floating component. If component is not visible loadmask should not appear.

  8. #8
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,404
    Vote Rating
    849
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    It's working as expected really. If you only want what is viewable then you can even mask the window's body.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1