PDA

View Full Version : Ext.ux.form.ImageField



ry.extjs
16 May 2008, 11:25 AM
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
16 May 2008, 12:41 PM
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
16 May 2008, 12:54 PM
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
28 Jul 2008, 4:42 PM
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
30 Jul 2008, 7:04 PM
very beautiful:)

dolittle
31 Jul 2008, 2:55 AM
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
7 Aug 2008, 6:18 PM
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
2 Sep 2008, 2:55 AM
This is very similar to screenshotfield (http://extjs.com/forum/showthread.php?p=179007). 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
25 Oct 2008, 2:11 PM
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
25 Oct 2008, 2:12 PM
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?

archmisha
25 Oct 2008, 8:25 PM
bump

Animal
26 Oct 2008, 1:16 AM
The code is free, you have the source code, you have Ext.

Just bumping a thread to get someone to work on some free code for you doesn't show much initiative.

Use Ext.DomQuery to find the element in the DataView whiuch has an src attribute matching the src of your default image.

Call the DataView's select method on it. Then call scrollIntoView on it using the Window body as the element to scroll.

That is how to do it.

archmisha
26 Oct 2008, 4:57 AM
I was not asking for some one to implement it.
I was merely asking if this options is already available in the component.

Thanks for pointing out how to do it.

archmisha
26 Oct 2008, 11:43 AM
I am failing to make the image be selected.

I am doing:



<extending ImageField>
afterRender: function()
{
MyExtendClass.superclass.afterRender.call(this);


var el = Ext.DomQuery.selectNode('img[src=' + this.defaultImage + ']');
console.info('el=' + el);
console.info('view=' + this.view);
this.view.select(el);
// el.scrollIntoView(some window);
}

The elements are not undefined, but still nothing is selected.

Any idea what i am doing wrong?

Animal
26 Oct 2008, 12:47 PM
The way to figure this out is just by using it on the Firebug command line. You can just interactively experiment with Ext functions to your heart's content.

Bring up the console and just type



v = Ext.getCmp("the-dataview-id")


So you have the DataView object.

Then



e = v.getEl();


So you have the DataView's element.

Then just experiment with



img = e.select('img[src="http://myImageUrl/"]')


And check that it grabs that IMG.


Then you can type



v.select(img);


Check it selects it.

Then you can try



img.scrollIntoView(theWindow.body)


To practive scrolling it into view.

Firebug is your best friend and teacher.

It's how I try everything out before asking here.

archmisha
29 Oct 2008, 1:20 PM
The select does not actually select the image, no matter which variation i tried.