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
    36,754
    Vote Rating
    828
    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
    36,754
    Vote Rating
    828
    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
    36,754
    Vote Rating
    828
    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
    36,754
    Vote Rating
    828
    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

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