Results 1 to 5 of 5

Thread: Best Practice for Columns on FormPanel

  1. #1

    Default Best Practice for Columns on FormPanel

    I've recently started a new project using Ext 3.0. Is there anything new in regards to a FormPanel with columns?

    I'm going to use code like this:
    Code:
    items: [
      {
        xtype: "panel",
        layout: "column",
        items: [
          {
            xtype: "panel",
            columnWidth: .5,
            layout: "form",
            items: [
              {
                xtype: "textfield",
                fieldLabel: "First Name"
              }
            ]
          },
          {
            xtype: "panel",
            columnWidth: 5.,
            layout: "form",
            items: [
              {
                xtype: "textfield",
                fieldLabel: "Last Name"
              }
            ]
          }
        ]
      },
      {
        xtype: "panel",
        layout: "column",
        items: [
          {
            xtype: "panel",
            columnWidth: .5,
            layout: "form",
            items: [
              {
                xtype: "textfield",
                fieldLabel: "City"
              }
            ]
          },
          {
            xtype: "panel",
            columnWidth: .2,
            layout: "form",
            items: [
              {
                xtype: "textfield",
                fieldLabel: "State"
              }
            ]
          },
          {
            xtype: "panel",
            columnWidth: .3,
            layout: "form",
            items: [
              {
                xtype: "textfield",
                fieldLabel: "Zipcode"
              }
            ]
          }
        ]
      }
    ]
    Is this the best way?
    harley.333 - Harley Jones
    [email protected] - Find me on Google Talk.

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    I'd use

    Code:
    xtype: 'container',
    autoEl: 'div'
    In both cases.

    If you don't need all the capabilities of a Panel (border, toolbars, header, footer, Buttons etc), then just an Ext.Container instance created on a <div> is lighter.

    Also, check out the Ext 3.0 box layouts. The docs are enhanced in SVN, but not online. There are examples though in the examples directory.

    HBoxLayout is similar to column. Except that it can fit the child containers to the height as well as %age width.

  3. #3

    Default

    Thanks, Animal. I looked at the BoxLayouts, but I think Container is still the best for simple positioning.
    harley.333 - Harley Jones
    [email protected] - Find me on Google Talk.

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    Quote Originally Posted by harley.333 View Post
    Thanks, Animal. I looked at the BoxLayouts, but I think Container is still the best for simple positioning.
    1. I assume you meant ColumnLayout and not Container?
    2. In Ext 3.0 autoEl:'div' is the default for Ext.Component, so you don't have to specify it for an Ext.Container.
    3. ColumnLayout can span multiple rows, e.g.
    Code:
    layout: "column",
    defaults: {
    	layout: "form"
    },
    items: [{
    	columnWidth: .5,
    	items: {
    		xtype: "textfield",
    		fieldLabel: "First Name"
    	}
    },{
    	columnWidth: .5,
    	items: {
    		xtype: "textfield",
    		fieldLabel: "Last Name"
    	}
    },{
    	columnWidth: .5,
    	items: {
    		xtype: "textfield",
    		fieldLabel: "City"
    	}
    },{
    	columnWidth: .2,
    	items: {
    		xtype: "textfield",
    		fieldLabel: "State"
    	}
    },{
    	columnWidth: .3,
    	items: {
    		xtype: "textfield",
    		fieldLabel: "Zipcode"
    	}
    }]
    (isn't this a lot more compact?)

  5. #5

    Default

    1. Yeah, I did.
    2. I noticed that and already took advantage.
    3. I didn't know that - slick.
    harley.333 - Harley Jones
    [email protected] - Find me on Google Talk.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •