css - 如何在extjs中使用css修改“浏览文件”按钮？

Question

我创建了一个带有 extjs 的菜单，您单击它可以看到下拉菜单项。第一项是打开的。这个按钮应该从文件对话框打开一个文件。但是我可以打开我找到的文件对话框的唯一方法是file dialog field通过仅显示按钮将其放置在菜单中。

现在我需要帮助让这个按钮看起来像普通的菜单项：

    var item = Ext.create('Ext.form.field.File', {
        buttonOnly: true,
        buttonText: 'Open',
        hideLabel: true,
        // maybe to add some css class here
        listeners: {
             'change': function(fb, v){
            Ext.Msg.alert('Status', item.getValue());
              }
        }
    }); 

    var mainmenu = Ext.create('Ext.menu.Menu', {
        width: 200,
        margin: '0 0 10 0',
        items: [item]
    });

Answer 1

您可以将属性 buttonConfig 添加到 Ext.form.field.File 项，然后使用标准属性到按钮。例如，这可能有效：

var item = Ext.create('Ext.form.field.File', {
    buttonOnly: true,
    buttonText: 'Open',
    hideLabel: true,
    buttonConfig: {
        style: {
          background: "#f1f1f1",
          border: 0
        }
    },
    listeners: {
         'change': function(fb, v){
        Ext.Msg.alert('Status', item.getValue());
          }
    }
}); 

尝试更改在 buttonConfig 中放置cls而不是style属性以使用 CSS 类而不是内联 CSS。