Combobox Problem Help??

[cranberries_]

Hi,
I am new at Ext JS. At my work , the user should be able to select image names from combobox and the image should be displayed near the combobox.
I wrote like below, but when user selects any item from combo , it does not update the image.
One more question , I want the combobox is selected .I mean I want it to be show the first data when window is showed. How can I handle this ?
I could not learn yet the syntax of Ext JS.
I need your help . Thank for the replies in advance..

var UserThemeSettings = function () {


    var themeStore = createDataStore(['ID', 'THEME_NAME', 'THEME_FILE_PATH'], 'myHandler.ashx/getThemes');
    
    var result = '../ext/resources/images/myImage.gif';
       
    var image = { html: ' <img src= "' + result + '" />' };


    var imagePanel = new Ext.form.FormPanel({
        autoScroll: true,
        id: 'id_imagePanel',
        frame: true,
        url: '',
        autoHeight: true,
        bodyStyle: 'padding:0px 0px 0px 8px;',
        width: 200,
        height: 150,
        items: [image]


    });


    var themeChk = false;
    var theme_cb = new Ext.form.ComboBox({
        fieldLabel: ' Themes ',
        id: 'id_theme',
        store: themeStore,
        displayField: 'THEME_NAME',
        valueField: 'ID',
        editable: false,
        selectOnFocus: true,
        forceSelection: true,
        typeAhead: true,
        mode: 'local',
        minListWidth: 157,
        triggerAction: 'all',
        width: 140,
        listeners: {
            focus: function () {
                theme_cb.store.load();
            },
            select: function() {
                themeChk = true;
                mySecondHandler.rpc.getThemePath(theme_cb.getValue(), function (r) {


                    result = Ext.decode(r).result;
                    image.html = ' <img src= "' + result + '" />';


                }).call(ext_channel);
            }
        }
    });


    var window = new Ext.Window({
        labelAlign: 'top',
        frame: true,
        title: ' Select Image ',
        id: 'login',
        bodyStyle: 'padding:5px 5px 0',
        width: 400,
        items: [{
            layout: 'form',
            items: [theme_cb ,imagePanel ]
        }]
    });


    return window;
};

[scottmartin]

Have a look at the following thread:
http://www.sencha.com/forum/showthre...1184-IconCombo

Regards,
Scott.

[cranberries_]

Thanks for the reply ..
But I couldn't solve the problem yet. When user select an item from combo , the path of the selected image comes true.It works fine but the image in image panel is not updated. I am getting the path of the selected image with getThemePath below :

 select: function () {
                themeChk = true;
                myHandler.rpc.getThemePath(theme_cb.getValue(), function (r) {


                    result = Ext.decode(r).result;
                    imagePanel.html = ' <img src= "' + result + '" />';


                    // Ext.getCmp('id_imagePanel').doLayout();
                    //  Ext.getCmp('id_imagePanel').update();
                    //Ext.getCmp('id_imagePanel').getUpdater().refresh();
                    //                    imagePanel.doLayout();
                    //                    imagePanel.getUpdater().refresh();
                    //imagePanel.update();


                }).call(ext_channel);
            }

Although I tried the doLayout(),update() ,refresh() functions to update the image panel , it is not updated . How can I solve this situation ?
Thanks again for the replies..

[scottmartin]

I misunderstood your request. You need to use a template for your panel to display images

var imageTemplate = new Ext.XTemplate(
    '<tpl for=".">',
    '<div class="thumb-wrap" id="{image_file}">',
    '<div class="image"><img src="photos/{image_file}" title="{image_name}" onError=this.src="photos/no_photo.jpg"></div>',
    '</tpl>',
    '<div class="x-clear"></div>'
);

var panel = new Ext.Panel({
  ...
  tpl: imageTemplate
});

// on select of combo, call:
imageTemplate.overwrite(panel.body, rec.data); // send updated image in rec.data to panel body

Regards,
Scott.