Results 1 to 7 of 7

Thread: [Solved] Dynamic Form Layout: Beating Horizontal Scrolling

  1. #1

    Question [Solved] Dynamic Form Layout: Beating Horizontal Scrolling

    I have a form that I'm dynamically building from a server response. I can't figure out how to get the layout proper.

    Take a simple example form:
    Code:
    var myForm = new Ext.form.FormPanel({
      id: 'myFormId',
      autoScroll: true,
      frame: true,
      height: 500,
      width: 350,
      labelWidth: 100
    });
    Next, I initiate a server request and use the result to make the form's elements.

    Code:
    Ext.Ajax.request({
      ...
      callback: function() {
        ...
        var myForm = Ext.getCmp('myFormId');
        myForm.removeAll();
        var aFieldSet = ...;
        myForm.add(aFieldSet);
        ...
        for(...) {
          var thisComboBox = ...;
          aFieldSet.add(thisComboBox);
        }
        myForm.doLayout();
      }
      ...
    });
    That all works well. When I go to display the form in a pop up window, I see a window with a vertical and horizontal scroll. While the vertical scroll is usually necessary, the horizontal scroll is not.

    Here's the window:

    Code:
    var xWin = new Ext.Window({
      autoScroll: false,
      modal: true,
      layout: 'fit',
      border: false,
      closeAction: 'hide',
      width: 0,
      height: 0,
      items:[myForm],  //see above
      listeners: {
        show: function() {
          //acquire the viewport's max width and height
          var wWidth  = //viewport's max width or width I provide (hardcode) that is less than the max
          var wHeight = //viewport's max height or height I provide (hardcode) that is less than the max
          xWin.setWidth(wWidth);
          xWin.setHeight(wHeight);
        }
      }
    });
    In order to get rid of the horizontal scrolling, what should I do? Fit/autoscroll seems to be the cause, but my mind can't figure out what the proper layouts are supposed to be. Any help? Thanks in advance!

    Turns out that my fieldset objects needed a width to stop them from auto fitting on that axis...

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

    Default

    Why not use the anchor config to size the Fieldsets relative to the Container they are in? That way you don't hardcode some arbitrary value.

  3. #3
    Sencha User
    Join Date
    Jan 2008
    Location
    Maryville, IL, US
    Posts
    288

    Default

    I agree with Animal...
    Code:
    anchor: "95%"
    would have solved all of your problems (or set width where you don't need the "full screen" look).

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

    Default

    I don't like percentage anchors. I always use:
    Code:
    anchor: '-20'

  5. #5

    Default

    Thank you everyone, that's much better

  6. #6
    Sencha User
    Join Date
    Jan 2008
    Location
    Maryville, IL, US
    Posts
    288

    Default

    Can you show the code you are using to create the comboBoxes dynamically, and maybe the JSON code you are looping through? I am having no luck defining a combo in JSON, specifically the store config.

  7. #7

    Default

    This is example code inside a loop. Assuming jsonData is an array like [{name: 'One', value: 1}, {name: 'Two', value: 2}], then:

    Code:
    var tStore = [];
    for(i = 0, len = jsonData.length; i < len; i+=1) {
      tStore.push([jsonData[i].value, jsonData[i].name]);
    }
    var thisComboBox = {
      xtype: 'combo',
      store: tStore,
      triggerAction: 'all'
    };
    flattens it down into an array store. Good luck!
    Wes

Similar Threads

  1. Replies: 6
    Last Post: 16 Apr 2008, 9:34 AM
  2. How to achieve horizontal layout of form fields and buttons
    By sl5337 in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 26 Dec 2007, 9:37 AM

Tags for this Thread

Posting Permissions

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