ExtJS 4.2 "filefield" 选择文件按钮 UI 呈现奇怪

Question

我想要一个简单的 Extjs 文档上传面板。我用这个 example available on Sencha Docs。我期待这样的事情

但是当我按原样实现相同的示例时，我的面板显示如下（保存图像是由于我正在尝试的事情）。

问题出在“选择文件”按钮上。我知道煎茶示例使用了某种 CSS 但我试图通过 css 将图像作为背景，但这也没有帮助（如果我设置 "icon" 属性在按钮配置中，即使按钮保持相同大小）。

这是我的代码

{
    xtype: 'form',
    padding: '5 5 5 5',
    flex: 1,
    frame: false,
    border: false,
    title: 'File Upload Form',
    bodyPadding: '50 10 0',

    defaults: {
        anchor: '100%',
        allowBlank: false,
        msgTarget: 'side',
        labelWidth: 50
    },

    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    },{
        xtype: 'filefield',
        id: 'form-file',
        emptyText: 'Select an image',
        fieldLabel: 'Photo',
        name: 'photo-path',
        buttonText: '',
        buttonConfig: {
            iconCls: "background:url(http://simonwai.com/images/save_icon.gif) no-repeat !important; border:none;"
            //icon: "http://simonwai.com/images/save_icon.gif",
        }
    }],

     buttons: [{
        //text: 'Save',
        icon: "http://simonwai.com/images/save_icon.gif",
        handler: function(){
            /*var form = this.up('form').getForm();
            if(form.isValid()){
                form.submit({
                    url: 'file-upload.php',
                    waitMsg: 'Uploading your photo...',
                    success: function(fp, o) {
                        msg('Success', tpl.apply(o.result));
                    }
                });
            }*/
        }
    },{
        text: 'Reset',
        handler: function() {
            //this.up('form').getForm().reset();
        }
    }]
    }

请帮忙。

Answer 1

如您在 fiddle 中所见，您的代码对于 ExtJS 4.2 是正确的。

您应该做的是使用 Sencha 提供的主题之一的样式或扩展其中之一。

Answer 2

虽然这个问题有点老...

我遇到了同样的问题。在运行 "sencha app build" 之后，文件控件已正确呈现。猜测构建过程需要添加一些在开发模式下不可用的样式，然后再构建一个在其 requires.

中具有文件控件的新应用程序构建

ExtJS 4.2 "filefield" 选择文件按钮 UI 呈现奇怪

ExtJS 4.2 "filefield" Choose File button UI rendering weirdly

extjs

extjs4

extjs4.2

sencha-cmd

filefield