PDA

View Full Version : form.add (button) render location



mkrakowski
4 Mar 2013, 3:34 PM
Hi All,

My buttons aren't rendering to where I would like them. When I define a button within my options object they are rendered correctly to the bottom right toolbar (standard location), however when I use the .add method they are rendered within the form body, directly under the last input field.

How can I specify for fp.add (button) to be rendered to the bottom toolbar? I'm assuming that this would have the same behavior as .addButton in Ext 3.x..




// build the form (options contains all the params)
var fp = Ext.create('Ext.form.Panel', options);

fp.add({
xtype : 'button',
text : buttons.saveExitText,
iconCls : 'icon-save',
handler : function(btn) {
if(buttons.saveExitHandler) buttons.saveExitHandler(fp);
}
});



42194
Thanks!

slemmon
4 Mar 2013, 4:24 PM
The buttons toolbar is a footer bar or a bottom bar with ui: 'footer'.

If you have a footer bar already you can get a reference to it and add your buttons to it. If not you can do something like:



fp.addDocked({
xtype: 'toolbar'
, dock: 'bottom'
, ui: 'footer'
, items: [{
text: 'Button Text'
, iconCls: 'buttonCls'
, handler: function () {}
}]
});


*If you add the footer bar using the code above the button will be aligned left. If you want it aligned right (which is the default for a buttons bar for your formpanel) you can add your items like so:



//...
items: ['->', {
text: 'Button Text'
// , the rest of your button config
}]
//...

mkrakowski
4 Mar 2013, 5:54 PM
Awesome, Thank you!

Since the dock needs to be built only when buttons are present I did the following to get this done.



var requiresDock = false;
if (buttons.saveExitEnabled) { // Save and Exit Enabled (button)
requiresDock = true;
saveButton =
{
xtype : 'button',
text : buttons.saveExitText,
iconCls : 'icon-save',
handler : function(btn) {
if(buttons.saveExitHandler) buttons.saveExitHandler(fp);
}
};
}

// Alternate / Second type of Save button here...

if (buttons.resetEnabled) { // Reset Enabled (button)
requiresDock = true;
resetButton =
{
xtype : 'button',
formBind : true,
text : buttons.resetText,
iconCls : 'icon-cancel',
handler : function(btn) {
if(buttons.resetHandler) buttons.resetHandler(fp);
}
};
}

// Create button dock if buttons exist
if (requiresDock) {
fp.addDocked({
xtype : 'toolbar',
dock : 'bottom',
ui : 'footer',
items : ['->', saveButton, resetButton] // Send docked buttons to the right '->'
});
}


Thanks again!