Extjs 4 catching combobox selected value in button click

Question

I'm just beginning with Extjs 4, and I need to get the selected value of a combobox to change stores and rendering a chart corresponding to the data of each store.

I'm using the MVC model, here's my view containing comboboxes :

Ext.define('Metrics.view.Params', {
extend: 'Ext.grid.Panel',
alias: 'widget.params',

title: 'Select Parameters',
hideHeaders: true,

initComponent: function() {
    this.columns = [{
        dataIndex: 'name',
        flex: 1
    }];

    this.dockedItems = [{
        xtype: 'container',
        items: [{
                    xtype: 'combobox',
        id : 'cmbGraph',
        mode : 'queryMode',
                    name : 'graph',
                    fieldLabel: 'Graph',
        store: ['Small data','Big data'],
        editable : false
                },
                 {
                    //another combobox here..

                  }]

And my controller is :

Ext.define('Metrics.controller.RenderGraph', {
extend: 'Ext.app.Controller',

refs: [{
    ref : 'params',
    selector : 'params'

}],

stores: ['GraphData'],

init: function() {
    // Start listening for events on views
    this.control({
        'paramsbtn button[action=apply]': {
        click : this.launchChart
        }
    });

launchChart : function(button){
    var params = this.getParams();
    var combo1 = params.items[cmbGraph];
    console.log(Ext.encode(combo1));
    var v = combo1.getValue();
    var r = combo1.findRecord(combo1.valueField || combo1.displayField,v);
    return(combo1.store.indexOf(r));
    console.log('combo item' + r + 'selected'); 
}

As you can see, I'm trying to get the value of the combobox with the ID = cmbGraph, but it's not working, the error message I get is :

Uncaught TypeError: Cannot call method 'getValue' of undefined

It's complicated with Extjs 4 because I have to get to an element of a view with my controller. Any help would be much appreciated.

Solution found: I used the "down" method of my params panel : launchChart : function(button){ var params = this.getParams(); var combo1 = params.down('combobox'); var mycombo = combo1.cmbGraph; console.log(Ext.encode(mycombo)); var v = combo1.getValue(); console.log(Ext.encode(v)); } — salamey, Oct 18 '12 at 08:10

score 0 · Answer 1 · answered Jun 24 '13 at 22:22

You could also keep the refs so you can reuse them if you need to and use something like this if you wanted:

refs: [{
    ref : 'graph',
    selector : 'params > container > combobox'
}],

or

refs: [{
    ref : 'graph',
    selector : 'params #cmbGraph'
}],

or even straight:

refs: [{
    ref : 'graph',
    selector : '#cmbGraph'
}],

These should all give you the same reference to the combobox. Just depends on how you arrange your code.

var comboValue = me.getGraph().getValue();

Extjs 4 catching combobox selected value in button click

1 Answers1