Ext.ux.form.ImageField

[ry.extjs]

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!

[brian.moeskau]

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!

[ry.extjs]

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?

[durlabh]

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

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:

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:

   {fieldLabel: 'logo', xtype: 'xImage', height: 48, width: 48, src: 'logo/img.gif'}

Let me know what you think!

[ht8206]

very beautiful

[dolittle]

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

[chinull]

in form/field.js

// 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

{xtype:"textfield",fieldLabel:"imgs",name:"Photo",inputType:'image',src:"..."},

[chalu]

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 .

[archmisha]

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?

[archmisha]

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?