PDA

View Full Version : Ext.ux.BrowseButton v1.1



JamesC
5 Mar 2008, 5:38 AM
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.



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

garraS
5 Mar 2008, 7:58 PM
Can you give an example? (screenshot or online demo)

Thanks

garraS

denkoo
6 Mar 2008, 12:16 AM
It's better with demo... thanks ))

denkoo

JamesC
6 Mar 2008, 12:29 AM
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.

Vlekkie
10 Mar 2008, 4:24 AM
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:


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

JamesC
10 Mar 2008, 6:24 AM
Ah I guess this is an issue with it not being inside a toolbar, I'll have a look into it!

loeppky
10 Mar 2008, 9:19 AM
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.

JamesC
10 Mar 2008, 3:00 PM
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!

loeppky
10 Mar 2008, 3:26 PM
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.

loeppky
10 Mar 2008, 3:29 PM
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?

JamesC
11 Mar 2008, 1:57 AM
Correct yes... however having tested your button it still overflows onto other buttons of the toolbar for me (IE7). I appreciate the above criticism however it seems to me this button still works better inside a toolbar - it does for me anyhow!

loeppky
11 Mar 2008, 3:07 AM
JamesC: thanks for the info. I haven't had IE7 at my disposal to test with. I will try to remedy this tomorrow :)

loeppky
11 Mar 2008, 9:04 AM
I have verified that things are a little misaligned with IE7. I'm going to work on remedying this this afternoon. The easiest way to see this is set "debug : true" within the ScreenshotsPanel sample.

