css - extjs中如何使用css修改 "browse files"按钮？

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。