0

私はこれをツールバー内で使用しています：

items: [
                    { text: 'Hem',  },
                    { text: 'Sport' },
                    { text: 'Nöje'  },
                ]

そして、私が得る結果は以下の画像のようになります：

例

私はボタンのように見えるこのスタイルを手に入れました、私はそれを望んでいません。これらのボタンだけを画像番号2のように表示したいと思います。

例

どのように？写真2には、「タブ」の例のスクリーンショットがあります。代わりにタブを作成することはできません。ボタン間をスクロールできないためです...私はこれに本当に慣れていないので、大きな助けが必要です。私の英語はあまり上手ではないので、簡単な言語を使ってください。乾杯！

4

2 に答える 2

0

Sencha touch 1 と Sencha touch 2 の両方で、次のコードは丸いボタンを生成します:

xtype: 'toolbar',
items : [
            { text: 'Hem', ui :'round' },
            { text: 'Sport', ui :'round' },
            { text: 'Nöje', ui :'round'  },
        ]

つまり、配列ui : 'round'内の各項目オブジェクトのキーと値を追加するだけです。items

于 2012-11-18T09:57:06.867 に答える
0

ボタンごとに追加することで、ボタンを丸く見せることができます。ui:'round'それが一つの解決策です。しかし、私はあなたのこの引用に答えたい.

ボタン間をスクロールできないため、代わりにタブを作成できません

本当じゃない。ボタンがビューポートを超えている場合は、ボタン間を確実にスクロールできます。私は、モバイル アプリ用に 7 つのタブが必要な場所でそれらを使用しましたが、それらは横向きモードと縦向きモードの両方に収まりません。タブをスクロール可能にするために設定する必要があるプロパティが 1 つあります。これが私のために働いた私のコードのサンプルです。

Ext.create('Ext.TabPanel', {
    fullscreen: true,
    tabBarPosition: 'top',
    tabBar: {
        scrollable: {
            direction: 'horizontal'
        }
    },
    defaults: {
        styleHtmlContent: true
    },

    items: [
        {
            title: 'Monday',
            html: 'Monday Screen'
        },
        {
            title: 'Tuesday',
            html: 'Tuesday Screen'
        },
        {
            title: 'Wednesday',
            html: 'Wednesday Screen'
        },
        {
            title: 'Thursday',           
            html: 'Thursday Screen'
        },
        {
            title: 'Firday',
            html: 'Firday Screen'
        },
        {
            title: 'Saturday',
            html: 'Saturday Screen'
        },
        {
            title: 'Sunday',
            html: 'Sunday Screen'
        }
    ]
});

これは絶対に効果があるので試してみてください。:D

于 2012-11-18T17:34:15.003 に答える