PDA

View Full Version : [CLOSED] Ext.Picker Shifts Other Panels or has the Wrong Height



jeffremer
26 May 2011, 2:53 PM
Sencha Touch version tested:

1.1.0

only default sencha-touch.css



Platform tested against:

iOS 4 on an iPhone 4


Description:

The Ext.Picker and Ext.DatePicker do not render correctly. They either shove underlying panels up if they are not a peer of the underlying panel
or they take up the full height of the screen if they are peer to the underlying panels.


Test Case (not a child of another panel):



Ext.regApplication({
name: 'Picker',
launch: function() {
var panel = new Ext.Panel({
html: "Hello, World!"
})
var picker = new Ext.Picker({
floating: true,
slots: [
{
name : 'limit_speed',
title: 'Speed',
data : [
{text: '50 KB/s', value: 50},
{text: '100 KB/s', value: 100},
{text: '200 KB/s', value: 200},
{text: '300 KB/s', value: 300}
]
}
]
});
this.viewport = new Ext.Panel({
id: 'viewport',
fullscreen: true,
layout: 'card',
items: [
panel
]
});

picker.show();
}
});


Test Case (as a child of another panel):



Ext.regApplication({
name: 'Picker',
launch: function() {
var panel = new Ext.Panel({
html: "Hello, World!"
})
var picker = new Ext.Picker({
floating: true,
slots: [
{
name : 'limit_speed',
title: 'Speed',
data : [
{text: '50 KB/s', value: 50},
{text: '100 KB/s', value: 100},
{text: '200 KB/s', value: 200},
{text: '300 KB/s', value: 300}
]
}
]
});
this.viewport = new Ext.Panel({
id: 'viewport',
fullscreen: true,
layout: 'card',
items: [
panel,
picker
]
});

picker.show();
}
});



Steps to reproduce the problem:

None, load the app


The result that was expected:

The picker slides up the expected height (220px) without shifting up the underlying


The result that occurs instead:

When not a child of another panel it pushes the viewport up, and when hidden the viewport is shifted up the height of the picker.
When a child of another panel it goes the full height


Screenshot or Video:

Not a child: http://cl.ly/3f1R402E0K0Y3I351L2K
As a child: http://www.cl.ly/2G1V250m2H3q3C1U382k

rdougan
3 Jun 2011, 3:26 PM
You should not insert a Picker into a panel. They are floating components.

As for the other issue, I can't reproduce it. A simple demo can also be found here: http://dev.sencha.com/deploy/touch/examples/picker/

jeffremer
3 Jun 2011, 4:09 PM
You should not insert a Picker into a panel. They are floating components.

I understand that. We use to use the picker not as a child of another panel. In Sencha Touch 1.1.0 the way we are using the the picker broke because of that. We tried adding the picker as a child of another panel hoping it would fix it. If you use something other than a card layout it works ok. The card layout stretches the picker.



As for the other issue, I can't reproduce it. A simple demo can also be found here: http://dev.sencha.com/deploy/touch/examples/picker/

Take the example, add datePicker.show() at the end of the onReady method.

For example:



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(options) {
var datePicker = new Ext.DatePicker({
useTitles: true,
value: {
day: 23,
month: 2,
year: 1984
}
});

var panel = new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'center',
pack: 'center'
},
items: [{
xtype: 'button',
ui: 'normal',
text: 'Show DatePicker',
handler: function() {
datePicker.show();
}
}]
});

datePicker.show();
}
});



On an iPhone 4 it breaks with Sencha Touch 1.1.0. It works with Sencha Touch 1.0. If I want to have the picker open automatically, is there something else I need to do?

Please look at these examples on an iPhone 4 or the iOS simulator.

Sencha Touch 1.0: http://widgetbox-test.s3.amazonaws.com/picker-test/st1.0.html

Sencha Touch 1.1.0: http://widgetbox-test.s3.amazonaws.com/picker-test/st1.1.0.html