1. #1
    Ext User zhegwood's Avatar
    Join Date
    Dec 2007
    Location
    Boulder, CO Suburbia (Lafayette)
    Posts
    388
    Vote Rating
    1
    zhegwood is on a distinguished road

      0  

    Default Layout: Placing containers within a form..

    Layout: Placing containers within a form..


    I have a form panel with a bunch of stuff in it. I'm trying to make a container that will house three buttons and I'm having a hard time getting them to show up. I'm trying to follow the example in the docs for Ext.Container, but no matter what combination of layout vs not vs changing it from a container to a panel, the buttons do not get rendered & I'm not sure why. The rest of the form is rendered just fine and the container below is rendered with a height and width of 0 and no child elements. If I specify a height and width the container will show up with that height and width, but again... No child elements (no buttons).

    **update** If I use the html config option I can see the html, but the items array doesn't seem to be working for creating child elements.

    Here's the code I have right now for that specific container (posted full code):

    Code:
    new Ext.form.FormPanel({
      renderTo:"form-builder-container", //html div
      cls: "form-builder",
      border: false,
      defaults: {
        border: false
      },
      items: [
        {
          xtype: "container",
          autoEl: "div",
          //width: 100,
          //height: 50,
          style: "float:left;border:1px solid red;",
          layout: "form", //I've tried fit, anchor, and box as well w/ the same result.
          items: [
            {
                xtype: "button",
                text: "Add"
            },
            {
              xtype: "button",
              text: "Edit"
            },
            {
              xtype: "button",
              text: "Remove"
            }
          ]
        }
      ]
    });

  2. #2
    Ext User
    Join Date
    Feb 2009
    Posts
    37
    Vote Rating
    0
    mjaomaha is on a distinguished road

      0  

    Default


    Can we see the whole form code?

    Also, maybe try creating the buttons first, then use the containers insert method and see if that helps.

    Code:
    var addbutton = new Ext.Button({
            text: "Add"
    });
    var editbutton = new Ext.Button({
            text: "Edit"
    });
    var removebutton = new Ext.Button({
            text: "Remove"
    });
     
    var container = .... // your container code
     
    container.insert(0,addbutton);
    container.insert(1,editbutton);
    container.insert(2,removebutton);
    The way you're doing it should work, but sometimes when you create objects using the shorthand method just using the xtype, things don't always work to their full extent.

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    53
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Use layout: table.

    The others often require that THEY be sized and actively size their child items.

    Table layout does like a table and stretches to accommodate its child items.

    Why float:left?

  4. #4
    Ext User zhegwood's Avatar
    Join Date
    Dec 2007
    Location
    Boulder, CO Suburbia (Lafayette)
    Posts
    388
    Vote Rating
    1
    zhegwood is on a distinguished road

      0  

    Default


    Quote Originally Posted by Animal View Post
    Use layout: table.

    The others often require that THEY be sized and actively size their child items.

    Table layout does like a table and stretches to accommodate its child items.

    Why float:left?
    I'm floating this button container next to a textarea (which is also float:left in the x-form-item node). The float is working fine, but even if I take out all of the other items in the form except for this container (as posted above), I get the same results. Specifying layout:"table" in the above code isn't working for me either.

    Hmmm... I'll try inserting them after the fact.

  5. #5
    Ext User zhegwood's Avatar
    Join Date
    Dec 2007
    Location
    Boulder, CO Suburbia (Lafayette)
    Posts
    388
    Vote Rating
    1
    zhegwood is on a distinguished road

      0  

    Default


    Adding them after the fact does work:
    Code:
    new Ext.form.FormPanel({
      renderTo:"form-builder-container", //html div
      cls: "form-builder",
      border: false,
      defaults: {
        border: false
      },
      items: [
        {
          xtype: "container",
          autoEl: "div",
          id: "button-container",
          style: "float:left;border:1px solid red;"
        }
      ]
    });
    
    new Ext.Button({
      text: "Add",
      renderTo: "button-container"
    });
    
    new Ext.Button({
      text: "Edit",
      renderTo: "button-container"
    });
    
    new Ext.Button({
      text: "Remove",
      renderTo: "button-container"
    });

  6. #6
    Ext User
    Join Date
    Feb 2009
    Posts
    37
    Vote Rating
    0
    mjaomaha is on a distinguished road

      0  

    Default


    I wondered if that might not work. The short hand usually works in places where the child item type is expected, but I have done some unique things where I had to use the full instantiation. I also noticed that you directly name the div, and rendered your buttons to the div, kind of bypassing the insert or add method on container. Even though this works, there may be some attributes that you expect that may not get set, such as ownerCt.

    Good luck.

  7. #7
    Ext User zhegwood's Avatar
    Join Date
    Dec 2007
    Location
    Boulder, CO Suburbia (Lafayette)
    Posts
    388
    Vote Rating
    1
    zhegwood is on a distinguished road

      0  

    Default


    Quote Originally Posted by mjaomaha View Post
    I wondered if that might not work. The short hand usually works in places where the child item type is expected, but I have done some unique things where I had to use the full instantiation. I also noticed that you directly name the div, and rendered your buttons to the div, kind of bypassing the insert or add method on container. Even though this works, there may be some attributes that you expect that may not get set, such as ownerCt.

    Good luck.
    Huh, good to know. Thanks for your help!

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    53
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    You've broken Ext doing that.

    You are just rendering HTML into a div.

  9. #9
    Ext User zhegwood's Avatar
    Join Date
    Dec 2007
    Location
    Boulder, CO Suburbia (Lafayette)
    Posts
    388
    Vote Rating
    1
    zhegwood is on a distinguished road

      0  

    Default


    Quote Originally Posted by Animal View Post
    You've broken Ext doing that.

    You are just rendering HTML into a div.
    I'm not sure what you mean about the code above breaking Ext. I'll eventually add listeners to the buttons but for now, I'm just working on the layout.

    I tried using the insert functionality and it didn't work either:

    Code:
    var container = Ext.getCmp("button-container");
    				
    container.insert(0, new Ext.Button({
      text: "Add",
      width: 70,
      style: "margin: 0px 0px 1px 0px;"
    }));
    container.insert(1, new Ext.Button({
      text: "Edit",
      width: 70,
      style: "margin: 1px 0px;"
    }));
    container.insert(2, new Ext.Button({
      text: "Remove",
      width: 70,
      style: "margin: 1px 0px 0px 0px;"
    }));

  10. #10
    Ext User
    Join Date
    Feb 2009
    Posts
    37
    Vote Rating
    0
    mjaomaha is on a distinguished road

      0  

    Default


    Maybe you've already eliminated this, but I just use the buttons attribute of a form panel for my buttons... Ignore the jsp spring tags.

    Code:
    var
    intPanel = new Ext.FormPanel({ labelWidth: 75, // label settings here cascade unless overridden
    url:
    'UpdateProfileServlet', frame:true, standardSubmit: true, title: '<spring:message code="message.title.profile.info"/>', bodyStyle:'padding:5px 5px 0', labelWidth: 110, width: 475, defaults: {width: 315}, defaultType: 'textfield', items: [ { xtype: 'hidden', name: 'ac_userid'
    <logic:present name=
    "ac_currentUser" scope="session"> , value: '<bean:write name="ac_currentUser" property="id"/>'
    </logic:present> }, { xtype:
    'hidden', name: 'action', value: 'profileupdate'
    }, { fieldLabel:
    '<spring:message code="field.label.username"/>', name: 'username', disabled: true
    <logic:present name=
    "ac_currentUser" scope="session"> , value: '<sec:authentication property="principal.username"/>'
    </logic:present> }, { fieldLabel:
    '<spring:message code="field.label.screen.name"/>', name: 'screenname', <logic:present name="ac_currentUser" scope="session"> value: '<bean:write filter="false" name="ac_currentUser" property="screenName"/>', </logic:present> regexp: '<spring:message code="regexp.not.empty"/>', invalidText: '<spring:message code="error.screen.name.required"/>'
    }, { fieldLabel:
    '<spring:message code="field.label.email"/>', name: 'email'
    <logic:present name=
    "ac_currentUser" scope="session"> , value: '<bean:write filter="false" name="ac_currentUser" property="email"/>'
    </logic:present> ,regexp:
    '<spring:message code="regexp.email"/>', invalidText: '<spring:message code="error.desired.email.invalid.format"/>'
    }, { fieldLabel:
    '<spring:message code="field.label.repeat.email"/>', name: 'repeatemail'
    <logic:present name=
    "ac_currentUser" scope="session"> , value: '<bean:write filter="false" name="ac_currentUser" property="email"/>'
    </logic:present> ,regexp:
    '<spring:message code="regexp.email"/>', invalidText: '<spring:message code="error.repeat.email.invalid.format"/>'
    },
    new Ext.form.ComboBox({ fieldLabel: '<spring:message code="field.label.secret.question"/>', hiddenName:'question', store: new Ext.data.SimpleStore({ fields: ['abbr', 'state'], data : Ext.actioncenter.questions }), valueField:'abbr', displayField:'state', mode: 'local', triggerAction: 'all', emptyText:'Select a question', selectOnFocus:true, editable:false, <logic:present name="ac_currentUser" scope="session"> value: '<bean:write filter="false" name="ac_currentUser" property="secretQuestion"/>', </logic:present> regexp: '<spring:message code="regexp.not.empty"/>', invalidText: '<spring:message code="error.secret.question.required"/>', width:250 }), { fieldLabel: '<spring:message code="field.label.secret.answer"/>', name: 'answer', <logic:present name="ac_currentUser" scope="session"> value: '<bean:write filter="false" name="ac_currentUser" property="secretAnswer"/>', </logic:present> regexp: '<spring:message code="regexp.not.empty"/>', invalidText: '<spring:message code="error.secret.answer.required"/>', } ], buttons: [{ text: '<spring:message code="button.text.update"/>', handler: doUpdate }]
    });

Thread Participants: 2