When clicked, datePicker associated with datefield xtype messes up entire page layout

[jtb4x]

Ext Version: extjs 4.1.0 Final
Browsers: Firefox and Chrome (probably the others as well)
Problem:

I'm not exactly sure what is happening, but no matter where I put a datefield, when I click its corresponding datepicker, the datefield disappears, the datepicker calendar shows up in an unexpected place, and the rest of the layout of the page gets totally distorted in weird ways. Even in the simple scenario:

Ext.define("MyCompany.Viewport", {
    extend: 'Ext.panel.Panel',
    layout: 'fit',
    items: [
      {
           xtype: 'datefield',
           fieldLabel: 'Testing Datefield',
           format: 'mm/dd/YYYY'
       }
});

this issue happens. See attached screenshots of before/after click. What is happening?

Thanks,
Jeff

Datefield_Before.pngDatefield_After.png

[evant]

Can you post a full test case? Does the panel have dimensions? Is it in some other container?

[jtb4x]

I mean, that's basically it...here's the full app:

onReadyFn = function () {
    Ext.create("Ext.application", {
        name: 'test',
        launch: function () {
            Ext.create('Ext.container.Viewport', {
                layout: 'fit',
                items: [
                    {
                        xtype: 'datefield',
                        fieldLabel: 'Testing Datefield',
                        format: 'mm/dd/YYYY'
                    }
                ]
            });
        }
    });
};
Ext.onReady(onReadyFn);

the panel shouldn't need an explicit dimensions, though I also tried putting it within a panel with explicit dimensions and that didn't work either:

onReadyFn = function () {
    Ext.create("Ext.application", {
        name: 'test',
        launch: function () {
            Ext.create('Ext.container.Viewport', {
                layout: 'fit',
                items: [
                    {
                        xtype: 'panel',
                        layout: 'hbox',
                        height: 200,
                        width: 200,
                        items: [
                            {
                                xtype: 'datefield',
                                fieldLabel: 'Testing Datefield',
                                format: 'mm/dd/YYYY',
                                flex: 1
                            }
                        ]
                    }
                ]
            });
        }
    });
};
Ext.onReady(onReadyFn);

Note that I've tried putting this in a bunch of different layouts/etc. in my app and can't get it to work anywhere. Also, all of the datefield/pickers worked fine in my app in 4.0.7.

[jtb4x]

It turns out that I needed to re-compile my sass to deal with new css changes in the ext theming in 4.1. Sorry about that. Though, I will echo someone who posted in this thread the issue with the images directory when compiling sass. Whenever I update Ext, I need to make a modification deep in the ext source in order to get images into the proper place:

The theming guide documents a bug it claims to be specific to "ExtJS 4.0.2a"

Due to a bug in Ext JS 4.0.2a you will also need to edit line 62 of appname/extjs/resources/themes/lib/utils.rb from this:

images_path = File.join($ext_path, 'resources', 'themes', 'images', theme)
to this:

images_path = relative_path
This ensures images will be served from appname/resources/images rather than appname/extjs/resources/images

Apologies for missing the styling thing

[kamal2104]

How to accept the date in this format (mm/dd/yy)

Which means the user will type only two number for the year.
In the default format(m/d/Y) it is not accepting

Is they any possibilities ???