如何在extJs中隐藏选择文件按钮

Question

We're using an old version of extJS (2.3.0) I'm experiencing some headache with choose file button / Here is my code

var uploadBtn = new Ext.Panel({
    tbar : [
        {text: 'Upload CSV file', id: 'upload-btnn', handler: uploadHandler} // tbbutton is the default xtype if not specified
    ]
});


var fileField = new Ext.ux.form.FileUploadField({
     fieldLabel: 'File name',
     id: 'form-file',
     emptyText: 'Select a Document',
     name: 'file', 
     hideButton: true                      
     //buttonText: 'Оберіть файл'       
});

var fileUploader = new Ext.FormPanel({
   id:'upload-form',
   fileUpload: true,
   header: false,
   hidden: true,
   labelWidth: 75,
   frame:true,
   bodyStyle:'padding:5px 5px 0',
   autoWidth: true,
   //defaultType: 'textfield',
   items: [          
      fileField
   ],
   buttons: [{
      text:'upload',
      handler: submitIt
   },{
      text: 'cancel',
      handler: function(){
         fileUploader.getForm().reset();
         fileUploader.hide();
         //$('upload-btnn').show();
         //uploadBtn.show();
      }
   }],
   border:false,
   scope: this
});



function submitIt(){
   fileUploader.getForm().isValid();
   fileUploader.getForm().submit({
      url: 'links_generation/file_upload',        
      clientValidation: false,
      waitMsg: 'Uploading your Document...',
      success: function(fp, o){
         //msg('Success', 'Processed file "'+o.result.file+'" on the server');

         fileUploader.getForm().reset();             
         //fileUploadWin.hide();
      },
      failure: function(a,b) {            
         fileUploader.getForm().reset();
         //fileUploadWin.hide();
      }
   });
}   

function uploadHandler(){
    this.hide();      
    fileUploader.show();
}

It appears two button. I need to influence a choose file button (to style it properly) or to hide Browse button at least. Would be grateful for any advise

Answer 1

I don't see you are using customized 'filefield', so its is better to use it as a self initialized item.

Try this

items: [
     {          
      xtype:'filefield', //change the xtype as per doc
      fieldLabel: 'File name',
      id: 'form-file',
      emptyText: 'Select a Document',
      name: 'file', 
      hideButton: true  
     }
   ]

Answer 2

Try this ..

 items: [{
    xtype: 'filefield',
    name: 'photo',
    fieldLabel: 'Upload a file',
    emptyText: 'Click here to browse files...',
    labelWidth: 100,
    msgTarget: 'side',
    allowBlank: false,
    anchor: '100%',
    buttonText: '',
    buttonConfig: {
      cls: 'browseBtnCls'
    }
  }]

and add following class in css

.browseBtnCls {padding: 0px !important;background-color: transparent !important; border-color: transparent; width: 0px}

Check this working fiddle.