1. #1
    Ext JS Premium Member
    Join Date
    Aug 2007
    Location
    Antwerp, Belgium
    Posts
    555
    Vote Rating
    27
    joeri has a spectacular aura about 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,246
    Vote Rating
    87
    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
    555
    Vote Rating
    27
    joeri has a spectacular aura about 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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."