Ext.ux.ScreenshotField

[chalu]

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 :

1. 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.
2. 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

[wasp]

The archive states .zip but it's header is Rar!

[chalu]

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]

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]

Glad to announce the arrival of a new release
Take a look at psot #1

[JorisA]

Dammit I just wrote about the same thing :P waste of my time!

[Thomas_K]

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]

IE7, sometimes browsebutton is not useful, Doesn't support ie7?or just a scriptbug?

thank you for help!

[Thomas_K]

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]

Hey guys, working on a new version that will look like Ext.ux.ImageField, 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