ExtJs Layout:Wie ordnen Sie die Elemente in jeder Zeile?

Ich bin ein Anfänger von extjs.

Ich arrangieren wollen einige Textfelder wie folgt:

    a:______    b:______    c:______


    d:______    e:______    f:______

hier sind meine test-codes unter:

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'
                    }
                ]
            }
        ]
    });
});

als ein Ergebnis, die Seite kann nicht angezeigt werden alle Felder mit Sternchen.

Vielen Dank für jede Hilfe im Voraus!

InformationsquelleAutor Sharp Kid | 2013-01-16
  1. 3

    Können Sie etwas tun :

    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'
    }]
  }]
});

    Es ist im wesentlichen die gleiche Beispiel, außer ersetzen der vbox layout mit der Standard - auto layout. Der Grund, warum Sie beispielsweise nicht arbeiten, ist, dass vbox layouts müssen eine Höhe und Breite festgelegt sind irgendwie.

    Könnte man auch etwas wie :

    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'
  }]
});

    Es ist ein column layout ohne geschachtelte Elemente als die zuvor. Eine nette Sache über eine column layout ist, dass es sich verschieben wird, wie viele Elemente es können Links und wenn ein Artikel nicht passen, wird es gehen in die nächste Zeile.
    Da die Breite ist eine statische 670 kann es passen nur 3 Textfelder pro Zeile. Spalte layouts brauchen nicht eine Höhe eingestellt.

    • vbox layouts need a height and width +1 Wusste das nicht.
    • Danke, ich misstood die Nutzung der "vbox".
    InformationsquelleAutor pllee
Schreibe einen Kommentar