Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-2072 in a recent build.
  1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    74
    Vote Rating
    3
    shaneavery is on a distinguished road

      0  

    Question Using MVC pattern, datepickerfield.setValue(null) does not set value as expected

    Using MVC pattern, datepickerfield.setValue(null) does not set value as expected


    REQUIRED INFORMATION


    Ext version tested:
    • Sencha Touch 2 rev Beta 3


    Browser versions tested against:
    • Chrome 17.0.963.56 m


    DOCTYPE tested against:
    • <!DOCTYPE html>


    Description:
    • Using MVC pattern, datepickerfield.setValue(null) does not set value as expected


    Steps to reproduce the problem:
    • See test case below...


    The result that was expected:
    • After running datepickerfield.setValue(null) - datepickerfield.getValue() should be "null".


    The result that occurs instead:
    • After running datepickerfield.setValue(null) - datepickerfield.getValue() returns the last date selected in the datepicker. Although the textfield portion of datepickerfield is blanked out, the console returns a UTC formatted date.


    Test Case:


    index.html:
    Code:
    <!DOCTYPE html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, height=device-height, initial-scale=1.0" />
        <title id="page-title">Test Datepicker field.setValue(null)</title>
    
        <link rel="stylesheet" href="../touch/resources/css/apple.css" type="text/css">
        <script type="text/javascript" src="../touch/sencha-touch-debug.js"></script>
        
    <script type="text/javascript" charset="utf-8">
    
    Ext.Loader.setConfig({
        enabled: true
    });
    Ext.require([
        'Ext.field.DatePicker',
        'Ext.form.Panel',
        'Ext.form.FieldSet',
        'Ext.TitleBar'
    ]);
    Ext.application({
        name: 'test',
        views: [
            'Viewport'
        ],
        models: ['Date'],
        controllers: [
            'Control'
        ]
    });
    </script>
        
    </head>
    <body>
    
    </body>
    </html>
    controller:
    Code:
    Ext.define('test.controller.Control', {
        extend: 'Ext.app.Controller',
        config: {
            refs: {
                //build for us this.getViewport() method
                viewport: {
                selector: '#viewportview',
                xtype: 'viewportview',
                autoCreate: true
                }
            },
            control: {
                '#testDate': {
                    tap: 'onTestDateBtn'
                }
            },
        },
        launch: function() {
            this.getViewport().show();
        },
        onTestDateBtn: function() {
            var datetimeField = Ext.ComponentQuery.query('datepickerfield')[0];
            console.log(datetimeField.getValue());
            datetimeField.setValue(null);
            console.log(datetimeField.getValue());
        }
    });
    model:
    Code:
    Ext.define('test.model.Date', {
        extend: 'Ext.data.Model',
        config: {
            fields: [
                    { name: 'test_date', type: 'date', defaultValue: new Date(), dateFormat: 'c' }
            ]
        }
    });
    view:
    Code:
    Ext.define('test.view.Viewport', {
        extend: 'Ext.form.Panel',
        xtype : 'viewportview',
        title: 'Test Date',
        config: {
            title : 'Test Date',
            autoShow: true,
            autoRender   : true,
            fullscreen   : true,
            items : [
                        {
                        xtype: 'toolbar',
                        title: 'Test Date',
                        docked: 'top',
                        items: [
                            {
                                text: 'Test Output',
                                ui: 'normal',
                                id: 'testDate'
                            }
                        ]
                        },
                        {
                        xtype: 'fieldset',
                        title: 'Test Datepicker setValue(null)',
                        items: [
                                  {
                                      xtype: 'datepickerfield',
                                      name : 'test_date',
                                      label: 'Date Picker'
                                  }
                        ]
                        }
            ]
        }
    });
    HELPFUL INFORMATION


    Debugging already done:
    • none


    Possible fix:
    • not provided


    Additional CSS used:
    • only default ext-all.css


    Operating System:
    • Windows 7

  2. #2
    Sencha - Sencha Touch Dev Team Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    21
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Thank you for the report.

    Sencha Inc

    Jamie Avins

    @jamieavins

  3. #3
    Sencha User
    Join Date
    Feb 2011
    Posts
    74
    Vote Rating
    3
    shaneavery is on a distinguished road

      0  

    Red face My pleasure.

    My pleasure.



  4. #4
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    Thanks for the good test case. This has been fixed and will make it into the next release.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.