wrong placement of the popup window of a select field

[andreik65]

I'm using Sencha Touch Beta 2. When i click on the arrow of a select field, its popup window is placed almost outside the visible space.

After some testing, I've found out that that it's due to the use of "docked" items (somehow their width is not taken into account when computing the "x axis" of the popup position). I am using the sencha-touch-all.js file taken from the builds directory.

Here is the code:

Ext.Loader.setConfig({
	enabled: true
});

var topPanel = Ext.create('Ext.Panel', {
        id: 'toppanel',
        html: '<div/>TOP</div>',
        docked: 'top',
        width: '100%',
        height: 50,
        style: 'background-color: red; color: white;'
});

var leftPanel = Ext.create('Ext.Panel', {
    	id: 'leftpanel',
    	docked: 'left',
    	layout: 'fit',
    	width: '33%',
        html: '<div/>LEFT</div>',
        style: 'background-color: green; color: white;'
});

var dataPanel = Ext.create( 'Ext.Panel', {
    	id: 'dataPanel',
    	layout: 'fit',
    	items:[{
            title: 'Basic',
            xtype: 'formpanel',
            id   : 'dataForm',
            layout: {
                type : 'vbox',
                align: 'stretch'
            },
            items: [{
                    xtype: 'fieldset',
                    title: 'Personal data',
                    instructions: '* mandatory field',
                    defaults: {
                        labelWidth: '35%',
                        required      : true,
                        clearIcon     : true
                    },
                    items: [{
                            xtype: 'selectfield',
                            name : 'disasterField',
                            label: 'Disaster field',
                            options: [
                                {text : 'Value1',value: 'value1'},
                                {text : 'Value2',value: 'value2'},
                                {text : 'Value3',value: 'value3'}
                            ]
                        } , {
                            xtype: 'textfield',
                            name: 'name',
                            label: 'Name',
                            autoCapitalize: true
                        }]
                    },{
                        xtype: 'panel',
                        items: [{
                                text: 'Salva',
                                xtype: 'button',
                                width: 135,
                                right: 0,
                                height: 50,
                                handler: function(){
                                  alert("hello");
                                }
                        }]
                    }
                ]
            }]
        });



Ext.application({
    name: 'TEST',
    icon: 'resources/images/icon.png',
    tabletStartupScreen: 'resources/images/tablet_startup.png',
    phoneStartupScreen: 'resources/images/phone_startup.png',
    glossOnIcon: false,
    viewport:{},


    launch: function() {
    	Ext.Viewport.add(topPanel);
    	Ext.Viewport.add(leftPanel);
    	Ext.Viewport.add(dataPanel);
    }
});

Thanks,
Andrea

[Jamie Avins]

Thank you for the report.

[mitchellsimoens]

Also want to note that you shouldn't use Ext.create outside of the launch method of Ext.applications. User interactions won't happen if you use the code as you specified.

[Jamie Avins]

For the moment, if you add another container to the viewport instead of placing these items directly in the viewport it will work as expected. To fix this properly we're going to have to some rather large internal changes and we don't feel confortable doing it at this late stage of development. I'm going to change this to a defer item that will be fixed at a later milestone. I apologize for the inconvenience of having to do the extra top level container in the meantime.

[andreik65]

Thank you.


Regards.