Combo box values in ext js

Question

I am new to ext js (working on ext js 6.2) and trying to get values from combo box to get 3d bar chart from selected value, but neither I am getting selected value nor the chart with selected value. Please help me getting out of this problem.

my codes are as under :

2FAData.js:

Ext.define('LICApp.store.2FAData', {
    extend: 'Ext.data.Store',
    alias: 'store.2fa-data',

    requires: [
        'Ext.data.reader.Xml'
    ],
    autoLoad: true,

    fields: ['name', 'cnt', 'zone'],
    groupField: 'zone',


    proxy: {
        type: 'ajax',
        cors: 'true',
        url: 'http://localhost:8080/UserManagement/rest/BiodataController/bio',
        method: 'POST',
        reader: {
            type: 'xml',
            record: 'biodata',
            rootProperty: 'biodatas'
        }
    },
});

Basic.js

Ext.define('LICApp.view.charts.bar3d.Basic', {
    extend: 'Ext.Panel',
    xtype: 'bar-basic-3d',
    controller: 'bar-basic-3d',

    requires: [
        'Ext.chart.theme.Muted',
        'LICApp.store.2FAData',
        'Ext.grid.feature.Grouping'

    ],

    width: 1300,

    items: [{
        xtype: 'combobox',
        hideLabel: true,
        store: {
            type: '2fa-data'

        },
        valueField: 'zone',
        displayField: 'zone',
        typeAhead: true,
        queryMode: 'local',
        triggerAction: 'query',
        emptyText: 'Select a Zone...',
        selectOnFocus: true,
        width: 200,
        indent: true
    },
    {
        xtype: 'cartesian',
        flipXY: true,
        reference: 'chart',
        width: '100%',
        height: 500,
        insetPadding: '40 40 30 40',
        innerPadding: '3 0 0 0',
        theme: {
            type: 'muted'
        },
        store: {
            type: '2fa-data',


        },
        animation: {
            easing: 'easeOut',
            duration: 500
        },
        interactions: ['itemhighlight'],
        axes: [{
            type: 'numeric3d',
            //position: 'bottom',
            //fields: 'name',
            //maximum: 150000,
            //majorTickSteps: 10,
            renderer: 'onAxisLabelRender',
            //title: 'Number of Employees',
            grid: {
                odd: {
                    fillStyle: 'rgba(245, 245, 245, 1.0)'

                },
                even: {
                    fillStyle: 'rgba(255, 255, 255, 1.0)'

                }
            }
        }, {
            type: 'category3d',
            position: 'left',
            fields: 'name',
            label: {
                textAlign: 'right'
            },
            grid: true
        }],
        series: [{
            type: 'bar3d',
            xField: 'name',
            yField: 'cnt',
            style: {
                minGapWidth: 10
            },
            highlight: true,
            label: {
                field: 'cnt',
                display: 'insideEnd',
                renderer: 'onSeriesLabelRender'
            },
            tooltip: {
                trackMouse: true,
                renderer: 'onSeriesTooltipRender'
            }
        }],
        sprites: [{
            type: 'text',
            text: 'Implementation of 2FA Biometric - Progress Chart',
            fontSize: 22,
            width: 100,
            height: 30,
            x: 40, // the sprite x position
            y: 20  // the sprite y position
        }, {
            type: 'text',
            text: 'Source: 2FA Data Server',
            fontSize: 10,
            x: 12,
            y: 490
        }]
    }],
    tbar: [
        '->',
        {
            text: 'Preview',
            handler: 'onPreview'
        }
    ],
    listeners: {
        select: 'onItemSelected'
    }

});

BasicController.js

Ext.define('LICApp.view.charts.bar3d.BasicController', {
extend: 'Ext.app.ViewController',
alias: 'controller.bar-basic-3d',

onAxisLabelRender: function (axis, label, layoutContext) {
    return Ext.util.Format.number(layoutContext.renderer(label) );
},

onSeriesLabelRender: function (v) {
    return Ext.util.Format.number(v);
},

onSeriesTooltipRender: function (tooltip, record, item) {
    var formatString = '0,000 ';

    tooltip.setHtml(record.get('zone') + ': ' +
        Ext.util.Format.number(record.get('cnt'), formatString));

},

onPreview: function () {
    if (Ext.isIE8) {
        Ext.Msg.alert('Unsupported Operation', 'This operation requires a newer version of Internet Explorer.');
        return;
    }
    var chart = this.lookupReference('chart');
    chart.preview();

        },
 onItemSelected: function (sender, record) {
    var zone = combo.getValue();
 },       

});

Answer 1

You should attach a select listener to your combobox:

