Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: How to disable file upload field and file upload icon

  1. #1
    Sencha User
    Join Date
    May 2010
    Posts
    15

    Default How to disable file upload field and file upload icon

    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
    Attached Images Attached Images

  2. #2
    Sencha User
    Join Date
    Sep 2010
    Location
    Norcross, GA
    Posts
    68

    Default

    I'm having the same problem. Anybody else solve this? Or can the OP let us know how he has solved this please.

  3. #3
    Sencha User
    Join Date
    Feb 2008
    Location
    USA
    Posts
    162

    Default

    uploadButton.disable(); ? Works for me.
    JSJoy.com - my blog on the joy that is JavaScript!
    Ext Extension: Awesome Uploader - Drag n' Drop Awesome Uploading

  4. #4
    Sencha User
    Join Date
    May 2010
    Posts
    15

    Default

    uploadButton.disable(); here uploadButton is id of the button or name of the button

  5. #5
    Sencha User
    Join Date
    Feb 2008
    Location
    USA
    Posts
    162

    Default

    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

    Code:
    {
        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'
        }
    }
    JSJoy.com - my blog on the joy that is JavaScript!
    Ext Extension: Awesome Uploader - Drag n' Drop Awesome Uploading

  6. #6
    Sencha User
    Join Date
    Sep 2010
    Location
    Norcross, GA
    Posts
    68

    Default

    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):

    Code:
                    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:

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

  7. #7
    Sencha User
    Join Date
    Feb 2008
    Location
    USA
    Posts
    162

    Default

    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.
    JSJoy.com - my blog on the joy that is JavaScript!
    Ext Extension: Awesome Uploader - Drag n' Drop Awesome Uploading

  8. #8
    Sencha User
    Join Date
    Feb 2008
    Location
    USA
    Posts
    162

    Default

    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.

    Code:
    <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>
    JSJoy.com - my blog on the joy that is JavaScript!
    Ext Extension: Awesome Uploader - Drag n' Drop Awesome Uploading

  9. #9
    Sencha User
    Join Date
    Sep 2010
    Location
    Norcross, GA
    Posts
    68

    Default

    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

  10. #10
    Sencha User
    Join Date
    Sep 2010
    Location
    Norcross, GA
    Posts
    68

    Default

    Quote Originally Posted by carl23934 View Post
    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.

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

Page 1 of 2 12 LastLast

Similar Threads

  1. How to disable file upload field and file upload icon
    By mypen in forum Sencha Touch 1.x: Discussion
    Replies: 3
    Last Post: 26 Jan 2011, 1:04 AM
  2. how can i disable File Upload Field?
    By HyGy in forum Ext 3.x: Help & Discussion
    Replies: 5
    Last Post: 25 Jan 2011, 12:31 PM
  3. Replies: 2
    Last Post: 23 Aug 2009, 6:18 PM
  4. File Upload Field
    By jimmyphp in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 21 Oct 2008, 9:54 AM
  5. file upload field?
    By spasmoid in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 30 Apr 2007, 9:12 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •