PDA

View Full Version : How to disable file upload field and file upload icon



mypen
25 Jan 2011, 11:23 AM
How to disable file upload field and file upload icon on click on radio button NO ,it disables only file upload field and keep enable the icon,it dosen't hide file upload field icon
this is the code i am using
{
xtype: 'radiogroup',
fieldLabel: 'Documents Enclosed',
items: [
{boxLabel: 'Yes', id:'enc1', name: 'rb-auto', inputValue: 1, checked: true},
{boxLabel: 'No', id:'enc2', name: 'rb-auto', inputValue: 0}
],
listeners:{
change: function(radiogroup,radio)
{
var te=Ext.getCmp('enc1').getValue();
if(te==true )
{
Ext.getCmp('file1').setValue('');
Ext.getCmp('file1').setDisabled(false);
Ext.getCmp('file_upload').Visible(true);
}
else
{
Ext.getCmp('file1').setValue('NA');
Ext.getCmp('file1').setDisabled(true);
Ext.getCmp('file_upload').Visible(false); // this makes file upload icon invisible but when i click on
//that invisible icon it opens file upload window
}
}
}
}
{
xtype: 'fileuploadfield',
id: 'file1',
fieldLabel: 'Upload Document',
style: 'text-align: left',
buttonText: '',
allowBlank: false,
width: 135,
buttonCfg: {
iconCls: 'upload-icon',
id:'file_upload'
}
}
is there any way to remove the icon dynamically on click of radio button NO
Any help is greatly appreciated
Thanks A lot

deskwideweb
15 Feb 2011, 2:00 PM
I'm having the same problem. Anybody else solve this? Or can the OP let us know how he has solved this please.

carl23934
15 Feb 2011, 2:09 PM
uploadButton.disable(); ? Works for me.

mypen
16 Feb 2011, 4:43 AM
uploadButton.disable(); here uploadButton is id of the button or name of the button

carl23934
16 Feb 2011, 4:58 AM
It would be a reference to the component.

You should always post your code inside of code tags, and clean it up with http://JSBeautifier.org



{
xtype: 'radiogroup',
fieldLabel: 'Documents Enclosed',
items: [{
boxLabel: 'Yes',
id: 'enc1',
name: 'rb-auto',
inputValue: 1,
checked: true
}, {
boxLabel: 'No',
id: 'enc2',
name: 'rb-auto',
inputValue: 0
}],
listeners: {
change: function (radiogroup, radio) {
var te = Ext.getCmp('enc1').getValue();
if (te == true) {
Ext.getCmp('file1').disable();
Ext.getCmp('file_upload').Visible(true);
} else {
Ext.getCmp('file1').setValue('NA');
Ext.getCmp('file1').enable();
Ext.getCmp('file_upload').Visible(false); // this makes file upload icon invisible but when i click on
//that invisible icon it opens file upload window
}
}
}
} {
xtype: 'fileuploadfield',
id: 'file1',
fieldLabel: 'Upload Document',
style: 'text-align: left',
buttonText: '',
allowBlank: false,
width: 135,
buttonCfg: {
iconCls: 'upload-icon',
id: 'file_upload'
}
}

deskwideweb
18 Feb 2011, 6:27 AM
Does anybody here actually try things before they post "solutions"?

Calling disable() on the upload button does *not* stop the file picker from appearing when you click on the button.

All you have to do to prove this to yourself is go into 'ext3.3.0/examples/form/' within the unzipped distribution, and modify line 84 thusly (adding an id to the buttonCfg when previously there had only been an 'iconCls' property):


iconCls: 'upload-icon', id: 'uploadIconBtn'Then at the bottom of the Ext.onReady method I've added the following lines 108-110, and they do *not* stop the file picker from appearing when you click on the button:


var uploadIconBtn = Ext.getCmp('uploadIconBtn');
console.log(uploadIconBtn);
uploadIconBtn.disable();

carl23934
18 Feb 2011, 6:59 AM
fileuploadfield is notorious for some cross browser issues. Since this is overlaying on top of a native browser control it all depends on that.

What browser(s) are you testing this on?

I did in fact test my disable theory before I posted and it worked just fine.

carl23934
18 Feb 2011, 7:12 AM
Here is a full working example.

This works in IE 9.0.7930.16406, FF 3.6.13, Safari 5.0.3, Chrome 9.0.597.98, & Opera 11.01.

Find out what you're doing wrong - .disable() and .enable() is how it's done.