{
  xtype: 'combobox',
  hideLabel: true,
  store: {
    type: '2fa-data'
  },
  valueField: 'zone',
  displayField: 'zone',
  typeAhead: true,
  queryMode: 'local',
  triggerAction: 'query',
  emptyText: 'Select a Zone...',
  selectOnFocus: true,
  width: 200,
  indent: true,
  listeners: {
     select: 'onItemSelected' //this one
  }
}

Notice in your onItemSelected method in your ViewController:

onItemSelected: function (sender, record) { //<- param is sender
   //var zone = combo.getValue();  //you are using combo, this is undefined
   var zone = sender.getValue();
   // or better yet, why not use the `record` parameter?
   var theValue = record[0].data.zone;
}, 

Answer 2

The binding feature of Sencha Ext JS MVVM architecture helps to write declarative code and avoid writing handlers in controllers. Since it's a migration to 6.2, this approach can be taken to remove unnecessary handlers in the controller. Here's a small example on this.

Update: With reference to the provided example, please read the following points:

1. The parent class Panel has a View Model, which is available down the hierarchy to combo box and chart components.

2. View Model has a data property rec, which holds reference to the selected record from combo box. The selection property of combo box is bound to this rec property. It means that the moment a new record is selected from combo box, the rec property of View Model gets updated.

3. The View Model also has two stores - comboStore and chartStore

   a. comboStore: - contains complete data set. It is bound to the combobox.

   b. chartStore:- is the child store of comboStore (a child store takes its data from the parent store but has additional capability of filtering and sorting, independent of the parent store.). It is bound to the chart component and filters on the rec.name property (i.e the moment rec is updated, filtering is triggered.) So, technically, this store always contains only the selected record from combo box. And since chart is bound to this store, it gets updated too and shows the selected record's 3dbar graph.

Here's the inline code. Please see the comments for more.

Ext.define('MyPanel', {
        extend: 'Ext.panel.Panel',
        layout: 'vbox',

        //Declare parent class view model
        //This view model will be available down the hierarchy
        viewModel: {
            //Declare viewmodel's static data properties
            data: {
                //This references the selected record from combo box
                rec: null,
            },
            //Declare stores for this viewmodel
            stores: {
                //Declare store for combo box containing complete dataset
                comboStore: {
                    fields: ['name', 'apples', 'oranges'],
                    data: [{
                        name: 'Eric',
                        apples: 10,
                        oranges: 13
                    }, {
                        name: 'Mary',
                        apples: 7,
                        oranges: 20
                    }, {
                        name: 'John',
                        apples: 5,
                        oranges: 12
                    }, {
                        name: 'Bob',
                        apples: 2,
                        oranges: 30
                    }, {
                        name: 'Joe',
                        apples: 19,
                        oranges: 17
                    }, {
                        name: 'Macy',
                        apples: 13,
                        oranges: 4
                    }]
                },
                //Declare store for chart component
                chartStore: {
                    //This is child store of 'ComboStore'. Its data source is 'comboStore'
                    source: '{comboStore}',
                    //This filters this child store to contain only the selected record from combo box
                    filters: [{
                        //This filters the store by 'name' property, which is the 'displayField' of combo box
                        property: 'name',
                        //This binding helps to filter by the selected record's 'name' property
                        //'rec' is the selecte record which is available in the view model
                        value: '{rec.name}'
                    }],
                }
            }
        },
        items: [{
            xtype: 'mycombo',
            bind: {
                //This binding provides 'comboStore' data to the combobox
                store: '{comboStore}',
                //The selection property of combo box is published to the viewmodel
                //and its reference is stored in the viewmodel data property 'rec'
                selection: '{rec}'
            }
        }, {
            xtype: 'mychart',
            bind: {
                //This binding provides 'chartStore' data to the chart component
                //Since it is bound, the moment this store is updated/filtered, the chart view gets updated too
                store: '{chartStore}'
            }
        }]
    });

Answer 3

Please change listeners for select event instead of panel to combobox. Panel don't have select event.

I have created an Sencha Fiddle demo for combobox select/change both event. it will show how it is working. Hope this will help you to solve you problem or achieve your functionality.

// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data: [{
        "abbr": "AL",
        "name": "Alabama"
    }, {
        "abbr": "AK",
        "name": "Alaska"
    }, {
        "abbr": "AZ",
        "name": "Arizona"
    }]
});

// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose State',
    store: states,
    queryMode: 'local',
    margin: 10,
    displayField: 'name',
    valueField: 'abbr',
    renderTo: Ext.getBody(),
    listeners: {
        select: function (combo, record) {
                Ext.Msg.alert('Success', 'Congrtas you have selected <b>' + record.get("name") + '</b>');
            }
            /*change: function (combo, newValue,oldValue) {
                Ext.Msg.alert('Success', 'Congrtas you have selected <b>' + newValue + '</b>');
            }*/
    }
});