Layout: Placing containers within a form..

[zhegwood]

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):

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"
        }
      ]
    }
  ]
});

[mjaomaha]

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.

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.

[Animal]

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?

[zhegwood]

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.

[zhegwood]

Adding them after the fact does work:

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"
});

[mjaomaha]

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.

[zhegwood]

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!

[Animal]

You've broken Ext doing that.

You are just rendering HTML into a div.

[zhegwood]

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:

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;"
}));

[mjaomaha]

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.

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
}]

});