xtype: filefield not displaying properly

Question

i had a popup that looks like this :

items : [{

    xtype: 'form',
    title: 'Upload a Photo',
    width: 400,
    bodyPadding: 10,
    frame: false,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'filefield',
        name: 'photo',
        fieldLabel: 'Photo',
        labelWidth: 50,
        msgTarget: 'side',
        allowBlank: false,
        anchor: '100%',
        buttonText: 'Select Photo...'
    }]
}]

i only copied the example in sencha docs but when i run it, it gives me this :

enter image description here

instead of this :

enter image description here

my concern is that the button 'choose file' displayed instead of 'select photo'

how can i solve this.. ?

Looks like you've got some kind of CSS conflict, there's several elements in the comparison that don't match up. The font size on the header, the panel background colour. — Evan Trimboli, Jul 18 '13 at 11:04
Which browser are you using? Can you test IE9, IE10 and Chrome? — Christoph, Jul 18 '13 at 11:47
@EvanTrimboli header font and panel background was set by me (custom theme).@ChristophHartmann i am using chrome and IE 9, btw, i updated my images (i only have to set frame: true), still the problem occurs — tonyo, Jul 19 '13 at 07:02
why do you have a renderTo: Ext.getBody() ? Can you comment it out and try again? — dbrin, Jul 19 '13 at 22:32

score 0 · Accepted Answer · answered Jan 25 '14 at 16:19

0

Solved the problem... As @evan-trimboli mentioned, it was a css conflict. Just run sencha app build command for your project and it will work fine..

Help yourself by helping others

answered Jan 25 '14 at 16:19

Raza Ahmed

2,661
2
35
46

score 0 · Answer 2 · answered Oct 22 '14 at 18:57

0

I would add that run sencha app build, and then clear CACHE in browser.

answered Oct 22 '14 at 18:57

leshicus

109
1
8

xtype: filefield not displaying properly

2 Answers2