PDA

View Full Version : Statusbar placement on Form



ender07
27 Sep 2008, 9:35 PM
Hello,

I have Formpanel to which I have added a status bar. However, the status bar appears above the Submit / Cancel buttons that are at the bottom on the form. Is there a way to move the bar to be at the bottom?

Thanks


Ext.onReady(function(){

Ext.QuickTips.init();

// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';

var bd = Ext.getBody();

var metadataForm = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
frame:true,
title: 'Metadata Details',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 230},
defaultType: 'textfield',
url: '/webconsole/metaData.do',
items: [{
fieldLabel: 'Category',
name: 'categoryType',
allowBlank:false
},{
fieldLabel: 'Type Id',
name: 'typeId'
},{
fieldLabel: 'Description',
name: 'description'
}
],
buttons: [{
text: 'Save',
id: 'btnSave',
formBind:true,
handler:function(){
metadataForm.getForm().submit({
method:'POST',
success: function() {
statusBar = Ext.getCmp('form-statusbar');
statusBar.showBusy('<font color=red>Data has been successfully saved.</font>');
(function(){
statusBar.clearStatus({useDefaults:true});
}).defer(4000);
}
})
}
},{
text: 'Cancel'
}],
bbar: new Ext.StatusBar({
defaultText: '',
id: 'form-statusbar',
statusAlign: 'right',
items: [{
text: 'Status'
}, '-', ' ', ' ', ' ']
})

});

metadataForm.render(document.body);
metadataForm.getForm().load();

});

Animal
28 Sep 2008, 12:37 AM
It's just the order in which the elements are created.

The toolbar is put into the bwrap which wraps the body. Conceptually, the structure is



<panel>
<header/>
<bwrap>
<tbar/>
<body/>
<bbar/>
</bwrap>
<footer/>
</panel>


And the buttons are in the footer which as you see is below the bbar.

But this is just a plain old HTML document, so you can move things around:



var metadataForm = new Ext.form.FormPanel({
renderTo: document.body,
labelWidth: 75, // label settings here cascade unless overridden
frame:true,
title: 'Metadata Details',
bodyStyle:'padding:5px 5px 0',
width: 350,
autoHeight: true,
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: 'Category',
name: 'categoryType',
allowBlank:false
},{
fieldLabel: 'Type Id',
name: 'typeId'
},{
fieldLabel: 'Description',
name: 'description'
}
],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}],
bbar: [{ text: 'Button'}],
listeners: {
render: function(p) {
p.footer.dom.appendChild(p.getBottomToolbar().el.dom);
}
}
});

ender07
28 Sep 2008, 4:10 AM
Thanks, that worked and the explanation was very helpful.