0

ボタンをツールバーの右にドッキングすると、次のようにツールバーの上部の境界線に触れ始めます。

ここに画像の説明を入力してください

これが私のコードです：

Ext.define('MyApp.view.MyFormPanel', {
    extend: 'Ext.form.Panel',

    config: {
        items: [
            {
                xtype: 'textfield',
                label: 'Field'
            },
            {
                xtype: 'textfield',
                label: 'Field'
            },
            {
                xtype: 'toolbar',
                docked: 'bottom',
                items: [
                    {
                        xtype: 'button',
                        ui: 'back',
                        text: 'Back'
                    },
                    {
                        xtype: 'button',
                        docked: 'right',
                        ui: 'forward',
                        text: 'Continue'
                    }
                ]
            }
        ]
    }

});
4

4 に答える 4

0

ここでも同じ動作です。右側にドッキングする代わりに、right：10px;を使用します。

これはおそらく、要素がposition：absoluteになることが原因です。そもそもこれが起こらないようにする解決策はありませんが、もちろん、top：..pxをボタンに設定することで修正できます。
このようなボタンがたくさんある場合は、cssクラスを使用してこれを設定します。

于 2012-10-23T07:54:50.233 に答える
0

ここでも同じ動作です。右側にドッキングする代わりに、right：10px;を使用します。

これはおそらく、要素がposition：absoluteになることが原因です。そもそもこれが起こらないようにする解決策はありませんが、もちろん、top：..pxをボタンに設定することで修正できます。
このようなボタンがたくさんある場合は、cssクラスを使用してこれを設定します。

SenchaTouchフォーラムでも報告してください

于 2012-10-23T08:00:34.753 に答える
0

バグがあるかどうかはわかりませんが、次のように2つのボタンの間にを削除してdocked: 'right'追加することで、別の方法を試すことができます。xtype: spacer

items: [
    {
        xtype: 'button',
        ui: 'back',
        text: 'Back'
    },
    {
        xtype: 'spacer'  
    },
    {
        xtype: 'button',
        ui: 'forward',
        text: 'Continue'
    }
]

Ext.Spacerコンポーネントは通常、Ext.Toolbarコンポーネントのアイテム間にスペースを入れるために使用されます。

spacer あなたはここについての彼らのドキュメントでより多くの情報と例を見つけることができます。それが役に立てば幸い ：）

于 2012-10-25T03:47:19.267 に答える
0

以前も同じ問題がありましたが、解決しました！私と同じようにxtype: 'toolbar'、ボタンをドッキングするために使用します。あなたが使わなければならないのは

xtype: 'titlebar'

ここで、タイトルバーにいくつかのボタンがある場合は、次alignのようにプロパティを設定するだけです。

 xtype: 'titlebar',
 items: [
      {
         xtype: 'button',
         ui: 'back',
         text: 'Back',
         align: 'left'
      },
      {
         xtype: 'button',
         ui: 'forward',
         text: 'Continue',
         align: 'right'
      }
 ]

詳細については、Sencha Docsを確認してください：Ext.TitleBar

于 2012-11-15T13:21:39.640 に答える