1. #1
    Sencha Premium Member
    Join Date
    May 2010
    Posts
    12
    Vote Rating
    0
    legrego is on a distinguished road

      0  

    Default File Upload Field icon issue

    File Upload Field icon issue


    Hello,

    I am using the File Upload Field bundled ux in a toolbar, under ExtJS 3.3.1.
    config:
    Code:
    var uploadButton = new Ext.form.FileUploadField({
                name : 'filedata',
                buttonCfg : {
                    iconCls : 'new',
                    cls: 'x-btn-text-icon',
                    text : 'Upload'
                },
                buttonOnly : true,
            });
    The icon renders underneath the button text (i.e, no padding to offset the icon). Also, the size of the button just encapsulates the icon, not the button text itself. See attached.Attachment 25423

    I have verified that all required stylesheets, etc are linked correctly. I have attached the icon class as reported by firebug as well.Attachment 25422

    I can set the text config to
    Code:
    <span  style="padding-left:18px">Upload</span>
    , and that will correctly offset the text from the icon, but the button rendering still does not work correctly.

  2. #2
    Sencha User
    Join Date
    Jan 2011
    Posts
    9
    Vote Rating
    0
    rborg is on a distinguished road

      0  

    Default


    I also had the problem in 3.4 with the button width only being set to the icon size. I had to override the FileUploadField redner method and change x-btn-icon to x-btn-text-icon.

    Code:
        Ext.override(Ext.ux.form.FileUploadField, {
            onRender : function(ct, position){
                Ext.ux.form.FileUploadField.superclass.onRender.call(this, ct, position);
    
                this.wrap = this.el.wrap({cls:'x-form-field-wrap x-form-file-wrap'});
                this.el.addClass('x-form-file-text');
                this.el.dom.removeAttribute('name');
                this.createFileInput();
    
                var btnCfg = Ext.applyIf(this.buttonCfg || {}, {
                    text: this.buttonText
                });
                this.button = new Ext.Button(Ext.apply(btnCfg, {
                    renderTo: this.wrap,
                    cls: 'x-form-file-btn' + (btnCfg.iconCls ? ' x-btn-icon' : '') // CHANGE THIS LINE TO:
                    cls: 'x-form-file-btn' + (btnCfg.iconCls ? ' x-btn-text-icon' : '') // CHANGE THIS LINE TO:
                }));
    
                if(this.buttonOnly){
                    this.el.hide();
                    this.wrap.setWidth(this.button.getEl().getWidth());
                }
    
                this.bindListeners();
                this.resizeEl = this.positionEl = this.wrap;
            }
        });

Similar Threads

  1. [OPEN] File upload gives wrong file names. Characters encoding issue?
    By ecanraf in forum Ext 3.x: Bugs
    Replies: 2
    Last Post: 18 Feb 2011, 4:17 PM
  2. How to disable file upload field and file upload icon
    By mypen in forum Ext 3.x: Help & Discussion
    Replies: 11
    Last Post: 18 Feb 2011, 7:45 AM
  3. How to disable file upload field and file upload icon
    By mypen in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 31 Jan 2011, 2:16 AM
  4. 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

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar