0

extjs× 6627,3.x version, In mozilla browser reset is working for inputType :'file', but its not working for IE8 Browser and this is my code,

xtype :'textfield',
name:'Policy_fileUpload',
id :title+'_uploadFile',
inputType :'file',
fieldLabel :'Upload File and Location<font color=red>*</font>',
blankText :'Please choose a file',
anchor :'100%',
required :true,
autoShow :true

now am resetting this field by using the reset property

xtype:'button',extjs× 6627
id:title+'cancelButton',
width:100,
text:'Cancel',
listeners : {
   'click':function(){
       Ext.getCmp(title+'_uploadFile').reset();
       }

help me to solve this Thanks in advance.

NewUser
  • 3,729
  • 10
  • 57
  • 79
Suganth
  • 25
  • 3
  • 11

1 Answers1

1

It seems to be a security 'feature' in IE8. Here are related topics where solution for this problem is given using jQuery:

Empty input type file doesn't work in IE

Clearing <input type='file' /> using jQuery

Both of them suggest something in the lines of recreating the input field. To do that in ExtJS 3.x, you may try something like this:

listeners : {
    'click':function(){
        var uploadField = Ext.getCmp('_uploadFile');                
        if (Ext.isIE8) {                
            var cfg = uploadField.initialConfig;
            uploadField.destroy();
            var parentCt = Ext.getCmp('parentContainer');
            parentCt.insert(0, cfg);
            parentCt.doLayout();
        } else {
            uploadField.reset();
        }

    } 
}

Also, it seems that IE9 behaves in the same way. So you may want to have if (Ext.isIE) instead of if (Ext.isIE8).

Community
  • 1
  • 1
medvaržtis
  • 128
  • 1
  • 11
  • Thanks it was really helpful for me, but here what you are mentioning as a Ext.getCmp('parentContainer');,, why am asking this means while running the script its throwing undefined error so i cant set the value for var parentCt. – Suganth Sep 25 '12 at 05:06
  • 'parentContainer' is the id of a container in which uploadField has been placed. Have a look here: http://jsfiddle.net/UAAH3/ . Actually, referencing components by their id property is a bad idea in bigger application. I used it here as I thought it was pretty obvious what I meant. – medvaržtis Sep 25 '12 at 15:19
  • Very Thanks medvarztis while executing below code am using one alert to find what it is comin in the parentContainer but its displaying that as a undefined, ihave attached the code below... thanks in advance if (Ext.isIE) { var cfg = uploadField.initialConfig; uploadField.setRawValue(' '); alert('cfg value'+ Ext.get('parentContainer')); if(Ext.get('parentContainer') == null){ Ext.getCmp(title+'_uploadFile').setVisible(true); } var parentCt = Ext.is('parentContainer'); parentCt.insert(0, cfg); parentCt.doLayout(); } else { uploadField.reset(); } – Suganth Sep 26 '12 at 05:41
  • Ok, sorry for confusion. 'parentCointainer' is an ID of the parent component. You actually need to REPLACE IT WITH YOUR OWN ID. If you have a panel (or any other component) with ID 'myPanel', inside which you have your upload field with id "title+'_uploadField'", then you need to replace 'parentContainer' with 'myPanel' (i.e. your id of that component). – medvaržtis Sep 26 '12 at 17:15
  • Very Very thanks medvarztis,, its working fine for me and it was really helpful....thanks againg :-) – Suganth Sep 27 '12 at 05:40