ExtJS 3.4 Ext.ux.form.fileuploadfield buttonOnly 不能正常工作答案

【问题标题】：ExtJS 3.4 Ext.ux.form.fileuploadfield buttonOnly does not work correctlyExtJS 3.4 Ext.ux.form.fileuploadfield buttonOnly 不能正常工作
【发布时间】：2014-07-10 07:42:48
【问题描述】：

我正在努力让 Ext.ux.form.fileupoadfield 扩展在 ExtJS 3.4 中正常工作。从功能上讲，一切都按应有的方式运行。

我希望输入字段是一个没有任何文本的按钮，只是一个图标。我已将带有图标类的 iconCfg 添加到组件中，该组件添加了图标，但没有添加到浏览按钮。相反，它在浏览按钮旁边添加了另一个带有图标的按钮。当您将鼠标悬停在浏览按钮上时，图标按钮和浏览按钮都会突出显示。当您将鼠标悬停在图标按钮上时，浏览按钮不会突出显示。

当您单击图标按钮时，文件窗口不会出现，只有实际的浏览按钮有效。我已经将组件的“buttonOnly”属性设置为 true，它只隐藏了只读文本字段（同时仍然占用空间，弄乱了布局）。默认浏览按钮仍然与我的图标按钮一起显示，“未选择文件”对话框仍然可见。

顺便说一句，不会抛出任何警告或错误。

示例连同源文件： http://cpansearch.perl.org/src/VANSTYN/JavaScript-ExtJS-V3-3.4.1/share/ext-3.4.1/examples/form/file-upload.html

我基本上想完成第二个示例中的布局，但使用图标而不是文本按钮。

我的代码：

{
            xtype: 'fileuploadfield',
            id: 'filedata',
            buttonOnly: true,
            hideLabel: true,
            buttonCfg: {
                iconCls: 'icon-excel-import'
            }

}

实际的样子：

相同，但 buttonOnly 设置为 false：

组件的整个布局看起来一团糟。我只是使用了此示例中的源脚本，并且我用于组件的代码对我来说看起来是正确的。为什么这个组件在 Sencha 的示例中运行良好，但对我来说却有这么多问题？

【问题讨论】：

标签： javascript extjs file-upload

【解决方案1】：

原来我错过了 css 文件……我已经很怀疑了。

对于那些感兴趣的人，这里是 js 和 css 文件的完整源代码： http://trac.geoext.org/browser/ext/3.4.0/examples/ux/fileuploadfield?rev=2740

【讨论】：