在Sencha Touch Architect中設置樣式或自定義選擇器

Question

如何完全自定義Sencha Touch選擇器？

這是默認選擇器的外觀。

我設法自定義了邊框，中心和按鈕，但是找不到任何可以自定義該藍色漸變工具欄的東西。 我什至找不到透明的地方。

我的選擇器下面的代碼

碼：

    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

您可以針對ST使用的默認元素類設置樣式。 最簡單的方法是在瀏覽器中“檢查元素”，並檢查相關項目具有的類（ST類名稱以x-開頭，例如x-toolbar ）。 如果您想防止樣式不屬於您修改后的小部件的任何項目，則可以為小部件提供唯一的ID /類，並為CSS規則添加前綴。

如果您覺得笨拙地從自己的CSS文件中覆蓋其現有樣式，或者想深入研究樣式/主題ST：ST使用SASS / Compass來構建CSS文件。 設置起來有些麻煩，但好處是您可以使用SASS / Compass函數創建自己的漸變，顏色方案等。 加上結果是您最終只能得到一個包含所有內容的CSS文件。

Answer 2

選擇器具有帶有漸變的偽類。 但是chrome的dom檢查器有一些奇怪的行為，可能不會顯示偽類。 所以你找不到它。 轉到CSS文件並在其中編輯樣式。

Answer 3

您可以使用此技巧來擴展您希望配置的選項：

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'}
                ]
            }
        ]

現在，關於您要避免的樣式，只需不包括它。 您正在看到正在調用ST默認樣式。您已經設法覆蓋了部分樣式，並且通過在上方顯示此示例（其中選擇可以用作選擇器）的示例，您可以看到可以調用樣式的位置有多大變化在。

罪魁禍首（ST2.2）：

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

注釋掉“所有”行，然后僅調用您希望默認樣式的各個組件。

// @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';

一旦您習慣了混合文件的結構以及如何對其進行引用和調用，就可以簡化工作，只需從ST中調用絕對最小的結構，即“基礎”即可。 將您想要使用的mixin組件的副本復制到/ resources / sass / mixins中，修改樣式以適合您的需求。 結果是生成的樣式表要小得多，從而消除了所有令人毛骨悚然的默認設置。