Sencha Touch V2ツールバータイトルAlingment

StackOverflow https://stackoverflow.com/questions/8375676

  •  28-10-2019
  •  | 
  •  

質問

以下のようなツールバーを作成すると、タイトルが最後のボタンの右側に置き忘れられている場合、それを修正する方法はありますか？

        {
        xtype: 'toolbar',
        docked: 'top',
        title: 'Chat',
        items: [{
            xtype: 'button',
            text: 'Places',
            ui: 'back',
            id: 'backToPlaces'
        },
        {
            xtype: 'spacer'
        },
        {
            xtype: 'button',
            text: 'People',
            ui: 'forward',
            id: 'toProfiles'
        }

enter image description here

役に立ちましたか？

解決

私もツールバーと戦っていました。それから私はそれを発見しました navigationbar。タイトルは中央にあります。左右に整列したボタンがあります。 （Alignプロパティを参照）

 {
    docked: 'top',
    xtype: 'navigationbar',
    title: 'Chat',
    items: [
        {
            xtype: 'button',
            ui: 'back',
            action: 'back',
            text:'BACK',
            itemId: 'backButton'
        },
        {
            xtype: 'button',
            ui: 'decline',
            action: 'cancel',
            text:'Cancel',
            itemId: 'cancelButton',
            align : 'right'
        }
    ]
}

他のヒント

これに答えた直後、私は「中心的な」属性を見つけて、senchaのタイトル要素の作成を調べたので、上記を忘れて構成で使用してください。

var myToolbar = new Ext.Toolbar({
                docked : 'top',
                title: {
                  title: 'my Title',
                  centered: true 
                },
                items : []
            });

Sencha 2には「特別な」タイトル要素はありません。「アイテム」の単純な要素として作成されています。だから私は将来、あなたはあなたのドッキングされたバーに構成を配置することで、それを適切な場所にDireclyに追加することができます：

var myToolbar = new Ext.Toolbar({
                docked : 'top',
                items : [{
                    xtype: 'spacer',
                },{
                    xtype: 'title',
                    title : 'Hello World'
                },{
                    xtype: 'spacer',
                }]
            });

スペーサーでのみ、真ん中にあります。

ドキュメントでは、NavigationBarがフレームワークによって内部使用するためのプライベートクラスであると明確に述べられています http://docs.sencha.com/touch/2-0/#!/api/ext.navigation.bar また、ANJによってメティオンされた中心属性は、予想どおりに機能しません（少なくとも最新リリースでは）。

この投稿によると http://www.sencha.com/forum/showthread.php?161082-pr3-toolbar-title-position-broken-when-spacers-button-positing＆p=691928 タイトルが中央にあり、次のリリースを待つ必要があるのは単なるバグです。それまでの間、必要に応じてNavigationBarを使用できます。

ext.navigation.barのツールバーのタイトルがどのように動作するかに似たものを活用したい場合。 ext.titlebarを参照してください http://docs.sencha.com/touch/2-0/#!/api/ext.titlebar

このクラスは、楕円を自動的に追加することにより、長いタイトルのようなものを処理し、タイトルは常に水平に中心にあります。

もうaはありません NavigationBar 公開されているコンポーネント。単に内部で使用されます NavigationView. 。あなたがすべき 一度もない これを使って。

代わりに、使用する必要があります ext.titlebar. 。これにより、中央に配置できます title 構成と使用も使用します align アイテム（通常はボタン）のプロパティを左または右に合わせます。

また、タイトルが長すぎる場合、またはアイテムが広すぎる場合、サポートが組み込まれています。すべてのアイテムの長さを特定の幅に自動的に制限し、必要に応じてタイトルに楕円を追加します。

簡単な例を次に示します。

var titleBar = Ext.create('Ext.TitleBar', {
    docked: 'top',
    title: 'Navigation',
    items: [
        {
            iconCls: 'add',
            iconMask: true,
            align: 'left'
        },
        {
            iconCls: 'home',
            iconMask: true,
            align: 'right'
        }
    ]
});

Ext.Viewport.add(titleBar);
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top