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 のスタイルを設定できます。最も簡単なのは、ブラウザで「Inspect Element」を実行し、関連するアイテムのクラスを確認することです (ST クラス名は などで始まりますx-) x-toolbar。変更されたウィジェットの一部ではないアイテムのスタイリングを防止したい場合は、ウィジェットに一意の ID/クラスを与え、CSS ルールの前にそれを付けることができます。

独自の CSS ファイルから既存のスタイルをオーバーライドするのが面倒な場合、または ST のスタイル設定/テーマ設定をさらに掘り下げたい場合: ST は SASS/Compass を使用して CSS ファイルを構築します。セットアップは少し面倒ですが、利点は、SASS/コンパス関数を使用して独自のグラデーションや配色などを作成できることです。さらに、結果として、すべてを含む CSS ファイルが 1 つだけになることになります。

于 2013-01-12T07:14:12.317 に答える
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 に答える
0

ピッカーにはグラデーション付きの疑似クラスがあります。しかし、chrome の dom インスペクタには奇妙な動作があり、疑似クラスが表示されない場合があります。だから、あなたはそれを見つけることができません。CSS ファイルに移動し、そこでスタイルを編集します。

于 2013-01-11T22:52:23.123 に答える