4

カードレイアウトも含むセグメント化されたボタンを備えたTabBarナビゲーションがあります。すべて正常に動作します。ただし、セグメント化されたボタンを画面の中央に配置しようとしています。伸ばしたくない。メインビューを含め、すべてのコードを SenchaFiddleに配置しました

ここに画像の説明を入力

ここに画像の説明を入力

Ext.define('SenchaFiddle.view.SegView', {
    拡張: 'Ext.Container',
    xtype: 'セグビュー',

    構成: {
        レイアウト: 'フィット',
        項目: [
            {
                レイアウト: 'vbox',
                項目: [
                    {
                        xtype: 'セグメント化されたボタン',
                        allowDepress: 真、
                        項目: [
                            {
                                テキスト: 'オプション 1',
                                押された：真、
                                ハンドラ: 関数() {
                                    console.log("選択された #1");
                                    Ext.getCmp('カードコンテナ').setActiveItem(0);
                                }
                            }、
                            {
                                テキスト: 'オプション 2',
                                ハンドラ: 関数() {
                                    Ext.Msg.alert("foo");

                                    Ext.getCmp('カードコンテナ').setActiveItem(1);
                                }
                            }、
                            {
                                テキスト: 'オプション 3',
                                ハンドラ: 関数() {
                                    Ext.getCmp('カードコンテナ').setActiveItem(2);
                                }
                            }
                        ]
                    }、
                    {
                        xtype: 'コンテナ',
                        フレックス: 10,
                        id: 'カードコンテナ',
                        レイアウト： {
                            タイプ: 「カード」
                        }、
                        項目: [
                            {
                                xtype: 'option-view1',
                                スタイル: '背景色: #fff'
                            }、
                            {
                                html: 'バー',
                                スタイル: '背景色: #666'

                            }、
                            {
                                html: 'バズ',
                                スタイル: '背景色: #333'

                            }
                        ]
                    }
                ]
            }

        ]
    }
});

Ext.define('SenchaFiddle.view.MainView', {
    拡張: 'Ext.tab.Panel',
    xtype: 'テストビュー',
    id: 'テストビュー',

    構成: {
        tabBarPosition:'下',
        レイアウト： {
            タイプ: 'カード',
            アニメーション: {
                持続時間: 300,
                イージング: 'イーズインアウト',
                タイプ: 'スライド',
                方向: 「左」
            }
        }、
        フルスクリーン: 真、

        項目: [
            {
                タイトル: 'Tab1',
                iconCls: '情報',
                xtype: 'パネル',
                レイアウト： {
                    タイプ: 'フィット'
                }、
                項目: [
                    {
                        タイトル: 'タイトル 1',
                        xtype: 'ツールバー',
                        ドッキング：「トップ」
                    }、
                    {
                        id: '画像タブ',
                        html: '読み込み中...'
                    }、
                    {
                        xtype: 'セグビュー',
                        レイアウト：「フィット」
                    }
                ]
            }、
            {
                タイトル: 'Tab2',
                iconCls: 'アクション',
                項目: [
                    {
                        タイトル: 'タイトル 2',
                        xtype: 'ツールバー',
                        ドッキング：「トップ」
                    }、
                    {
                        id: 'ニュースタブ',
                        html: 'バーを読み込んでいます...'
                    }
                ]
            }
        ]
    }
});
4

2 に答える 2

7

layout:{pack:'center'}試してみて、楽しんallowDepress: trueでください！中心。

ちょうどこのような：

Ext.define('SenchaFiddle.view.SegView', {
extend: 'Ext.Container',
xtype: 'seg-view',

config: {
    layout: 'fit',
    items: [
        {
            layout: 'vbox',
            items: [
                {
                    xtype: 'segmentedbutton',
                    allowDepress: true,
                    layout: {pack:'center'},
                    ...

よりスマート:)

于 2012-06-07T19:53:17.567 に答える
1

あなたができることは、セグメント化されたボタンをhboxレイアウトに配置し、スペーサーで囲むことです：

Ext.define('SenchaFiddle.view.SegView', {
  extend: 'Ext.Container',
  xtype: 'seg-view',

  config: {
    layout: 'fit',
    items: [
    {
      layout: 'vbox',
      items: [{
        xtype:'container',
        layout:'hbox',
        items:[{xtype:'spacer'},
        {
          xtype: 'segmentedbutton',
          allowDepress: true,
          items: [
          {
            text: 'Option 1',
            pressed: true,
            handler: function() {
              console.log("Picked #1");
              Ext.getCmp('card-container').setActiveItem(0);
            }
          },
          {
            text: 'Option 2',
            handler: function() {
              Ext.getCmp('card-container').setActiveItem(1);

            }
          },
          {
            text: 'Option 3',
            handler: function() {
              Ext.getCmp('card-container').setActiveItem(2);
            }
          }
          ]
          },{xtype:'spacer'}]},
          {
            xtype: 'container',
            flex: 10,
            id: 'card-container',
            layout: {
              type: 'card'
            },
            items: [
            {
              xtype: 'option-view1',
              style: 'background-color: #fff'
            },
            {
              html: 'bar',
              style: 'background-color: #666'

            },
            {
              html: 'baz',
              style: 'background-color: #333'

            }
            ]
          }
          ]
        }

        ]
      }
});

お役に立てれば

于 2012-06-07T18:55:53.040 に答える