How do you insert Buttons (fbar) in Form designed by architect?

[whirling dervish]

Is there any way to insert buttons (fbar) when designing a form using Sencha Architect?

Here is a thread on the subject for Ext Designer, I was just checking to see if this limitation has been removed / fixed.

[ssamayoa]

Aaron alreay said but this are the steps anyway:

1. Drop a tool bar in the form.
2. Set dock = "bttom"
3. Set ui = "footer"
4. add buttons...

fbar is not supported by SA.

Regards.

[whirling dervish]

Yeah I saw that in the other thread. Just wanted to check to see if this had changed. Seems like a weird thing not to support.

I also do not understand what "ui = footer" is suppose to accomplish. When I enter that it just looks like the toolbar is detached from the form.

[ssamayoa]

Seems like a weird thing not to support.

Why?

fbar is just a shortcut.

[whirling dervish]

Why?

fbar is just a shortcut.

Ah I skimmed over that part of the documentation,

fbar: [
  { type: 'button', text: 'Button 1' }
]

is equivalent to

dockedItems: [{
    xtype: 'toolbar',
    dock: 'bottom',
    ui: 'footer',
    defaults: {minWidth: minButtonWidth},
    items: [
        { xtype: 'component', flex: 1 },
        { xtype: 'button', text: 'Button 1' }
    ]
}]

However when I set ui to 'footer', this is what my UI looks like,


Notice the grid behind the toolbar.

[aconran]

Notice the grid behind the toolbar.

Ah yes that would happen. Because its transparent and the thing immediately below it is in the canvas grid...

Similar to if you were to put the component on a page with a color background and/or image background this would bleed through.

[whirling dervish]

So even though the toolbar is inside the form panel it is rendered as outside of it?

Is there anyway to give it the appearance of being connected to the form?

[ssamayoa]

Why?

Is not good enough the way it is?

But if definitely you want do that, one way is:

1. Drop a panel.
2. Drop a form panel inside that panel.
3. Drop the toolbar in the inner panel, set dock=bottom and ui=footer.
4. Add buttons to the form panel's toolbar.
5. Clear the form panel's title.
6. Set form panel's border to 0
7. (optional) set bodyPadding to 5 (or whatever value you want) of the outer panel.

Regards.

[whirling dervish]

Thanks for the help everyone.

It seems like a really strange work around to me. It weird that to have a form with a normal looking footer with a button in it I need to create two panels. That method is going to lead to some cluttered code.

If anyone comes up with a better way, please post it here.

[ssamayoa]

That method is going to lead to some cluttered code.

Who cares with generated code?