Style or customize Picker in Sencha Touch Architect

Question

How can I customize a Sencha Touch picker completely?

Here is what the default picker looks like.

I've managed to customize the frame, center, and buttons but I can't find anything to allow me to customize that blue gradient toolbar. I can't even find a place to make it transparent.

My Picker with the code below

Code:

    Ext.define('FOLUI.view.pageValuePicker', {
      extend: 'Ext.picker.Picker',
      alias: 'widget.pageValuePicker',

      config: {
        cls: 'PickerFrame',
        height: 200,
        itemId: 'pageValuePicker',
        doneButton: {
          cls: 'PaginationButton',
          width: '80px',
          pressedCls: 'PaginationButtonPressed'
        },
        cancelButton: {
          cls: 'PaginationButton',
          width: '80px',
          pressedCls: 'PaginationButtonPressed'
        },
        slots: [
          {
            xtype: 'pickerslot',
            cls: [
              'PickerMiddle'
            ],
            itemId: 'pageValuePickerSlot',
            align: 'center',
            data: [
              {
                text: '1',
                value: 1
              },
              {
                text: '2',
                value: 2
              },
              {
                text: '3',
                value: 3
              },
              {
                text: '4',
                value: 4
              },
              {
                text: '5',
                value: 5
              },
              {
                text: '6',
                value: 6
              },
              {
                text: '7',
                value: 7
              },
              {
                text: '8',
                value: 8
              },
              {
                text: '9',
                value: 9
              }
            ],
            name: 'pageValuePickerSlot'
          }
        ]
      }

    });

CSS:

    .PaginationButton {
        background: #002c42 !important;
        color:#ffffff;
        font-size: 16px;
        font-weight: bold;
        border-radius: 4px;
        border: 1px solid #000d13;
        -webkit-box-shadow: inset 0px 1px 0px #678796;
    }

    .PaginationButtonPressed {
        background: #00344e !important;
        color:#ffffff;
        font-size: 16px;
        font-weight: bold;
        border-radius: 4px;
        border: 1px solid #000d13;
        -webkit-box-shadow: inset 0px 1px 0px #678796;
    }

    .PickerFrame {
        background: #dae4ec !important;
        border: 1px solid #6890b0;
        -webkit-box-shadow: inset 0px 1px 0px #ffffff;
    }

    .PickerMiddle {
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        color: #022c42 !important;
        font-weight: bold;
        line-height: 45px;
        background-color: #ffffff !important;
        border-radius: 6px;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border: 1px solid #6890b0;
        -webkit-box-shadow: inset 0px 0px 13px 3px #cbcbcb;
    }

Answer 1

You can style ST against the default element classes it uses. Easiest is to "Inspect Element" in your browser and check what class the relevant item has (ST class names start with x-, like x-toolbar). If you want to prevent styling any items which aren't part of your modified widget, you can give your widget a unique id/class and prefix your CSS rules with that.

If you feel awkward overriding its existing styling from your own CSS file, or if you want to dig deeper into styling/theming ST: ST uses SASS/Compass to build CSS files. It's a bit of a pain to set up, but the upside is that you can use SASS/Compass functions to create your own gradients, color-schemes, and such. Plus the result is that you end up with only one CSS file containing everything.

Answer 2

The picker has pseudo class with gradient. But chrome's dom inspector has some strange behaviour and may not displays pseudo classes. So you can't find it. Go to the CSS file and edit styles there.

Answer 3

You can really extend the options you wish to configure by using this trick:

items: [
            {
                xtype: 'selectfield',
                label: 'Choose one',
                usePicker: 1, // convert selectfield into a picker
                defaultPhonePickerConfig: { // customise text values displayed
                  doneButton: 'Select',
                  cancelButton: 'Cancel' 
                },
                options: [
                    {text: 'First Option',  value: 'first'},
                    {text: 'Second Option', value: 'second'},
                    {text: 'Third Option',  value: 'third'}
                ]
            }
        ]

Now as to the styling which you wish to avoid, simply do not include it. You are seeing the ST default styling being called in. You've managed to override part of the styling, and by showing you this example above where a select can be a picker, you can see just how varied a location where styling may be called in.

Primary culprit (ST2.2):

@import 'sencha-touch/default';
@import 'sencha-touch/default/all';

Comment out the "all" line, then call in only the individual components you wish to be default styled.

// @import 'sencha-touch/default/all';
// replacing direct reference to exact path of component mixin
// all in relation to the "sencha-touch" folder which is pathed in config.rb
@import 'sencha-touch/default/src/_MessageBox.scss'; 
@import 'sencha-touch/default/src/_Toolbar.scss';

Once you get used to the structure of the mixin files and how it is all referenced and called, you can simplify your life by only calling in the absolute minimum structure from ST, namely the "base". Take a copy of the mixin components for what you wish to use into /resources/sass/mixins, modify the styling to suit your needs. The result is a far smaller stylesheet generated, cutting out all the hair-tearing overriding of defaults.