web-dev-qa-db-ja.com

extjsの個々のテキストフィールドラベルにラベル幅を設定するにはどうすればよいですか？

次のコードで：


var win = new Ext.Window({
    xtype: 'form',
    layout: 'form',
    items: [{
        xtype: 'textfield',
        value: 'test',
        name: 'testing',
        labelWidth: 200,
        fieldLabel: 'This is a really, really long label here',
        labelStyle: 'white-space: nowrap;'
    }]

}).show();

このラベルテキストは入力セクションと重複しています（画像を投稿するためのレピュテーションポイントが不十分です）。

'cls'、 'labelStyle'、 'style'、および 'width'のさまざまな組み合わせでcssを使用しようとしましたが、それらはすべて無視されているようです（少なくともラベルの幅を適切に設定することに関して）。
アイテムをフォームに動的に追加し、各要素のカスタムラベル幅を必要としています。他の要素では、ラベル用に予約されているデフォルトの100ピクセルのスペースは必要ありません。これは標準のテキストフィールドで可能ですか、またはこれを行うためにカスタムコンポーネントを作成する必要がありますか？

提供された洞察をありがとう。

extjslabelwidth
11
Gerrat

labelWidthはFormPanelではなくFieldの構成です。各フィールドのレベルではなく、フォームレイアウトレベルでレンダリングおよび制御されます。ラベル要素自体は、フィールドコンテナのレイアウトとは関係ありません。マークアップを見ると、ラベルはフローティングであり、フィールドを含むdivには、制御しようとしている「ラベルの幅」を与える左パディングがあります。 。このパディングは、入力をラップする.x-form-elementに動的なスタイルとして（レイアウトによって）コードで追加されます。オーバーライドするには、レイアウトコードをオーバーライドする（自明ではない）か、フィールドごとのパディングをオーバーライドする!importantクラスを使用する必要があります（フィールドのIDまたは適用するカスタムclsを使用） 。

とは言え、ラベルの幅すべきは、美的に言えば同じです。なぜその慣習を破りたいのかわからない？

17
Brian Moeskau

本当にこれを行う必要がある場合、最も簡単な方法は、フォームフィールドの代わりにパネルを定義し、別の何かのコンテナとして使用することです。

{
    xtype: 'form',
    layout: 'form',
    labelWidth: 100,
    items: [
        // {some fields with labelWidth=100},
        {
            xtype: 'panel',
            layout: 'form',
            labelWidth: 200,
            items: [
                xtype: 'textfield',
                value: 'test',
                name: 'testing',
                fieldLabel: 'This is a really, really long label here',
                labelStyle: 'white-space: nowrap;'
            ]
        }
        // {some fields with labelWidth=100}
    ]
}
6
Donatas Olsevičius

最終的に、フィールドのafterRenderをハッキングするオプションがあります。

afterRender: function() {
    <PARENT>.prototype.afterRender.call(this);
    this.adjustCustomLabelWidth(300);
},
adjustCustomLabelWidth: function(w) {
    this.el.parent('.x-form-item').child('.x-form-item-label').
            setStyle('width', w);
    this.el.parent('.x-form-element').setStyle('padding-left', w + 5);
    this.ownerCt.on('afterlayout', function() {  
        this.el.setStyle('width', this.el.getWidth() - w + 100);
    }, this, {single: true})
},
2
Christophe Blin

同じ仕事をするためにいくつかのCSSクラスの後でこれを試しました、この後にすべてのCSSを削除しました、魅力のように機能します。

{
    xtype: 'whatever-with-a-field-label',
    name: 'veryMeaningFullName',
    fieldLabel: 'very long description to show above a tiny text field', 
    labelStyle: 'width:400px; white-space: nowrap;', 
    //could use width:100% if you want
    maxWidth: 20
}
  • 平和
2
legrandmawak

私が行ったことは、labelWidthを空の文字列に設定し、ブラウザにその仕事をさせるだけです。 ;-)

{
    id: 'date0'
    ,fieldLabel: 'Start'
    ,labelWidth: ''
    ,xtype: 'datefield'
    ,emptyText: 'Select a start date'
    ,value: Ext.Date.add(new Date(), Ext.Date.DAY, -_duration)
    // ,width: 100
}
1
Lester Cheung