PDA

View Full Version : How to add some text into FormPanel ?



natts_82
5 Jan 2010, 2:38 AM
Hi,

I have a file upload form, and its implemented this way:


var fileUploadPanel = new Ext.FormPanel({

fileUpload: true,
width: 400,
frame: true,
title: 'File Upload Form',
autoHeight: true,
bodyStyle: 'padding: 10px 10px 0 10px;',
labelWidth: 50,
defaults: {
anchor: '95%',
allowBlank: false,
msgTarget: 'side'
}

,items: [{
xtype: 'fileuploadfield',
id: 'form-file',
emptyText: 'Upload a CSV file containing the subscription information',
fieldLabel: 'File 1',
name: 'files',
buttonText: 'Browse'
},hiddenField = new Ext.form.Hidden({ name: 'userId', value: userIdJs})],
buttons: [
{
text: 'More Files',
handler: function(){
fileCounter++;
fileUploadPanel.add( {
xtype: 'fileuploadfield',
id: 'form-file'+fileCounter,
emptyText: 'Upload a CSV file containing the subscription information',
fieldLabel: 'File '+fileCounter,
name: 'files',
buttonText: 'Browse'
}).show();
loadSpecificCard(1);
loadSpecificCard(4); // we have to switch and reswitch the panel on view so that the panel updates cna be shown
}
}
, {
text: 'Upload',
handler: function(){
if(fileUploadPanel.getForm().isValid()){

fileUploadPanel.getForm().submit({
url: '/rdrim-webapp/rdrimUI/upload.action'
,waitMsg: 'Uploading the files...'
,scope:this
,success:this.onSuccess
,failure:this.onFailure
});
}
}
,onSuccess:function(form, action) {
msg('Success','Successfully uploaded '+action.result.files+' files.');
fileUploadPanel.getForm().reset();
} // eo function onSuccess
,onFailure:function(form, action) {
this.showError(action.result.error || action.response.responseText);
} // eo function onFailure

/**
* Shows Message Box with error
* @param {String} msg Message to show
* @param {String} title Optional. Title for message box (defaults to Error)
* @private
*/
,showError:function(msg, title) {
title = title || 'Error';
Ext.Msg.show({
title:title
,msg:msg
,modal:true
,icon:Ext.Msg.ERROR
,buttons:Ext.Msg.OK
});
} // eo function showError


},{
text: 'Reset',
handler: function(){
fileUploadPanel.getForm().reset();
var fileUploadItem = fileUploadPanel.items.find(
function(i){
if (i!=null && i.id!=null && i.id !='form-file')
{
fileUploadPanel.remove(i);
}

}
);

}
}]

});




I want to add some instructions text as indicated in the attachment. (below the title, above the file upload field). Is there any way to achieve the same ? 'label' attribute is accepted by the framework, but the text specified against the label attribute is not shown in the form. Kindly advise.

Regards,
Nataraja

Animal
5 Jan 2010, 3:22 AM
Does this help?

http://www.extjs.com/forum/showthread.php?t=77984

natts_82
6 Jan 2010, 1:39 AM
Hi Nige,

Thank you very much for the pointers. Your plugin and also the wealth of information that was in the thread enabled me to resolve the issue.

Many thanks again !

Best Regards,
Nataraja