loeppky
11 Mar 2008, 3:50 PM
The ScreenshotPanel sample application (http://extjs.com/forum/showthread.php?p=136247#post136247) is now working great in IE6/7, FF2, and Safari 3 in Windows with the latest changes made to Ext.ux.form.BrowseButton (http://extjs.com/forum/showthread.php?p=136247). MaximGB had the idea of using a floating div to effectively center the the input file "Browse" button under the cursor so it always gets clicked.

JamesC
14 Mar 2008, 7:11 AM
Have fixed all known issues with this such as button being chopped off in panels, blank tooltips and removed need for extra css file. I'd also add that this is *far* simpler than loeppky's implementation and as far as I can see works just as well.

Please let me know of any other issues, feedback etc.

6epcepk
5 Apr 2008, 12:28 AM
When form is rendering, i have this error:

c.setSize is not a function
cw=a.right?this.adjustWidthAnchor(a.right(w),c):undefined;ch=a.bottom?this.adjus...
my form el:

var src = new Ext.ux.BrowseButton({
text: "Browse",
tooltip: "Browse for new image",
handler: function(e, inp) {
// dwrhelper.uploadImage(dwr.util.getValue(inp.id));
alert('work');
}
});

JamesC
5 Apr 2008, 4:59 AM
When form is rendering, i have this error:

c.setSize is not a function
cw=a.right?this.adjustWidthAnchor(a.right(w),c):undefined;ch=a.bottom?this.adjus...
my form el:

var src = new Ext.ux.BrowseButton({
text: "Browse",
tooltip: "Browse for new image",
handler: function(e, inp) {
// dwrhelper.uploadImage(dwr.util.getValue(inp.id));
alert('work');
}
});

Are you sure you're using this extension, try downloading it again on the front page, since it has no occurrance of setSize in the whole script!

slidenv
2 Jun 2008, 10:14 AM
Does anyone have a working ZIP file of this extension? The one posted seems to be invalid.

Thanks,

Mark

JamesC
2 Jun 2008, 11:28 PM
it works just extract it and rename it the file to .zip and then extract again. Think the forums turn zips into gzips

anjelika
2 Jul 2008, 1:47 AM
Hi,
Thanks for the extension but couldn't make it work :(
Here's my sample code:

Ext.onReady(function(){
var update = new Ext.FormPanel({
renderTo : Ext.getBody(),
fileUpload : true,
enctype : 'multipart/form-data',
frame : true,
width : 500,
selectOnFocus : true,
msgTarget : 'side',
url : 'submit.php',
items : [
new Ext.ux.BrowseButton({
text: "Browser",
tooltip: "Browse for new image",
scope: this,
handler: function(e, inp) {
alert('it works');
}})
]
})
});

The form displays nice along with the button (which is not render correctly in IE 7.0, left margin of the button is missing), but Firebug shows something like:

Firebug's log limit has been reached. %S entries not shown. Preferences
tip is undefined
[Break on this error] tip.register.apply(tip, arguments);
Any toughts?
Thanks

JamesC
2 Jul 2008, 5:28 AM
The tip error is fixed by doing: Ext.QuickTips.init() which is required when using quick tips (this is a standard requirement in Ext applications). This also fixes the IE7 positioning issue!

anjelika
2 Jul 2008, 5:57 AM
Hey, got it to work, thanks.
However, another problem I have now.
I am willing to upload a file to the server as soon as this is selected from the browse window.
I've seen some tricks that add a hidden form and submit its data.
My code looks like this:

Ext.onReady(function(){
Ext.QuickTips.init();
var update = new Ext.FormPanel({
renderTo : Ext.getBody(),
fileUpload : true,
enctype : 'multipart/form-data',
frame : true,
width : 500,
selectOnFocus : true,
msgTarget : 'side',
url : 'submit.php',
items : [
new Ext.ux.BrowseButton({
text: "Browser",
tooltip: "Browse for new image",
scope: this,
handler: function(e, inp) {
alert('works');
var form = Ext.DomQuery.selectNode('form');
var uploadForm = new Ext.form.BasicForm(form, {
standardSubmit: true,
fileUpload: true,
url : 'submit.php' //this is never executed
});
uploadForm.submit();

}})
]
})
});
I wanted to execute 'submit.php' as soon as the user selects a file (and send the file content to the php script for processing).
But it seems that the submit.php is never executed, the page is loading something (like uploading a file) but it returnes that same buttontest.html.
Thanks

JamesC
2 Jul 2008, 6:18 AM
Not sure tbh, I'm not familiar with php form submission...

anjelika
2 Jul 2008, 6:23 AM
OK, this is not a php related question, it just happens that my server side is php.
I know how to handle a file upload in php, the question was how exactly do you use this extension in order to upload file(s) in the background (AJAX)?
Do you have an example on how to use the button?
Thanks

JamesC
2 Jul 2008, 11:28 AM
I use DWR and all i have to do is a dwr.util.getValue(inp.id) and it is passed as a java File object to the server, so you can use the "inp" object as a standard reference to the file object itself.

anjelika
3 Jul 2008, 10:53 AM
Hello,
Still no luck :(
By displaying the e and inp parameters I don't get much...e shows the input field which is used in upload and inp is undefined.


Ext.onReady(function(){
Ext.QuickTips.init();
var update = new Ext.FormPanel({
renderTo : Ext.getBody(),
fileUpload : true,
enctype : 'multipart/form-data',
frame : true,
width : 500,
selectOnFocus : true,
msgTarget : 'side',
url : 'submit.php',
items : [
new Ext.ux.BrowseButton({
text: "Browser",
tooltip: "Browse for new image",
scope: this,
handler: function(e, inp) {
console.log (e);
console.log (inp);
}})
]
})
});

console.log(e) shows:

<input id="ext-gen27" type="file" style="border: 0px none transparent; overflow: hidden; top: 0pt; height: 22px; font-size: 14px; cursor: pointer; -moz-user-focus: ignore;" name="ext-gen27" size="1"/>

JamesC
4 Jul 2008, 2:46 AM
your handler should be as follows (it does not take an e argument):



handler: function(inp) {
console.log(inp.id);
}

anjelika
4 Jul 2008, 2:51 AM
That only contains the auto-generated id of the input field element:

ext-gen27

JamesC
4 Jul 2008, 7:58 AM
Yes, what do you need? The "inp" is the reference to the input element, there is nothing more that can be obtained... - i was just showing that the inp object can be used to get the id etc of the file input.