Extjs4 でラベルの配置をいろいろ変更しよう！

こちらで紹介した物よりも良い感じになりましたので、再投稿です。
URL:http://blog.goo.ne.jp/pianyi/e/63ec1bcefa9bc41d4578c76531ecd02c

コレを応用すれば、ラベル以外の何でも中央揃え出来るはずです。
Extjsのバージョン：4.1.1a
他のバージョンでも使えるかどうかは知りません。

一部しか動作確認してません。(コピペで作りました)動かなかったら教えてね♪

まずは、ラベルを左上に配置！
Ext.create('Ext.container.Container', {
    layout: {
        align: 'stretch',   // この行は 'left' でもOK
        pack: 'start',
        type: 'vbox'
    },
    items: [
        Ext.create('Ext.form.Label', {
            text: 'My Label',
        })
    ]
});


ラベルを中央上に配置！


Ext.create('Ext.container.Container', {

    layout: {

        align: 'center',

        pack: 'start',

        type: 'vbox'

    },

    items: [

        Ext.create('Ext.form.Label', {

            text: 'My Label'

        })

    ]

});


ラベルを右上に配置！


Ext.create('Ext.container.Container', {

    layout: {

        align: 'stretch',

        pack: 'start',

        type: 'vbox'

    },

    items: [

        Ext.create('Ext.form.Label', {

            text: 'My Label',

            style: 'text-align:right;',

        })

    ]

});


ラベルを左中央に配置！


Ext.create('Ext.container.Container', {

    layout: {

        align: 'stretch',   // この行は 'left' でもOK

        pack: 'center',

        type: 'vbox'

    },

    items: [

        Ext.create('Ext.form.Label', {

            text: 'My Label',

        })

    ]

});


ラベルを中央中央に配置！


Ext.create('Ext.container.Container', {

    layout: {

        align: 'center',

        pack: 'center',

        type: 'vbox'

    },

    items: [

        Ext.create('Ext.form.Label', {

            text: 'My Label',

        })

    ]

});


ラベルを右中央に配置！


Ext.create('Ext.container.Container', {

    layout: {

        align: 'stretch',

        pack: 'center',

        type: 'vbox'

    },

    items: [

        Ext.create('Ext.form.Label', {

            text: 'My Label',

            style: 'text-align:right;',

        })

    ]

});


ラベルを左下に配置！


Ext.create('Ext.container.Container', {

    layout: {

        align: 'stretch',   // この行は 'left' でもOK

        pack: 'end',

        type: 'vbox'

    },

    items: [

        Ext.create('Ext.form.Label', {

            text: 'My Label',

        })

    ]

});


ラベルを中央下に配置！


Ext.create('Ext.container.Container', {

    layout: {

        align: 'center',

        pack: 'end',

        type: 'vbox'

    },

    items: [

        Ext.create('Ext.form.Label', {

            text: 'My Label',

        })

    ]

});


ラベルを右下に配置！


Ext.create('Ext.container.Container', {

    layout: {

        align: 'stretch',

        pack: 'end',

        type: 'vbox'

    },

    items: [

        Ext.create('Ext.form.Label', {

            text: 'My Label',

            style: 'text-align:right;',

        })

    ]

});




要するに、vbox のレイアウトを使って、align(横)とpack(縦)の位置を決定します。
そして、「align: 'stretch' は style:'display:block;' と同じになります」
したがって、"親パネルの横幅いっぱいにする"と解釈できます。
なので、「style: 'text-align:right;'」だけで、右寄せが出来ます。
逆に言うと、「align: 'stretch'」意外にすると、右寄せは出来ません。


ちなみに、「Ext.container.Container」は「Ext.panel.Panel」でも良いし、
xtype を使っても出来ます。(僕がExt.createが好きなだけです)


コレで無駄なマージンやパディングをしなくてすむし、高さや幅を変更しても自動追尾♪

コメント

コメントを投稿

このブログの人気の投稿

ヨドバシカメラの店舗購入履歴を見るには…

