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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi