View Full Version : Extending Form Field - 2 on one page doesn't work?

8 Jul 2010, 7:40 AM

I'm looking to extend Ext.form.Field to create an image selector field. So far what I have works very well, that is, if there is only one of them in a particular form. The problem comes when there are 2 or more as each subsequent image selector field takes on the ID of the first image selector.

See the attached image for an idea of what the field does.

This is what I have so far for the extension:


var ImageSelectorField = Ext.extend(Ext.form.Field, {

// soft config (can be changed from outside)
border: true,
value: 0,
height: 64,
preview: true,
multiSelect: false,
buttonText: 'Select Image...',
IMTitle: '',
autoCreate: {tag: 'img'},

initComponent: function() {

onRender: function(ct, position) {
ImageSelectorField.superclass.onRender.call(this, ct, position);

this.wrap = this.el.wrap({cls:'x-form-field-wrap x-form-isel-wrap'});

var FormFieldID = this.id;
var MultiSelect = this.multiSelect;
var IMTitle = this.IMTitle;

var btnCfg = Ext.applyIf(this.buttonCfg || {}, {
text: this.buttonText,
disabled: this.disabled,
iconCls: 'iconOpen',
listeners: {
'click': function() {
var FormFieldObj = Ext.getCmp(FormFieldID);
WinImageManager_Open(FormFieldObj.getRawValue(), FormFieldID, MultiSelect, IMTitle);

this.button = new Ext.Button(Ext.apply(btnCfg, {
renderTo: this.wrap,
//cls: 'x-form-isel-btn' + (btnCfg.iconCls ? ' x-btn-icon' : '')
cls: 'x-form-isel-btn'

setValue: function(NewValue) {
ImageSelectorField.superclass.setValue.call(this, NewValue);

// So we can access this in the ajax
var ElDom = this.el.dom;

// To preview or not to preview?
if(this.preview==true) {

// No image selected
if(typeof(NewValue)=="undefined" || NewValue==null || NewValue==0) {
ElDom.src = '/../images/no-image.jpg';

// Get preview of selected image
else {
url: 'php/get-image.php',
success: function(response, options) {
obj = Ext.util.JSON.decode(response.responseText);
if(obj.success == true) {

// Set the preview image
ElDom.src = '/../images/uploads/'+obj.filename;

} else {
if(obj.session.timeout == true) { Handle_Session_Timeout(); }
failure: function() {
params: {
thumb: true,
id: NewValue,
sk: Application.SessionKey

}//eo if preview

initValue: function(){

}); // eo extend

// register xtype
Ext.reg('imageselector', ImageSelectorField);

// eof

The image selector fields are instantiated as such:

items: [{
xtype: 'imageselector',
fieldLabel: 'Main Image',
labelStyle: 'font-weight: bold;',
name: 'MainImageID',
id: 'iselMainImageID',
height: 64,
IMTitle: 'Product Main Image',
value: 0, //default value
allowBlank: false
}, {
xtype: 'imageselector',
fieldLabel: 'Additional Images',
labelStyle: 'font-weight: bold;',
name: 'AdditionalImageIDs',
id: 'iselAdditionalImageIDs',
height: 64,
multiSelect: true,
IMTitle: 'Product Additional Images',
buttonText: 'Select Images...',
value: 0, //default value
allowBlank: false

Can anybody help me to identify the issue. I'm not 100% sure what all of the code in the extension does as I'm working from a previous example. Both the first and second fields produce this (with the same id and name):

<img src="/../images/IMAGE_NAME.jpg" style="height: 64px;" class=" x-form-field" id="iselImageID" name="ImageID">

Any help would be appreciated, thanks.

13 Jul 2010, 4:28 AM
a quick glance over that code reveals that you should not be experiencing that issue.

How do you know that they are instantiated w/ the same id?

14 Jul 2010, 2:48 AM
In Firefox I highlighted both fields & clicked 'View Selection Source' in the context menu. The markup shows both fields with the same ID, specifically the image tag.