PDA

View Full Version : Ext.ux.ScreenshotField



chalu
2 Jun 2008, 4:59 PM
Ext.ux.form.ScreenshotField 2.0

Ext.ux.form.ScreenshotField (in this release) is a component that now merges functionality from Ext.BrowseButton and Ext.ux.ImageField into a single form field for :


Uploading screenshots (picture files) in situations where you need a visual preview of the file you just uploaded; e.g passport upload in bio-data forms.
Browsing for and selecting a screenshot from a remote location


Version : 2.0
Release Date : 10/02/2009
License : GPLv3

Vist The Project Home For This Release and Updates (http://code.google.com/p/ext-ux-screenshotfield/)

wasp
3 Jun 2008, 3:52 AM
The archive states .zip but it's header is Rar!

chalu
3 Jun 2008, 8:54 PM
Sorry, but did that affect it's validity ?, some how I can't remove the file from the google code repository unless I upload another one - please let me know if the archive is broken.

chalu
5 Jun 2008, 4:31 AM
Just realized that what I am trying to do is architechturally similar to Ext.form.HtmlEditor, where the field is composed of an iframe element rather than a native form input field. In may case, I have a full-fledged component - a subclass of Ext.Panel (Ext.ux.ScreenshotUploaadPanel), and I wand it to 'act' as the 'input component'.

Before now, I just added the 'input component' to that form, this worked only a bit as it ignores labelAlign and if used in a card layout implementation it gets hidden (assumed to be one of the cards I suppose).

Just like in Ext.form.HtmlEditor, I need to attach the 'input component' to the Ext.Element used to wrap the original el rather than just appending it to the containing containing form. The problem is that the 'input component' in this case is a Panel. Here is what I came up with :



onRender: function(ct, position){
Ext.ux.ScreenshotField.superclass.onRender.call(this, ct, position);

this.el.dom.style.border = '0 none';
this.el.dom.setAttribute('tabIndex', -1);
this.el.addClass('x-hidden');
if(Ext.isIE){
this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')
}
this.wrap = this.el.wrap({
cls:'x-screenshotfield-wrap'
});

this.formPanel = this.getFormPanel();
this.formPanel.add(this.field);
this.formPanel.doLayout();

var fieldEl = this.field.getEl();
fieldEl.addClass('x-screenshotfield');
if(this.tabIndex !== undefined){
fieldEl.dom.setAttribute('tabIndex', this.tabIndex);
}

fieldEl.removeClass('x-hide-display');
this.formPanel.remove(this.field);
this.wrap.appendChild(fieldEl);
this.field.setUploadURL(this.formPanel.initialConfig.url);
this.formPanel.doLayout();

this.initValue();
}

chalu
7 Jun 2008, 7:16 AM
Glad to announce the arrival of a new release =D>=D>=D>
Take a look at psot #1

JorisA
8 Jun 2008, 7:00 AM
Dammit I just wrote about the same thing :P waste of my time!

Thomas_K
9 Jan 2009, 9:46 AM
i have problems with the screenshotfield when i use it in a collapsible formpanel.. anyone else? or its just a scriptbug? In a window it works perfect.

zhw511006
9 Jan 2009, 5:22 PM
IE7, sometimes browsebutton is not useful, Doesn't support ie7?or just a scriptbug?

thank you for help!

Thomas_K
12 Jan 2009, 11:18 PM
I found a Solution.
In the "deferredRender:false" mode the clipEl dident get a height or width, so here is the fix.

Ext.ux.SreenshotField.js / Line 196


if(this.debug) {
this.clipEl.applyStyles({
'background-color': 'green'
});
this.floatEl.applyStyles({
'background-color': 'red'
});
}else{
this.clipEl.setOpacity(0.0);
this.clipEl.setWidth(this.width + 30);
this.clipEl.setHeight(this.height + 30);
}

chalu
5 Feb 2009, 7:52 AM
Hey guys, working on a new version that will look like Ext.ux.ImageField (http://extjs.com/forum/showthread.php?t=35758), and also incorporate it's functionality, so that the browse action can be local (using BrowseButton) or remote (using a DataView as in Ext.ux.ImageField).

What do you think :-/:-/

chalu
10 Feb 2009, 7:56 AM
See post #1, and project home (http://code.google.com/p/ext-ux-screenshotfield/)

chalu
11 Feb 2009, 2:22 AM
Got new updates for this new release, see post #1

zhw511006
15 Feb 2009, 9:00 PM
2.0 I can'nt find it !

only 1.1 and 1.0!

Thank You!

chalu
17 Feb 2009, 1:12 PM
2.0 I can'nt find it !

only 1.1 and 1.0!

Thank You!

Latest code is in trunk in google code. I have not tagged 2.0 if that is what you are asking for.

cgs1999
20 Feb 2009, 1:07 AM
nice work!

aityahia
2 Mar 2009, 2:53 AM
hi
where we find a doc for this fabulous compment, i want to put it in a form can i assign it a url for a post because i cant define the url in the from (it containe other fields).

mask_hot
9 Mar 2009, 6:31 AM
Hi, I'd like to use your ux in a form.
I load a record in my form and so I have pic filename, in my record.
How could I display this picture when loading the record?

aityahia
11 Mar 2009, 1:19 AM
hello.
where can i find a doc for this compment.
i have define allowBlank to true and my form is not submited if this field is leaved empty.

chalu
12 Mar 2009, 4:50 AM
Sorry, I've been ill for some time now. Please check http://extjs-ux.org/docs/ for the docs
and also grab the update from the project's home

extjs_new
13 Jun 2010, 12:50 AM
hi, how can I detect, the file size before upload?
Thanks

wemerson.januario
13 Jun 2010, 1:53 PM
Thanks for sharing!