sencha-touch - sencha touch のツールバー内に簡単なテキストを追加する方法

Question

こんにちは、ツールバーに簡単なテキストを追加する必要があります。テキストは、ツールバー内で宣言された 2 つのボタンの間にある必要があります。教えてください よろしくお願いします

Answer 1

使用できるオプションは次の 2 つです。

ツールバーの中央にテキストが必要な場合は、title プロパティを使用します。

{
    title: 'Some text here',
    items [/* Your buttons */]
}

複数のテキスト要素が必要な場合、これを行う手っ取り早い方法は、パネルを html プロパティ セットで使用することです。これにより、作成されたパネルのコンテンツが html に置き換えられます。

{
    items [{
        // Button 1
    },{
        xtype: 'panel',
        html: 'The text you want here'
    },{
        // Button 2
    }]
}

これを行うと、パネルのスタイルが適切に設定されない可能性があるため、パネルstyleまたはbaseClsプロパティに何らかのスタイルを適用して、必要に応じてスタイルを変更する必要がある場合があります。

ExtJS では、items リストにテキストを含めるだけで、希望どおりに動作することに注意してください。ただし、これが Sencha Touch で機能するかどうかはドキュメントでは明確にされておらず、今はテストできません。それが機能する場合、次のようになります。

{
    title: 'Some text here',
    items [items [{
        // Button 1
    },
    'Your text here',
    {
        // Button 2
    }]
}

Answer 2

私の意見では、最も簡単な解決策はTitleBarを使用することです。

Answer 3

ツールバーの 2 つのボタンの間に簡単なテキストを追加するコードを次に示します。

{
   xtype: 'toolbar',
   docked: 'top',
   **title: 'text you want to add here'**,
   items:[{
            xtype: 'button',
            ui: 'action',
            text: '1st button'
          },
          {
            xtype: 'button',
            ui: 'action',
            right: '0%',
            text: '2nd button',
          }
        ],

}

これがお役に立てば幸いです。ありがとう。