ExtJS 4.2“文件字段”选择文件按钮UI呈现奇怪答案

【问题标题】：ExtJS 4.2 "filefield" Choose File button UI rendering weirdlyExtJS 4.2“文件字段”选择文件按钮UI呈现奇怪
【发布时间】：2015-08-13 07:55:19
【问题描述】：

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

但是当我实现与它相同的示例时，我的面板显示如下（保存图像是由于我正在尝试的东西）。

问题在于选择文件按钮。我知道 sencha 示例正在使用某种 CSS，但我试图通过 css 将 Image 作为背景，但这也无济于事（如果我在 Button 配置中设置“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();
        }
    }]
    }

请帮忙。

【问题讨论】：

标签： extjs extjs4 extjs4.2 sencha-cmd filefield

【解决方案1】：

正如您在 fiddle 中看到的那样，您的代码对于 ExtJS 4.2 是正确的。

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

【讨论】：

这对人没有帮助。我正在使用 Sencha Gray 主题。我不明白为什么要为这个按钮应用样式。请举例说明您的意思。
看小提琴，你的代码+煎茶灰色主题风格与你的截图不对应。可能您有一些覆盖/自定义，因此您的文件字段不使用主题样式。
我没有自定义主题。在 .Sencha/app/sencha.cfg 我的主题设置为 Sencha Gray 主题。所以我没有明智地应用任何类型的自定义主题。
Federico，当你说我在使用自定义主题时，我记得我曾经尝试实现自定义主题，但之后我又恢复了所有更改。我只是在将其设置回经典主题后再次构建应用程序，一切都像魅力一样。谢谢大佬。

【解决方案2】：

虽然这个问题有点老了……

我来到这里遇到了同样的问题。运行“sencha app build”后，文件控件已正确呈现。猜猜构建过程需要添加一些在开发模式中不可用的样式，然后才能在其requires 中具有文件控制的新应用构建之前。

【讨论】：