title: Style or customize Picker in Sencha Touch Architect
body: <p>How can I customize a Sencha Touch picker completely?</p>
  
  <p><a href="http://docs.sencha.com/touch/2-0/#!/api/Ext.picker.Picker" rel="nofollow">Here is what the default picker looks like.</a></p>
  
  <p>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.</p>
  
  <p><a href="http://dl.dropbox.com/u/14084584/picker.png" rel="nofollow">My Picker with the code below</a></p>
  
  <p>Code:</p>
  
  <pre><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'
            }
          ]
        }
  
      });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>    .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;
      }
  </code></pre>