1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    7
    Vote Rating
    0
    cranberries_ is on a distinguished road

      0  

    Default Combobox Problem Help??

    Combobox Problem Help??


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


    Code:
    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;
    };

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,872
    Vote Rating
    438
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


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

    Regards,
    Scott.

  3. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    7
    Vote Rating
    0
    cranberries_ is on a distinguished road

      0  

    Default


    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 :

    Code:
     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..

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,872
    Vote Rating
    438
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


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

    Code:
    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.

Thread Participants: 1

Tags for this Thread