1. #1
    Ext User
    Join Date
    Jan 2008
    Posts
    103
    Vote Rating
    0
    ry.extjs is on a distinguished road

      0  

    Default Ext.ux.form.ImageField

    Ext.ux.form.ImageField


    Well, I needed it, so I made it. Looks like some other people around here wanted something like this too.

    Demo: http://www.ann0yanc3.com/Ext.ux.form.ImageField/

    I didn't want to extended TriggerField because of some of the unnecessary code associated with an input text field. So, I extended BoxComponent and took snippets/inspiration of code from Field, TriggerField, TextField and Combo. I also got ideas/code from the Ext.ux.form.LovField extension by madrabaz as well.

    Tested in FF2/Safari on Mac/Win. IE6/7 on PC work with a minor display bug. Haven't looked into it yet. Also, this is like alpha code. Created this control in a matter of hours. Maybe about 6 hours. I dunno. There is still lots to be done to make it better.

    Please look at all of the styling on the demo page. The way it looks has a lot to do with the CSS (duh!). I have it customized to the way I'm currently using it.

    It has events 'change', 'expand', 'collapse', 'valid', 'invalid'. The only invalid value is '', which means an image wasn't selected. Check out the source for all of the options/settings. It is heavily commented.

    Feedback is appreciated.

    Enjoy!
    Attached Files

  2. #2
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    2
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    Looks good. I would recommend however breaking the image choosing functionality apart from the field functionality. Look at the difference between DatePicker and DateField in Ext -- I think having an ImagePicker that could be embedded in something else or reused outside of the field would be useful. Also, for the field itself, I can't see any reason not to extend from Ext.form.Field. There's no sense duplicating all the base validation and other field stuff that you just copied verbatim into your class. Overall the functionality looks very nice though, good job!

  3. #3
    Ext User
    Join Date
    Jan 2008
    Posts
    103
    Vote Rating
    0
    ry.extjs is on a distinguished road

      0  

    Default


    Quote Originally Posted by brian.moeskau View Post
    Looks good. I would recommend however breaking the image choosing functionality apart from the field functionality. Look at the difference between DatePicker and DateField in Ext -- I think having an ImagePicker that could be embedded in something else or reused outside of the field would be useful. Also, for the field itself, I can't see any reason not to extend from Ext.form.Field. There's no sense duplicating all the base validation and other field stuff that you just copied verbatim into your class. Overall the functionality looks very nice though, good job!
    How do I extend a class (i.e. Field) and strip out unneeded stuff like @cfg validationOnBlur or unused @events such as onFocus? or does it not matter to have it in there? The only reason I re-wrote a lot of the code is because a majority of it pertained to the <input type="text"> field that was auto-generated starting with the Field class. How should I go about extending TriggerField? Hmmm, perhaps just overriding certain functions instead of calling their parent (superclass) functions?

  4. #4
    Ext JS Premium Member
    Join Date
    Oct 2007
    Location
    Herndon, VA
    Posts
    265
    Vote Rating
    3
    durlabh is on a distinguished road

      0  

    Default


    In my opinion, if any component has a label, we should be rendering it the same way. So, here is what I did:

    Code:
    Ext.override(Ext.layout.FormLayout, {
        renderItem : function(c, position, target){
            if(c && !c.rendered && (c.isFormField || c.fieldLabel) && c.inputType != 'hidden'){
                var args = [
                       c.id, c.fieldLabel,
                       c.labelStyle||this.labelStyle||'',
                       this.elementStyle||'',
                       typeof c.labelSeparator == 'undefined' ? this.labelSeparator : c.labelSeparator,
                       (c.itemCls||this.container.itemCls||'') + (c.hideLabel ? ' x-hide-label' : ''),
                       c.clearCls || 'x-form-clear-left' 
                ];
                if(typeof position == 'number'){
                    position = target.dom.childNodes[position] || null;
                }
                if(position){
                    this.fieldTpl.insertBefore(position, args);
                }else{
                    this.fieldTpl.append(target, args);
                }
                c.render('x-form-el-'+c.id);
            }else {
                Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments);
            }
        }
    });
    After that, we can include almost any component as a form item. So, to include image, I create an image component that can be worked with or without form:

    Code:
    Ext.ns("Ext.ux.util");
    Ext.ux.util.MoveProperties = function(src, dest, properties) {
        for(var i=0, len = properties.length; i<len; i++) {
            var property = properties[i];
            if(typeof(src[property]) != 'undefined') {
                dest[property] = src[property];
                delete src[property];
            }
        }
        return;
    };
    
    
    Ext.ux.Image = function(config) {
        var c = config || {};
        Ext.applyIf(c, {
            autoEl: {tag: 'img'}
        });
    
        // Transfer src, width, height to autoEl
        Ext.ux.util.MoveProperties(c, c.autoEl, ["src", "width", "height"]);
    
        Ext.ux.Image.superclass.constructor.call(this, c);
    }
    
    Ext.extend(Ext.ux.Image, Ext.BoxComponent, {
    });
    
    Ext.reg('xImage', Ext.ux.Image);
    You can define the image component as:

    Code:
       {fieldLabel: 'logo', xtype: 'xImage', height: 48, width: 48, src: 'logo/img.gif'}
    Let me know what you think!
    Last edited by durlabh; 28 Jul 2008 at 4:43 PM. Reason: Added Ext.ns("Ext.ux.util");

  5. #5
    Ext User
    Join Date
    Sep 2007
    Posts
    12
    Vote Rating
    0
    ht8206 is on a distinguished road

      0  

    Default very beautiful

    very beautiful


    very beautiful

  6. #6
    Sencha User
    Join Date
    Mar 2007
    Posts
    580
    Vote Rating
    0
    dolittle is an unknown quantity at this point

      0  

    Default


    Looks great.

    What is the license of the images? Can I use them in my app?

    Are you going to release more versions of the extension?

    Thanks

  7. #7
    Ext User
    Join Date
    Jun 2008
    Posts
    46
    Vote Rating
    0
    chinull is on a distinguished road

      0  

    Post Other solution

    Other solution


    in form/field.js
    Code:
    // private
    onRender : function(ct, position){
    Ext.form.Field.superclass.onRender.call(this, ct, position);
    if(!this.el){
    var cfg = this.getAutoCreate();
    if(!cfg.name){
    cfg.name = this.name || this.id;
    }
    if(this.src){
    cfg.src = this.src;
    }
    if(this.inputType){
    cfg.type = this.inputType;
    }
    this.el = ct.createChild(cfg, position);
    }
    var type = this.el.dom.type;
    if(type){
    if(type == 'password'){
    type = 'text';
    }
    this.el.addClass('x-form-'+type);
    }
    if(this.readOnly){
    this.el.dom.readOnly = true;
    }
    if(this.tabIndex !== undefined){
    this.el.dom.setAttribute('tabIndex', this.tabIndex);
    }
    this.el.addClass([this.fieldClass, this.cls]);
    this.initValue();
    },
    use like this
    Code:
    {xtype:"textfield",fieldLabel:"imgs",name:"Photo",inputType:'image',src:"..."},
    Last edited by mystix; 7 Aug 2008 at 6:27 PM. Reason: post code in [code][/code] tags. refer to http://extjs.com/forum/misc.php?do=bbcode

  8. #8
    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 My Thoughts

    My Thoughts


    This is very similar to screenshotfield. I will like (if permitted by author) to merge the two extensions into one that has a 'mode' config parameter that can be 'local' or 'remote' lite combobox. When in 'local' mode (which will be the default) it will use Ext.ux.ScreenshotField functionality to browse locally for files and upload to a server, but when in 'remote' mode it will use the functionality of this extension (Ext.ux.form.ImageField) to show a dataview of images from which the user can make a selection. How about that .

  9. #9
    Sencha User
    Join Date
    May 2008
    Posts
    180
    Vote Rating
    0
    archmisha is on a distinguished road

      0  

    Default


    I am using ImageField and it is great.

    One thing that i need to add is:
    How can i select an image via the code?

  10. #10
    Sencha User
    Join Date
    May 2008
    Posts
    180
    Vote Rating
    0
    archmisha is on a distinguished road

      0  

    Default


    ImageField is a great component

    But i have a question:
    If i set defaultImage, then when i open the image seelction window, my default image is not selected..

    Where is when i select an image, then close selection window and reopen it again, it then remembers my last selection.

    How can i make it select my default image too, the first time i open selection window?

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi