1. #1
    Sencha User
    Join Date
    Nov 2007
    Posts
    243
    Vote Rating
    0
    JamesC is on a distinguished road

      0  

    Default Ext.ux.BrowseButton v1.2

    Ext.ux.BrowseButton v1.2


    This is a simple styled browse button (that brings up a file browse dialog) mainly plagiarised from jsakalos' uploadform, however I have tweaked quite a lot of it to get it working as required. I haven't actually tested this outside a toolbar but it works fine for me in IE6/7 and FF2 anywhere inside a toolbar. It supports the normal buttons mouseover, can be any length and doesn't interfere with buttons next to it, as is the case with some of the implementations used in the uploaddialog/forms.

    The standard button handler is called as soon as the user has browsed and selected the file for upload. I'm using it with the new DWR version 3 image upload capabilities so I use it as follows.

    Code:
    new Ext.ux.BrowseButton({
                        text: "Browse",
                        tooltip: "Browse for new image",
                        scope: this,
                        handler: function(inp) {
                          dwrhelper.uploadImage(dwr.util.getValue(inp.id));
                        });
    Hopefully you will find it useful!

    Any feedback would be much appreciated!

    Edit:
    14/3/2008 - v1.1 Button now works fine in panels & toolbars, and since loeppky thinks external css is a bad idea I've inlined all the css so no extra css file required.
    26/5/2008 - v1.2 Added scope to button handler
    Attached Files

  2. #2
    Sencha User garraS's Avatar
    Join Date
    Oct 2007
    Location
    Argentina
    Posts
    203
    Vote Rating
    0
    garraS is on a distinguished road

      0  

    Default


    Can you give an example? (screenshot or online demo)

    Thanks

    garraS

  3. #3
    Ext User denkoo's Avatar
    Join Date
    Jan 2008
    Location
    Paris
    Posts
    124
    Vote Rating
    0
    denkoo is on a distinguished road

      0  

    Default Sure... demo will be appreciate... thanks

    Sure... demo will be appreciate... thanks


    It's better with demo... thanks ))

    denkoo

  4. #4
    Sencha User
    Join Date
    Nov 2007
    Posts
    243
    Vote Rating
    0
    JamesC is on a distinguished road

      0  

    Default


    Don't have anywhere to host a demo, sorry, but really its just a normal Ext.Button but it just opens a file browse dialog, and after the file is selected runs the standard buttons handler.

  5. #5
    Ext User
    Join Date
    Dec 2007
    Posts
    1
    Vote Rating
    0
    Vlekkie is on a distinguished road

      0  

    Default


    Hi, first of all thx alot for the example! I am trying to use it now inside a panel, but the left part of the button is invisible. It has to do with the:

    Code:
    var tiWidth = this.bbCt.child("td.x-btn-left").getWidth() + this.bbCt.child("button.x-btn-text").getWidth() + this.bbCt.child("td.x-btn-right").getWidth();
    Thats the first problem I noticed. The second problem is, that the left part of the button does not trigger any event. It even seems like your clicking the textbox from the original file input field, since I get a blinking cursor shown inside the button.

    I use IE 7.

    Any thoughs on what could cause this problem?

    Kind Regards,

    Vlekkie

  6. #6
    Sencha User
    Join Date
    Nov 2007
    Posts
    243
    Vote Rating
    0
    JamesC is on a distinguished road

      0  

    Default


    Ah I guess this is an issue with it not being inside a toolbar, I'll have a look into it!

  7. #7
    Sencha User loeppky's Avatar
    Join Date
    May 2007
    Location
    Seattle, WA
    Posts
    230
    Vote Rating
    0
    loeppky is on a distinguished road

      0  

    Default


    I have a "BrowseButton" implementation that was adapted from MaximGB's Ext.ux.UploadDialog extension that I will attempt to post later today with a demo. It doesn't require any additional CSS and is well commented.

  8. #8
    Sencha User
    Join Date
    Nov 2007
    Posts
    243
    Vote Rating
    0
    JamesC is on a distinguished road

      0  

    Default


    Cool the issue I had from the one in MaximGB's upload dialog was that it seemed to overflow onto buttons next to it in a toolbar, but that is the generic problem with these hack methods to get a styled browse button!

  9. #9
    Sencha User loeppky's Avatar
    Join Date
    May 2007
    Location
    Seattle, WA
    Posts
    230
    Vote Rating
    0
    loeppky is on a distinguished road

      0  

    Default Ext.ux.form.BrowseButton

    Ext.ux.form.BrowseButton


    I have created a post for my Ext.ux.form.BrowseButton class with a sample here: http://extjs.com/forum/showthread.php?t=29032. I haven't gotten to play with JameC's implementation much, but I believe Ext.ux.form.BrowseButton has the following improvements.
    • Compatibility in more Ext button scenarios.
    • No additional CSS required.
    • Better commented.
    • Full working sample provided.

  10. #10
    Sencha User loeppky's Avatar
    Join Date
    May 2007
    Location
    Seattle, WA
    Posts
    230
    Vote Rating
    0
    loeppky is on a distinguished road

      0  

    Default


    JamesC: I ran into the same overflow issue with MaximGB's implementation too. To fix it, I wrap the file input element in a div that has overflow disabled. I assume you did the same?

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar