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


Tags: css,openfiledialog,extjs4.2

Problem :

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


Solution :

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.


    CSS Howto..

    How to programmatically ungroup CSS selectors?

    Border-bottom not showing correctly

    How to resize in
    with float:left?

    How to make a “” looks like a link with CSS?

    How to block CSS and js file loading in Google Blogger template?

    how to get these two div's side by side in this container

    How can I change a table td width using CSS in Spiceworks?

    How to add drop down menu using CSS?

    How do I select certain siblings via CSS?

    How to expand toggle sidebar more

    why is .show() making the target div appear at top of page?

    How to use CSS in html table inside javascript

    How to make bootstrap row “col-md-4” fullscreen size

    How to stop one layer going over another

    How to make a image stay at the bottom but not rise up

    How to manage magento CSS file with over 10,000 lines?

    How to get an image from a css animation keyframe to remain on the page after complete [duplicate]

    HTML CSS How to stop a table cell from expanding

    How do you fade horizontal text into a vertical gradient?

    Weird behavior when I'm alternating between showing and hiding Flot graphs

    how to center UL in my page?

    How to align text vertically

    How do I scale the size of the elements in my HTML according to screen size?

    How do I add an underline to unvisited links only?

    Different JEditorPanes show html content, using the same css rules

    How to Surround Links with Bounding Box Using CSS

    How do I disable Emmet's CSS Abbreviations in Sublime Text 2

    How to put background after anchor tag throw css?

    How to fix parent hover issues with CSS?

    When and how to use !important CSS property in a bookmarklet with cross domains?