1. #1
    Ext JS Premium Member
    Join Date
    Aug 2007
    Location
    Antwerp, Belgium
    Posts
    553
    Vote Rating
    25
    joeri has a spectacular aura about joeri has a spectacular aura about

      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,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      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
    553
    Vote Rating
    25
    joeri has a spectacular aura about joeri has a spectacular aura about

      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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar