0

如何完全自定义 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;
    }
4

3 回答 3

1

您可以根据其使用的默认元素类设置 ST 样式。最简单的方法是在浏览器中“检查元素”并检查相关项目的类（ST 类名称以 开头x-，如x-toolbar）。如果你想阻止任何不属于你修改的小部件的项目的样式，你可以给你的小部件一个唯一的 id/class 并在你的 CSS 规则前面加上它。

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

于 2013-01-12T07:14:12.317 回答
0

选择器具有带渐变的伪类。但是 chrome 的 dom 检查器有一些奇怪的行为，可能不会显示伪类。所以你找不到它。转到 CSS 文件并在那里编辑样式。

于 2013-01-11T22:52:23.123 回答
0

您可以使用此技巧真正扩展您希望配置的选项：

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

注释掉“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';

一旦你习惯了 mixin 文件的结构以及它是如何被引用和调用的，你就可以通过只调用 ST 的绝对最小结构，即“基础”来简化你的生活。将您希望使用的 mixin 组件复制到 /resources/sass/mixins 中，修改样式以满足您的需要。结果是生成了一个小得多的样式表，消除了所有令人毛骨悚然的默认设置。

于 2014-03-01T08:45:42.053 回答