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.