css - 在 Sencha Touch Architect 中设计或定制 Picker

Question

如何完全自定义 Sencha Touch 选择器？

Here is what the default picker looks like.

我已经设法自定义了框架、中心和按钮，但我找不到任何东西可以让我自定义蓝色渐变工具栏。我什至找不到让它透明的地方。

My Picker with the code below

代码:

    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/class 并用它作为你的 CSS 规则的前缀。

如果您觉得从您自己的 CSS 文件覆盖其现有样式很尴尬，或者如果您想更深入地研究样式/主题 ST:ST 使用 SASS/Compass 构建 CSS 文件。设置起来有点麻烦，但好处是您可以使用 SASS/Compass 函数来创建自己的渐变、配色方案等。此外，结果是您最终只有一个包含所有内容的 CSS 文件。