イメージ
・2025年04月08日 現在の情報です。今後使えなくなる可能性があります。 ・本記事に関する内容は分かる方のみ行ってください。ヨドバシさんの店舗店員、ヨドバシ・ドット・コムさんに質問等しないでください。 ・ヨドバシ関連様とは全く関係ありません。ご迷惑をかけない様よろしくお願いします。 ヨドバシ・ドット・コム で ヨドバシカメラ店舗で購入した履歴を見る方法です。 2種類の検索方法を記載しています。おすすめは上部の方(再注文：2025年04月08日掲載)です。 共通の注意点： １．ヨドバシ・ドット・コムのユーザが作成されている。（利用している？） ２．ヨドバシゴールドポイントカードは同じものを共通で登録・購入時提出してないと駄目だと思う。 ３．ヨドバシ・ドット・コムと連携する前のデータは連携されないと思う。 ４．Webと店舗のどちらで買ったか区別付きません。（思い出してください） ５．表示される値段は現在の値段です。（購入時の値段はわかりません。） 　　ヨドバシさんのSwitch2抽選の話が出たからかアクセスが急増していますが、【購入時の金額は分かりません】 (なんでこんなに画像が見にくいのだろうか…) 2025年04月08日掲載の検索方法 【カテゴリ検索】 「ま」様よりコメントを頂きましたので反映します。 こちらの方法は下記3パターンの場合、とても優良ですのでお試しください。 １．商品の「カテゴリ」が分かっている場合 ２．過去５年間に購入した商品を検索する場合（2025年の場合、2025年～2021年の5年間) ３．少しでも早く全データを確認したい場合？（ページングがあるのでこちらが速いと思うが検証してないです） 全ては「ま」様のコメントに記載されていますが、一応記載しておきます。 やり方： １．ヨドバシ・ドット・コムにログイン ２．会員ページに移動（画面上部の登録者名から移動） ３．画面上部にある「ご注文履歴」内にある「ご注文履歴から再注文する」のリンクを選択する（ボタンじゃないです） ４．パスワード入力 ５．「ご注文履歴から再注文」画面が表示されますのでそこから検索してください。 検索方法について： ・「ご注文カテゴリをお選びください」は【絞り込み】のため、検索した結果のデータしか出てきません。 　そのため下記画像の「①」で「全てのご注文」で検索した後（検索結果...
続きを読む

C# の WPF の DataGrid で 行を交互に背景色を変える＋選択色を変える＋カラムが無い所も変える…

イメージ
盛りだくさんのタイトルになりましたがまぁそういう事… 注意：個々のコードは最終確認してません。（動いている物から必要ない箇所を削除してます） DataGrid を使って表を作ることはよくあると思います。 で、見やすくするために「1行ごとに背景色を変える」っていうのは「AlternationCount」と「AlternatingRowBackground」を使えばすぐ出来ます。 こんな感じですね <DataGrid AlternationCount="2" AlternatingRowBackground="SkyBlue" SelectionMode="Single" SelectionUnit="FullRow"> で、そこにユーザが選択した時の色を変えるのもその辺に良く落ちてます。 こんな感じですね。 <DataGrid AlternationCount="2" AlternatingRowBackground="SkyBlue" SelectionMode="Single" SelectionUnit="FullRow" Background="Transparent"> <DataGrid.RowStyle> <Style TargetType="DataGridRow"> <Setter Property="Background" Value="White"/> <Setter Property="Foreground" Value="Black"/> <Style.Triggers> ...
続きを読む

Visual Studio の ホットリロードが動かない場合に確認するところ

とりあえずはここを読む ttps://learn.microsoft.com/ja-jp/troubleshoot/developer/visualstudio/tools-utilities/xaml-hot-reload-troubleshooting 英語版： ttps://learn.microsoft.com/en-us/troubleshoot/developer/visualstudio/tools-utilities/xaml-hot-reload-troubleshooting 今回困ったのは、デバッグ中の画面上部にホットリロード用のマーク（緑のレ点・赤の×）マークが有効（緑のレ点）になっているにもかかわらず、ホットリロードが効かない状態でした。 調べてもそれらしきものが見つけられずに早半年… やっと見つける事が出来ました。 きっかけはここ： ttps://zv-louis.hatenablog.com/entry/2023/03/21/110547 「Debug構成以外でホットリロードを有効にしたい」そんなことがあるかどうかは別にして… <XamlDebuggingInformation>true</XamlDebuggingInformation> の記述が… これってデフォルトで有効なんじゃないの…？ 【ちなみに最初のマイクロソフトのHPにも記載があります。がデフォルトで有効でしょ！と思い追記しなかった…】 と思いながら、Debug構成内に追加した所動くじゃありませんか…orz すげーやられた感が漂います。 修正後内容はこれ <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'"> <DefineConstants>DEBUG;TRACE;</DefineConstants> <XamlDebuggingInformation>true</XamlDebuggingInformation> </PropertyGroup> <Propert...
続きを読む