PDA

View Full Version : Select with images



dgcoffman
6 Jun 2011, 2:13 PM
I'm building a form that allows a user to select an image from a selectfield, by setting the text property of the options to an html image tag, I can render the images in the select list, but the text of the selected option is rendered in an input. Is there some way I can tell this component to render the selected option's text as html?


{
xtype: 'selectfield',
name: 'image',
label: 'Design',
defaultType: 'panel',
inputType: 'text',
minHeight: 250,
options: [{
text: '<img src="/MGiftMobile/images/WW_vgc_thumb1.png" width="160px" />',
value: '1'
}, {
text: '<img src="/MGiftMobile/images/WW_vgc_thumb2.png" width="160px" />',
value: '2'
}, {
text: '<img src="/MGiftMobile/images/WW_vgc_thumb3.png" width="160px" />',
value: '3'
}, {
text: '<img src="/MGiftMobile/images/WW_vgc_thumb4.png" width="160px" />',
value: '4'
}]
}

Here's what it looks like now:
http://i.imgur.com/dL7AD.png

dgcoffman
6 Jun 2011, 3:15 PM
Adding listeners to the render and change events that modify the DOM by hiding the input and add an image seem to work just fine. See code below.


{
xtype: 'selectfield',
name: 'image',
label: 'Design',
defaultType: 'panel',
inputType: 'text',
id: 'imageSelector',
minHeight: '410px',
listeners: {
change: function (field, newVal, oldVal) {
var field = this.el;
var fieldContainer = field.first('.x-form-field-container');
//want to append this content to the next x-form-field-container
if (fieldContainer.first('input') != null) {
fieldContainer.first('input').hide();
}
if (fieldContainer.first('img') != null) {
fieldContainer.first('img').remove();
}
fieldContainer.createChild({
tag: 'img',
src: '/MGiftMobile/images/WW_vgc_thumb' + newVal + '.png',
cls: 'cardDesign',
width: 160
});
return this;
},
render: function (container, position) {
var field = this.el;
var fieldContainer = field.first('.x-form-field-container');
//want to append this content to the next x-form-field-container
if (fieldContainer.first('input') != null) {
fieldContainer.first('input').hide();
}
if (fieldContainer.first('img') != null) {
fieldContainer.first('img').remove();
}
fieldContainer.createChild({
tag: 'img',
src: '/MGiftMobile/images/WW_vgc_thumb1.png',
cls: 'cardDesign',
width: 160
});
return this;
}
},
options: [{
text: '<img src="/MGiftMobile/images/WW_vgc_thumb1.png" width="120px" />',
value: '1'
}, {
text: '<img src="/MGiftMobile/images/WW_vgc_thumb2.png" width="120px" />',
value: '2'
}, {
text: '<img src="/MGiftMobile/images/WW_vgc_thumb3.png" width="120px" />',
value: '3'
}, {
text: '<img src="/MGiftMobile/images/WW_vgc_thumb4.png" width="120px" />',
value: '4'
}]
},

Note: Sloppy first pass just to get it functional. Ugly code.

caballero
13 Mar 2012, 10:49 PM
I'd like to do something similar in sencha touch 2.

Have you refined your code and do you have any additional suggestions?

Jeff