PDA

View Full Version : Selectfield style in iPhone



jdb
25 Aug 2011, 9:54 PM
iOS always layouts selectfield like A. How can I force it to show as B?
I have gone nuts through the css file but didn't make it :(

27701

Any help appreciated...

tomalex0
26 Aug 2011, 2:17 AM
Picker and List for selectfield are shown based on the device you are using. For iphone it will be the picker and for ipad and browsers it will the list.

If you want to use List for all conditions you have to extend current selectfield or override.

Below override or extend should work for you. But im not sure how it will work with iphone devices.
Try it and let me know if this works in device.


Ext.override(Ext.form.Select, {
// @private
showComponent: function() {
var listPanel = this.getListPanel(),
index = this.store.findExact(this.valueField, this.value);

listPanel.showBy(this.el, 'fade', false);
listPanel.down('#list').getSelectionModel().select(index != -1 ? index: 0, false, true);
}
});






Ext.form.ListSelect = Ext.extend(Ext.form.Select, {
// @private
showComponent: function() {
var listPanel = this.getListPanel(),
index = this.store.findExact(this.valueField, this.value);

listPanel.showBy(this.el, 'fade', false);
listPanel.down('#list').getSelectionModel().select(index != -1 ? index: 0, false, true);
}
});
Ext.reg('listselectfield', Ext.form.ListSelect);

jdb
26 Aug 2011, 11:14 AM
Works great!
Just a couple of issues (which is not your code, it is general for selectfield) when label has two or more lines: (1) it is not centered vertically and (2) there is a black box below the dropdown (which is closed):

27719