ExtJS 4.2“;“文件字段”;选择“文件”按钮用户界面呈现怪异

ExtJS 4.2“;“文件字段”;选择“文件”按钮用户界面呈现怪异,extjs,extjs4,extjs4.2,sencha-cmd,filefield,Extjs,Extjs4,Extjs4.2,Sencha Cmd,Filefield,我想要一个简单的Extjs文档上传面板。我用过这个。我期待着这样的事情 但当我实现相同的示例时,我的面板显示如下(保存图像是因为我尝试了一些东西) 问题在于选择文件按钮。我知道sencha示例使用了某种CSS,但我试图通过CSS将图像作为背景,但这也没有帮助(如果我在按钮配置中设置了“icon”属性,即使按钮大小保持不变) 这是我的密码 { xtype: 'form', padding: '5 5 5 5', flex: 1, frame: false,

我想要一个简单的Extjs文档上传面板。我用过这个。我期待着这样的事情

但当我实现相同的示例时,我的面板显示如下(保存图像是因为我尝试了一些东西)

问题在于选择文件按钮。我知道sencha示例使用了某种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();
        }
    }]
    }
请帮忙

正如您在中看到的,您的代码对于ExtJS 4.2是正确的


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

尽管这个问题有点老了


我来这里也有同样的问题。运行“sencha app build”后,文件控件被正确呈现。我猜在新的应用程序构建之前,构建过程需要添加一些在开发模式下不可用的样式,而新的应用程序构建在其
requires

中具有文件控制,这对man没有帮助。我使用森查灰色主题。我不明白为什么要为这个按钮应用样式。请给我一个你的意思的例子。看看小提琴,你的代码+森查灰色主题风格与你的截图不符。可能您有一些覆盖/自定义,因此您的文件字段不使用主题样式。我没有自定义主题。在.Sencha/app/Sencha.cfg中,我的主题设置为Sencha灰色主题。所以我没有应用任何自定义主题。Federico,当你说我在使用自定义主题时,我记得我曾经尝试过实现自定义主题,但之后我恢复了所有更改。我只是在将应用程序设置回经典主题后再次构建它,一切都像一个魔咒。谢谢你,伙计。