1

私はextjsの初心者です。
いくつかのTextFieldを次のように配置したいと思います。

    a：______ b：______ c：______
    d：______ e：______ f：______

以下に私のテストコードを示します。

Ext.onReady(function()
{
    new Ext.panel.Panel(
    {
        renderTo: Ext.getBody(),
        layout:'vbox',
        width: 670,
        tbar: [{text:"Add"}],
        defaults:
        {
            layout:"column",
            height:50
        },
        items:
        [
            {
                defaults:
                {
                    labelAlign:"right",
                    labelWidth:50
                },
                items:
                [
                    {
                        xtype: 'textfield',
                        fieldLabel: 'a'
                    },
                    {
                        xtype: 'textfield',
                        fieldLabel: 'b'
                    },
                    {
                        xtype: 'textfield',
                        fieldLabel: 'c'
                    }
                ]
            },
            {
                defaults:
                {
                    labelAlign:"right",
                    labelWidth:50
                },
                items:
                [
                    {
                        xtype: 'textfield',
                        fieldLabel: 'd'
                    },
                    {
                        xtype: 'textfield',
                        fieldLabel: 'e'
                    },
                    {
                        xtype: 'textfield',
                        fieldLabel: 'f'
                    }
                ]
            }
        ]
    });
});

その結果、ページにTextFieldを表示できなくなります。
よろしくお願いします！

4

1 に答える 1

3

あなたは次のようなことをすることができます：

new Ext.panel.Panel({
  renderTo: Ext.getBody(),
  width: 670,
  tbar: [{
    text: "Add"
  }],
  defaults: {
    layout: ,
    height: 50
  },
  items: [{
    defaults: {
      labelAlign: "right",
      labelWidth: 50
    },
    items: [{
      xtype: 'textfield',
      fieldLabel: 'a'
    }, {
      xtype: 'textfield',
      fieldLabel: 'b'
    }, {
      xtype: 'textfield',
      fieldLabel: 'c'
    }]
  }, {
    defaults: {
      labelAlign: "right",
      labelWidth: 50
    },
    items: [{
      xtype: 'textfield',
      fieldLabel: 'd'
    }, {
      xtype: 'textfield',
      fieldLabel: 'e'
    }, {
      xtype: 'textfield',
      fieldLabel: 'f'
    }]
  }]
});

vboxレイアウトをデフォルトのレイアウトに置き換えることを除いて、これは基本的に同じ例ですauto。例が機能しなかった理由は、vboxレイアウトに高さと幅を設定する必要があるためです。

次のようなこともできます：

new Ext.panel.Panel({
  renderTo: Ext.getBody(),
  layout: 'column',
  width: 670,
  tbar: [{
    text: "Add"
  }],
  defaults: {
    labelAlign: "right",
    labelWidth: 50
  },
  items: [{
    xtype: 'textfield',
    fieldLabel: 'a'
  }, {
    xtype: 'textfield',
    fieldLabel: 'b'
  }, {
    xtype: 'textfield',
    fieldLabel: 'c'
  }, {
    xtype: 'textfield',
    fieldLabel: 'd'
  }, {
    xtype: 'textfield',
    fieldLabel: 'e'
  }, {
    xtype: 'textfield',
    fieldLabel: 'f'
  }]
});

以前columnのようにネストされたアイテムがないレイアウトです。レイアウトの良い点の1つcolumnは、できるだけ多くのアイテムを左にシフトし、アイテムが収まらない場合は次の行に移動することです。幅は静的670であるため、1行に3つのテキストフィールドしか収まりません。列のレイアウトには高さを設定する必要はありません。

于 2013-01-16T04:40:10.600 に答える