1. #1
    Sencha User chalu's Avatar
    Join Date
    Feb 2008
    Location
    Benin City, Nigeria
    Posts
    480
    Vote Rating
    1
    chalu is on a distinguished road

      0  

    Thumbs up Ext.ux.form.ScreenshotField 2.0

    Ext.ux.form.ScreenshotField 2.0


    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
    Attached Images
    Last edited by chalu; 13 Feb 2009 at 2:15 AM. Reason: Update extension name

  2. #2
    Sencha User wasp's Avatar
    Join Date
    Nov 2007
    Posts
    29
    Vote Rating
    0
    wasp is on a distinguished road

      0  

    Default


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

  3. #3
    Sencha User chalu's Avatar
    Join Date
    Feb 2008
    Location
    Benin City, Nigeria
    Posts
    480
    Vote Rating
    1
    chalu is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha User chalu's Avatar
    Join Date
    Feb 2008
    Location
    Benin City, Nigeria
    Posts
    480
    Vote Rating
    1
    chalu is on a distinguished road

      0  

    Question Just Like Ext.form.HtmlEditor !!

    Just Like Ext.form.HtmlEditor !!


    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 :

    Code:
    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();
        }

  5. #5
    Sencha User chalu's Avatar
    Join Date
    Feb 2008
    Location
    Benin City, Nigeria
    Posts
    480
    Vote Rating
    1
    chalu is on a distinguished road

      0  

    Thumbs up Version 1.1 is Out !!

    Version 1.1 is Out !!


    Glad to announce the arrival of a new release
    Take a look at psot #1
    Last edited by chalu; 8 Jun 2008 at 10:47 AM. Reason: moved to post #1

  6. #6
    Sencha User
    Join Date
    Mar 2007
    Posts
    464
    Vote Rating
    1
    JorisA is on a distinguished road

      0  

    Default


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

  7. #7
    Ext JS Premium Member
    Join Date
    Jun 2007
    Posts
    44
    Vote Rating
    0
    Thomas_K is on a distinguished road

      0  

    Default


    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.

  8. #8
    Ext User zhw511006's Avatar
    Join Date
    Oct 2008
    Posts
    39
    Vote Rating
    0
    zhw511006 is on a distinguished road

      0  

    Default


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

    thank you for help!

  9. #9
    Ext JS Premium Member
    Join Date
    Jun 2007
    Posts
    44
    Vote Rating
    0
    Thomas_K is on a distinguished road

      0  

    Default


    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
    Code:
    		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);
    		}

  10. #10
    Sencha User chalu's Avatar
    Join Date
    Feb 2008
    Location
    Benin City, Nigeria
    Posts
    480
    Vote Rating
    1
    chalu is on a distinguished road

      0  

    Question


    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