Hybrid View

  1. #1
    Ext JS Premium Member
    Join Date
    Aug 2007
    Location
    Antwerp, Belgium
    Posts
    564
    Vote Rating
    61
    joeri is a jewel in the rough joeri is a jewel in the rough joeri is a jewel in the rough joeri is a jewel in the rough

      0  

    Default How to do a delphi-like form layout?

    How to do a delphi-like form layout?


    Delphi's layout system is an absolute layout system where you anchor controls to a fixed distance from any edge. If you anchor a control to the right edge, it will change its x coordinate when the container resizes. When you anchor a control to both edges, it will keep both its x coordinate and its distance from the right edge.

    I am having issues translating this to Ext.

    Take a look at this example form:
    form.png

    In the middle row the "Valid From" and "Valid Until" date fields are anchored only to the right edge, so they will not resize, only change their x position. The "Customer" field however is anchored to both edges, so it will resize.

    Any suggestions on how I can realize such a layout cleanly?

  2. #2
    Sencha User laurentParis's Avatar
    Join Date
    Aug 2010
    Location
    paris
    Posts
    246
    Vote Rating
    2
    laurentParis is on a distinguished road

      0  

    Default


    I suggest for start
    PHP Code:
        new Ext.FormPanel({
            
    labelAlign'top',
            
    itemCls'float-left',
            
    renderTo:document.body,
            
    width500defaultType'textfield',
            
    items: [{
                    
    fieldLabel'First Name',
                    
    name'first'allowBlank:false
                
    },{
                    
    fieldLabel'Last Name',
                    
    name'last'
                
    },{
                    
    fieldLabel'Company',
                    
    name'company'
                
    }, {
                    
    fieldLabel'Email',
                    
    name'email'vtype:'email'
                
    }, new Ext.form.TimeField({
                    
    fieldLabel'Time',
                    
    name'time'minValue'8:00am'maxValue'6:00pm'
                
    })
            ]}); 
    use css declaration
    Code:
        <style>
        .float-left {float: left;margin-right: 4px;}
        </style>
    After you can refine autoadjust size of your fields by create your own form layout

  3. #3
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    No, you can't do that with float layout.

    Column or hbox layout are much better suited for this, e.g.
    Code:
    xtype: 'form',
    defaults: {
      xtype: 'container',
      anchor: '0',
      layout: 'hbox',
      defaults: {
        xtype: 'container',
        layout: 'form',
        labelAlign: 'top',
        defaultType: 'textfield'
      }
    },
    items: [{
      items: [{
        items: {
          fieldLabel: 'Object Class',
          width: 200
        }
      },{
        items: {
          fieldLabel: 'Code',
          width: 200
        }
      },{
        items: {
          fieldLabel: 'Reference',
          flex: 1
        }
      }]
    },{
      items: [{
        items: {
          fieldLabel: 'Customer',
          flex: 1
        }
      },{
        items: {
          fieldLabel: 'Valid From',
          width: 200
        }
      },{
        items: {
          fieldLabel: 'Valid Until',
          flex: 1
        }
      }]
    },{
      items: [{
        items: {
          fieldLabel: 'Default Time Table',
          flex 1
        }
      },{
        items: {
          fieldLabel: 'Default Time Zone',
          flex: 1
        }
      }]
    }]

  4. #4
    Sencha User laurentParis's Avatar
    Join Date
    Aug 2010
    Location
    paris
    Posts
    246
    Vote Rating
    2
    laurentParis is on a distinguished road

      0  

    Default


    so great +1 )

  5. #5
    Ext JS Premium Member
    Join Date
    Aug 2007
    Location
    Antwerp, Belgium
    Posts
    564
    Vote Rating
    61
    joeri is a jewel in the rough joeri is a jewel in the rough joeri is a jewel in the rough joeri is a jewel in the rough

      0  

    Default


    It hadn't occurred to me to wrap each field in its own formlayout container.

    But, this solution is still a bit of a hack. It would probably be better if anchorlayout was extended to allow delphi-like anchoring.

Similar Threads

  1. Ext JS and Delphi
    By wanderlan in forum Community Discussion
    Replies: 10
    Last Post: 5 Mar 2012, 4:28 AM
  2. ExtDirect for Delphi
    By r.federiconi in forum Ext.Direct
    Replies: 20
    Last Post: 22 Feb 2010, 1:11 PM
  3. ExtJs in Intraweb (Vcl For The Web) on delphi
    By aytaral in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 28 Aug 2009, 7:49 AM
  4. How to install extJS on delphi for php ide
    By aytaral in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 14 Apr 2008, 5:06 PM
  5. Are you thinging support delphi for php ?
    By darkslord in forum Community Discussion
    Replies: 5
    Last Post: 4 Oct 2007, 2:27 PM

Thread Participants: 2