This entry was posted on Monday, September 1st, 2008 at 12:38 pm and is filed under entrepreneurship. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Sep 1, 2008
EXTJS themed file input field
Author: gaweee | Filed under: entrepreneurshipTheming a file input field has always been notoriously hard. Thanks to the guys who wrote the Ext UploadDialog script, theres now a better and more aesthetically pleasing way to create a file upload. I tried using their script wholesale but ran into some problems with the layout. So i kinda hacked and extracted their Ext.ux.BrowseButton code.
So now you can use it simply with:
new Ext.ux.BrowseButton({
input_name: "uploadfile1",
text: "Select a file"
onInputFileChange: function() {
alert("you chose " + this.getInputFile().dom.value);
}
})
new Ext.ux.TBBrowseButton({
input_name: "uploadfile2",
text: "Select another file"
})The first chunk of code creates a Browse Button (File Input) control as with the name uploadfile1. and the second chunk of codes creates a ToolBar Browse Button with the name uploadfile2.
Hypothetically you should be able to add a ToolBar button but i havent quite gotten a ToolBar Browse Button to fit aesthetically well inside a form. Let me know if you all come up with any examples that do!
Meanwhile, 3 cheers for the guys who wrote the Ext UploadDialog script!!!
Download the jQuery progressbar here: EXT Browse Button
or view the demo here
2 Responses to “EXTJS themed file input field”
Leave a Reply
Most Popular
- HOWTO: PHP and jQuery upload progress bar (56)
- JQuery Progress Bar 1.1 (53)
- Howto: Repackageable custom extension development in Magento - Part 2 - Admin Controller (25)
- JQuery Progress Bar 2.0 (21)
- Howto: Repackageable custom extension development in Magento - Part 8 - CRUD - Update (18)
- HOWTO: struts 2 i18n (16)
- Howto: Repackageable custom extension development in Magento (12)
- JQuery Progress Bar 1.2 (11)
- Howto: Repackageable custom extension development in Magento - Part 9 - Frontend - List (10)
- Howto: Repackageable custom extension development in Magento - Part 3 - Database (9)
Recent Comments
- Karen: Great work around-thank you!!
- Sheldon: awesome possum!
- cmstop里所使用的有用的jquery插件 » Terry's Blog: [...] http://t.wits.sg/jquery-progress-bar/ 这篇日志的 t.cn [...]
- Lakshyami: Hi, Thank you very much for
- New site feature: User Poll « TechnoStripe: [...] progress bar used to
- seo agentur: @Krish Why do you need to
- 2kai: Hi Aromal, you need to flush
- Rob Rasner Magic Castle: I love what you guys
- รับทำเว็บไซต์: Thx for this. Nice and
- Lexus: ESxtYC I'm not easily impressed.
Latest Entries
- SD in the Community: Product Management Panel Recap
- Mac OS X and Ricoh Aficio C2051 - Making Printing "Just Work"
- How to impress your recruiter
- Thoughts on Attracting the attention of the Best Hires
- The Greg Syndrome
- The Parental Manager
- Attack of the Facebook Harvesters
- jQuery Progress Bar Configuration
- Extracting email addresses from inbox
- 10 Good (Free and Legal) Source for Photos and Images
July 21st, 2009 at 11:37 am
Ja, vollkommen
November 19th, 2008 at 4:05 pm
Glad I came across this post. It helped me a lot. Thanks for sharing.