View Full Version : Styling buttons in select picker on phone?

22 Jul 2011, 1:56 PM
Hi all-

I've tried searching for help on this but wasn't able to find anything. We'd like to apply some style rules to the "Done" buttons that appear on pickers associated with Selects when they're rendered on a phone - iPhone/iPod Touch in particular. I can't for the life of me figure out what the CSS class is, and for some reason I can't find the source file where the picker is rendered.

Passing a config to the select declaration doesn't seem to work, as in:

xtype: 'selectfield',
id: 'others',
name: 'others',
label: 'Pick This',
options: [
{text: 'Option 1', value:'1'},
{text: 'Option 2', value:'2'}
picker: {
doneButton: {
text: 'Done',
ui: 'blue'

... that causes an error. Remove the picker: declaration and it's fine.

Can anybody provide a clue?

24 Jul 2011, 1:54 PM
We ended up solving this by adding an override for the Select getPicker function that adds a class name. We cut-n-pasted the source for getPicker, and then added the code in bold below.

Ext.override(Ext.form.Select, {
getPicker: function() {
if (!this.picker) {
this.picker = new Ext.Picker({
slots: [{
align : 'center',
name : this.name,
valueField : this.valueField,
displayField: this.displayField,
value : this.getValue(),
store : this.store
listeners: {
change: this.onPickerChange,
scope: this
doneButton: {
text: 'Done',
ui: 'blue-normal'

return this.picker;