1. #1
    Sencha User
    Join Date
    Oct 2011
    Location
    Berkley, MI
    Posts
    21
    Answers
    2
    Vote Rating
    1
    ghawazigirl is on a distinguished road

      0  

    Default Answered: Sencha Touch 2.1 Problem with DatePicker

    Answered: Sencha Touch 2.1 Problem with DatePicker


    I just upgraded my application to use Sencha Touch 2.1. I've been able to get almost everything working the same as with ST 2.0.1, but I am having trouble with Ext.field.DatePicker. When I click on the date picker field, the box opens full size, but the picker is only about 1 pixel wide.

    Here is my form code:
    Code:
    var curDate = new Date();
    var year = curDate.getFullYear();
    Ext.define("dcwtouch.view.LeadEntryParentForm", {
        extend: 'Ext.form.Panel',
        requires: ['Ext.field.Select', 'Ext.field.DatePicker'],
        xtype: 'leadEntryParentForm',
        
        config: {
            id: 'leadEntryParentForm',
            record: 'dcwtouch.model.LeadModel',
            height: window.innerHeight-145,
            
            items: [
                {
                    xtype: 'fieldset',
                    id: 'parent-fieldset',
                    title: 'Lead Entry - Parent Information',
                    defaults: {
                        required: true,
                        labelWidth: '35%'
                    },
                    items: [
                        {
                            //... various form fields
                        },{
                            xtype: 'datepickerfield',
                            name: 'birthDate',
                            label: 'Birthday',
                            id: 'birthday2',
                            value: 'birthDate',
                            required: true,
                            picker: {
                                cancelButton: 'Clear',
                                yearFrom: 1994, 
                                yearTo: year+1
                            }
                        }
                    ]
                },{    
                    xtype: 'button',
                    text: 'Continue',
                    margin: '0 50 0 50',
                    ui: 'confirm',
                    action: 'parentContinue'
                } 
            ],
        }
    });
    Here is an image of what I see when I try to pick a date:
    DatePicker.jpg

    Any assistance will be much appreciated. Thanks.


    UPDATE: I get the above result when I test on my desktop using Chrome. When I test using Safari, I do not even get the 1 pixel-wide picker, just the background and title bar with the buttons. I get this same result when I tested my app on my android tablet.

  2. I got it working. mitchellsimoens comment about DatePicker working with the default CSS made me review the SCSS file that I had updated for my application. My '@include sencha-picker;' statement was in a different location further down the list than in the 2.1 SCSS file. When I moved it up to match the same order as with ST 2.1, the DatePicker displayed properly. I figured that I had made some simple, but easily overlooked, error and I was right.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    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 fine for me in Chrome, Safari and iOS 6 in 2.1.0 and with default CSS
    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.

  4. #3
    Sencha User
    Join Date
    Feb 2011
    Location
    Düsseldorf, Germany
    Posts
    587
    Answers
    34
    Vote Rating
    32
    Kurt001 has a spectacular aura about Kurt001 has a spectacular aura about

      0  

    Default


    Most likely the parent container of the datePicker does not come with a width of 100%.
    Check out in Chrome what happens if you set the width of the picker manually to 300px.
    Then test the parent containers until you get the desired result.

  5. #4
    Sencha User
    Join Date
    Oct 2011
    Location
    Berkley, MI
    Posts
    21
    Answers
    2
    Vote Rating
    1
    ghawazigirl is on a distinguished road

      0  

    Default


    I got it working. mitchellsimoens comment about DatePicker working with the default CSS made me review the SCSS file that I had updated for my application. My '@include sencha-picker;' statement was in a different location further down the list than in the 2.1 SCSS file. When I moved it up to match the same order as with ST 2.1, the DatePicker displayed properly. I figured that I had made some simple, but easily overlooked, error and I was right.

Thread Participants: 2

Tags for this Thread