<html>
<body>
<link rel="stylesheet" type="text/css" href="/inc/js/ext-3.3.1/examples/ux/fileuploadfield/css/fileuploadfield.css" />
<link rel="stylesheet" type="text/css" href="/inc/js/ext-3.3.1/resources/css/ext-all.css" />
<script type="text/javascript" src="/inc/js/ext-3.3.1/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="/inc/js/ext-3.3.1/ext-all-debug.js"></script>
<script type="text/javascript" src="/inc/js/ext-3.3.1/examples/ux/fileuploadfield/FileUploadField.js"></script>
<script type="text/javascript">

Ext.onReady(function(){

var panel = new Ext.form.FormPanel({
renderTo: document.body,
width:400,
height:400,
frame:true,
items:[{
xtype:'button'
,text:'Disable Upload'
,handler:function(){
this.ownerCt.uploader.disable();
}
},{
xtype:'button'
,text:'Enable Upload'
,handler:function(){
this.ownerCt.uploader.enable();
}
},{
xtype:'fileuploadfield'
,buttonText:'Upload File'
,buttonCfg:{
icon:'/inc/img/disk.png'
}
,ref:'uploader'
}]
});

});
</script>
</body>
</html>

deskwideweb
18 Feb 2011, 7:22 AM
Maybe yours works because it does not appear to me that you are exercising the field with the icon, instead of button text?

The code I included above that modifies what's in the examples in the 3.3.0 distro does not disable file uploading when clicking the file upload button/icon.

This is on Firefox/3.6.13

deskwideweb
18 Feb 2011, 7:27 AM
Here is a full working example.

This works in IE 9.0.7930.16406, FF 3.6.13, Safari 5.0.3, Chrome 9.0.597.98, & Opera 11.01.

Find out what you're doing wrong - .disable() and .enable() is how it's done.

Thanks, it appears that disabling the *button* has no effect. When instead I try the following modification at the bottom of Ext.onReady in the example with the distro, it does indeed disable the file upload.


Ext.getCmp('form-file').disable();

carl23934
18 Feb 2011, 7:37 AM
Nope. I updated my example above.

Here is your code... working:



<html>
<body>
<link rel="stylesheet" type="text/css" href="/inc/js/ext-3.3.1/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/inc/js/ext-3.3.1/examples/ux/fileuploadfield/css/fileuploadfield.css" />
<script type="text/javascript" src="/inc/js/ext-3.3.1/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="/inc/js/ext-3.3.1/ext-all-debug.js"></script>
<script type="text/javascript" src="/inc/js/ext-3.3.1/examples/ux/fileuploadfield/FileUploadField.js"></script>
<script type="text/javascript">

Ext.onReady(function () {

var panel = new Ext.form.FormPanel({
renderTo: document.body,
width: 400,
height: 400,
frame: true,
items: [{
xtype: 'radiogroup',
fieldLabel: 'Documents Enclosed',
items: [{
boxLabel: 'Yes',
//id: 'enc1',
name: 'rb-auto',
//inputValue: 1,
value: 1,
checked: true
},{
boxLabel: 'No',
//id: 'enc2',
name: 'rb-auto',
//inputValue: 0
value: 0
}],
listeners: {
change: function (radiogroup, radio) {
var te = radiogroup.getValue().value;
//var te = Ext.getCmp('enc1').getValue();
if (te == 1){
//Ext.getCmp('file1').setValue('');
//Ext.getCmp('file1').setDisabled(false);
this.ownerCt.file1.enable();
this.ownerCt.file1.setValue('');
//Ext.getCmp('file_upload').Visible(true);
}else{
//Ext.getCmp('file1').setValue('NA');
//Ext.getCmp('file1').setDisabled(true);
this.ownerCt.file1.disable();
this.ownerCt.file1.setValue('NA');
//Ext.getCmp('file_upload').Visible(false); // this makes file upload icon invisible but when i click on
//that invisible icon it opens file upload window
}
}
}
},{
xtype: 'fileuploadfield',
//id: 'file1',
fieldLabel: 'Upload Document',
style: 'text-align: left',
buttonText: '',
allowBlank: false,
ref:'file1',
width: 135,
buttonCfg: {
//iconCls: 'upload-icon'
icon:'/inc/img/disk.png'
}
}]
});

});
</script>
</body>
</html>

Condor
18 Feb 2011, 7:45 AM
Which Ext version (actually, which FileUploadField version) are you using?

The Ext 3.3 version correctly disables both the button and the transparent file input when you call:

this.ownerCt.file1.disable();