IconCombo

**jamone** · 5 Feb 2009 12:50 PM

I love the IconCombo example, and it works fine for me in FF3. My question is this; how do you obtain the value chosen in the combo box, in the iconcombo.html?

**Ant1105** · 5 Feb 2009 12:56 PM

It is just an extension of the Ext.form.ComboBox. Call the getValue() method.

http://extjs.com/deploy/dev/docs/?cl....form.ComboBox

**jamone** · 5 Feb 2009 3:33 PM

Thanks I have tried that, bt I get an error that says, iconCombo.getValue() is not a function.

Here is the iconCombo.html file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="http://localhost/extJS/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="./Ext.ux.IconCombo.css">
<script type="text/javascript" src="http://localhost/extJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://localhost/extJS/ext-all-debug.js"></script>
<script type="text/javascript" src="./Ext.ux.IconCombo.js"></script>
<script type="text/javascript" src="./iconcombo.js"></script>

<script type="text/javascript">Ext.onReady(iconcombo.init, iconcombo);</script>
<title>Ext.ux.IconCombo Tutorial</title>
</head>
<body>
<div id="combo-ct">
<span style="width:220px; font-size: 11px"><b>Language:</b></span>
<script type="text/javascript">Ext.Msg.alert('Chosen country: ' + iconcombo.getValue());</script>
</div>
</body>
</html>

**mjlecomte** · 5 Feb 2009 4:04 PM

The problem you're running into I believe is an issue of scope and closure.

Do this:

1. Navigate here:
http://extjs.com/deploy/dev/examples...rray-grid.html
This is just some page that has Ext loaded, and will be our playground.

2. Open Firefox and then open firebug console area. Cut and paste this into firebug console and hit run:

PHP Code:


Ext.ux.IconCombo = function(config){



    // call parent constructor

    Ext.ux.IconCombo.superclass.constructor.call(this, config);

    

    this.tpl = config.tpl ||

    '<tpl for="."><div class="x-combo-list-item x-icon-combo-item {' +

    this.iconClsField +

    '}">{' +

    this.displayField +

    '}</div></tpl>';

    

    this.on({

        render: {

            scope: this,

            fn: function(){

                var wrap = this.el.up('div.x-form-field-wrap');

                this.wrap.applyStyles({

                    position: 'relative'

                });

                this.el.addClass('x-icon-combo-input');

                this.flag = Ext.DomHelper.append(wrap, {

                    tag: 'div',

                    style: 'position:absolute'

                });

            }

        }

    });

} // end of Ext.ux.IconCombo constructor

// extend

Ext.extend(Ext.ux.IconCombo, Ext.form.ComboBox, {



    setIconCls: function(){

        var rec = this.store.query(this.valueField, this.getValue()).itemAt(0);

        if (rec) {

            this.flag.className = 'x-icon-combo-icon ' + rec.get(this.iconClsField);

        }

    },

    

    setValue: function(value){

        Ext.ux.IconCombo.superclass.setValue.call(this, value);

        this.setIconCls();

    }

    

});

That sets up your class. Then the tutorial provided some example usage code. Clear the console. Paste this code block into console and hit run.

Code:

iconcombo = function() {
 
    // public space
    return {
        // public properties, e.g. strings to translate
 
        // public methods
        init: function() {
            var icnCombo = new Ext.ux.IconCombo({
                store: new Ext.data.SimpleStore({
                    fields: ['countryCode', 'countryName', 'countryFlag'],
                    data: [
                        ['US', 'United States', 'x-flag-us'],
                        ['DE', 'Germany', 'x-flag-de'],
                        ['FR', 'France', 'x-flag-fr']
                    ]
                }),
                valueField: 'countryCode',
                displayField: 'countryName',
                iconClsField: 'countryFlag',
                triggerAction: 'all',
                mode: 'local',
                width: 160
            });
            icnCombo.render(Ext.getBody());  //note change here
            icnCombo.setValue('DE');
        }
    };
}(); // the ending () executes this function immediately and assigns the result to iconcombo

// run the function
iconcombo.init();

So that runs the code and you should see the combo on the page now. Notice that only the result is publicly accessible through iconcombo. After the function executes, we are able to call init() on that function, because init() was returned as a public property.

Clear the console again and put this into the console and click run:

Code:

iconcombo;

So that displays our instance of the class. If we click on that object we can inspect it to see what properties it has. Notice that the closure only exposes the one method (init). The return portion of the code above exposes the public properties. The only property that was returned is init, so that is the only thing that can be called. No other properties of the extended Class or it's parent (Ext.ComboBox) are exposed for use.

So now clear the firebug console, paste in the following and hit run:

Code:

var icnCombo = new Ext.ux.IconCombo({
    store: new Ext.data.SimpleStore({
        fields: ['countryCode', 'countryName', 'countryFlag'],
        data: [['US', 'United States', 'x-flag-us'], ['DE', 'Germany', 'x-flag-de'], ['FR', 'France', 'x-flag-fr']]
    }),
    valueField: 'countryCode',
    displayField: 'countryName',
    iconClsField: 'countryFlag',
    triggerAction: 'all',
    mode: 'local',
    width: 160
});
icnCombo.render(Ext.getBody());
icnCombo.setValue('DE');

You should have another combo now. Notice how this code creates an instance of the ComboBox extension, and assigns a reference to that instance to icnCombo. Now you can use icnCombo to get access to ALL of the properties exposed via the ComboBox extension (and it's parent class Ext.ComboBox).

Clear the console. Paste this into console:

Code:

icnCombo;

Hit run. Now inspect THAT object. You can inspect it to see that NOW you have all the goodies of Ext.ComboBox exposed. Now you can do:

Code:

icnCombo.getValue();

**mjlecomte** · 5 Feb 2009 4:13 PM

I should add that there are other ways around this. You could specify an id and then use Ext.getCmp('someId'); to get a reference to the component as just one example.

More than likely you would not use a closure in the first place, you'd probably have this combo as one of the items in a FormPanel and would probably maintain a reference to that field if needed.

**jamone** · 5 Feb 2009 5:43 PM

Performing step 2, I get the error, "Typeerror: sp is undefined". Nothing else works after that.

I take it, that the Combobox is not as user friendly as the <Select></Select>.

Does anyone have a suggestion as to how to access the selected value of the iconCombo through the html that renders it?

**mjlecomte** · 5 Feb 2009 6:25 PM

You followed Step 1 before doing Step 2? I just tried it again and it works fine.

Your question in the post above is not specific to the ComboBox extension thread. If you just want to access a ComboBox value use one of the form examples as your base.

**mjlecomte** · 5 Feb 2009 6:26 PM

To be clear, that link is to the extjs.com site, not local. That way we know we are dealing with the same base javascript files...

**jsakalos** · 5 Feb 2009 8:20 PM

IconCombo is used as example in 3 Turorials, Ext-1.x extending, Ext-2 extending and Ext-2 plugin. Which version are you having troubles with?

First step, as always, should be to take example and make it running unmodified. Does that (unmodified code from the tutorial) work for you?

**jamone** · 5 Feb 2009 11:14 PM

Thanks for all your efforts by the way.

All the steps work for me until the step of typing icnCombo; then I get the following error:
ReferenceError: icnCombo is not defined source=icnCombo;message=icnCombo is not defined

IconCombo

Thread Tools

Search Thread

Display

IconCombo

IconCombo

IconCombo

IconCombo

IconCombo

IconCombo

IconCombo

IconCombo