How to use css in extjs to modify the "browse files" button?

Question

I have created a menu with extjs where you click on it and can see menu items dropping down. The first item is open. This button is supposed to open a file from file-dialog. But the only way I can open the file dialog I found is to place the file dialog field in the menu by only showing the button.

Now I need help to make this button look like just regular menu item:

    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]
    });

score 0 · Accepted Answer · answered May 20 '13 at 22:15

You can add the attribute buttonConfig to the Ext.form.field.File item and then use the standard attributes to a button. For example, this might work:

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());
          }
    }
});

Try changing putting a cls instead of a style attribute in the buttonConfig to use a CSS class instead of inline CSS.

How to use css in extjs to modify the "browse files" button?

1 Answers1