Results 1 to 5 of 5

Thread: [PR3] Ex.field.DatePicker masks all screen on tap

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    14
    Vote Rating
    1
      0  

    Default [PR3] Ex.field.DatePicker masks all screen on tap

    REQUIRED INFORMATION Ext version tested:Sencha Touch 2 PR3 (sencha-touch-all and all-debug) Browser versions tested against: Android 2.3.1, Google Chrome 15.0.874.106 (Build 107270 Linux) Ubuntu 11.10
    Description:
    • On click on the field the picker shows up but all screen is masked, can't do anything. Calling manually Ext
      .Viewport.unmask() unmasks screen

    Test Case:
    index.html
    Code:
     <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <link rel="stylesheet" href="touch/resources/css/sencha-touch.css" type="text/css">
    
    <script type="text/javascript" charset="utf-8" src="touch/sencha-touch-all.js"></script>
    
    <script type="text/javascript" src="app2.js"></script>
    
    </head>
    <body>
    
    </body>
    </html>
    app2.js (more or less cut & paste from the sample from http://docs.sencha.com/touch/2-0/#!/api/Ext.field.DatePicker )
    Code:
    Ext.application({
                launch : function() {
                    var panel =  Ext.create('Ext.form.Panel', {
                        fullscreen: true,
                        items: [
                            {
                                xtype: 'fieldset',
                                items: [
                                    {
                                        xtype: 'datepickerfield',
                                        label: 'Birthday',
                                        name: 'birthday',
                                        value: new Date()
                                    }
                                ]
                            },
                            {
                                xtype: 'toolbar',
                                docked: 'bottom',
                                items: [
                                    { xtype: 'spacer' },
                                    {
                                        text: 'setValue',
                                        handler: function() {
                                            var datePickerField = Ext.ComponentQuery.query('datepickerfield')[0];
    
                                            var randomNumber = function(from, to) {
                                                return Math.floor(Math.random() * (to - from + 1) + from);
                                            };
    
                                            datePickerField.setValue({
                                                month: randomNumber(0, 11),
                                                day  : randomNumber(0, 28),
                                                year : randomNumber(1980, 2011)
                                            });
                                        }
                                    },
                                    { xtype: 'spacer' }
                                ]
                            }
                        ]
                    });
    
                    
                    Ext.Viewport.add(panel);
                    
                },
    
            });

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      0  

    Default

    Code:
    Ext.create('Ext.form.Panel', {
        fullscreen : true,
        items      : [
            {
                xtype  : 'datepickerfield',
                label  : 'Date',
                picker : {
                    modal : false
                }
            }
        ]
    });
    Notice the red code... this will make the picker not mask the screen. Tested on PR3.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    14
    Vote Rating
    1
      0  

    Default

    Ok thanks this works, but is a workaround...
    In the case that I provided the point is that everything is masked, comprising the picker, all screen gets masked, no interaction is possibile with any component, it is irreversible...

    You didn't manage to reproduce the problem? Can you post me a code that creates a working datepickerfield in PR3?
    I can give you a even smaller example that masks all:
    Code:
    Ext.application({
                name : 'test',
                
                launch: function(){
        var panel =  Ext.create('Ext.form.Panel', {
            fullscreen: true,
            items: [
                {
                    xtype: 'fieldset',
                    items: [
                        {
                            xtype: 'datepickerfield',
                            label: 'Birthday',
                            name: 'birthday'
                        }
                    ]
                }]});
            panel.show();
                }
    });

  4. #4
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      0  

    Default

    It's not a workaround... picker takes a config object for the picker and modal is a config item of the picker. Therefor, it is 100% valid and correct.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  5. #5
    Sencha User
    Join Date
    Dec 2011
    Posts
    14
    Vote Rating
    1
      0  

    Default

    Sorry I've been stupid, is a css problem, used PR2 css causes all screen mask :-)

Posting Permissions

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