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
    MassimoCineca is on a distinguished road

      0  

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

    [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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    872
    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:
    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 @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
    Dec 2011
    Posts
    14
    Vote Rating
    1
    MassimoCineca is on a distinguished road

      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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    872
    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 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 @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
    Dec 2011
    Posts
    14
    Vote Rating
    1
    MassimoCineca is on a distinguished road

      0  

    Default


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

Thread Participants: 1