Combobox 如何在ExTJS中获取单击事件下拉框的值

当我从下拉框中单击时，我的任务是获取不同类型的图表。 根据我从下拉列表中选择的图形，我需要在JS文件中显示相同的图形。 目前我可以显示不同类型的图表

您能帮助我如何通过sencha EXT JS根据下拉值从中提取数据吗

提前谢谢

请在下面找到所附代码

        /*global Ext:false */
        Ext.onReady(function () {
            // The data store containing the list of states
            var charts = Ext.create('Ext.data.Store', {
                fields: [ 'name'],
                data: [{            
                    "name": "Bar"
                }, {            
                    "name": "Pie"
                }, {            
                    "name": "Line"
                },{            
                    "name": "Area"
                }, {            
                    "name": "Column"
                }, {            
                    "name": "Gauge"
                }       
                ]

            });

            // Create the combo box, attached to the charts data store
            Ext.create('Ext.form.ComboBox', {
                fieldLabel: 'Choose Chart',
                store: charts,
                queryMode: 'local',
                displayField: 'name',        
                renderTo: Ext.getBody()
            });

            //Line Chart
            var store = Ext.create('Ext.data.JsonStore', {
            fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
            data: [
                { 'name': 'metric one',   'data1': 10, 'data2': 12, 'data3': 14, 'data4': 8,  'data5': 13 },
                { 'name': 'metric two',   'data1': 7,  'data2': 8,  'data3': 16, 'data4': 10, 'data5': 3  },
                { 'name': 'metric three', 'data1': 5,  'data2': 2,  'data3': 14, 'data4': 12, 'data5': 7  },
                { 'name': 'metric four',  'data1': 2,  'data2': 14, 'data3': 6,  'data4': 1,  'data5': 23 },
                { 'name': 'metric five',  'data1': 4,  'data2': 4,  'data3': 36, 'data4': 13, 'data5': 33 }
            ]
        });

        var linechart = Ext.create('Ext.chart.Chart', {
            renderTo: Ext.getBody(),
            width: 500,
            height: 300,
            animate: true,
            store: store,
            axes: [
                {
                    type: 'Numeric',
                    position: 'left',
                    fields: ['data1', 'data2'],
                    label: {
                        renderer: Ext.util.Format.numberRenderer('0,0')
                    },
                    title: 'Sample Values',
                    grid: true,
                    minimum: 0
                },
                {
                    type: 'Category',
                    position: 'bottom',
                    fields: ['name'],
                    title: 'Sample Metrics'
                }
            ],
            series: [
                {
                    type: 'line',
                    highlight: {
                        size: 7,
                        radius: 7
                    },
                    axis: 'left',
                    xField: 'name',
                    yField: 'data1',
                    markerConfig: {
                        type: 'cross',
                        size: 4,
                        radius: 4,
                        'stroke-width': 0
                    }
                },
                {
                    type: 'line',
                    highlight: {
                        size: 7,
                        radius: 7
                    },
                    axis: 'left',
                    fill: true,
                    xField: 'name',
                    yField: 'data2',
                    markerConfig: {
                        type: 'circle',
                        size: 4,
                        radius: 4,
                        'stroke-width': 0
                    }
                }
            ]
        });
        //Bar Chart

        var store = Ext.create('Ext.data.JsonStore', {
            fields: ['name', 'data'],
            data: [
                { 'name': 'metric one',   'data':10 },
                { 'name': 'metric two',   'data': 7 },
                { 'name': 'metric three', 'data': 5 },
                { 'name': 'metric four',  'data': 2 },
                { 'name': 'metric five',  'data':27 }
            ]
        });

        Ext.create('Ext.chart.Chart', {
            renderTo: Ext.getBody(),
            width: 500,
            height: 300,
            animate: true,
            store: store,
            axes: [{
                type: 'Numeric',
                position: 'bottom',
                fields: ['data'],
                label: {
                    renderer: Ext.util.Format.numberRenderer('0,0')
                },
                title: 'Sample Values',
                grid: true,
                minimum: 0
            }, {
                type: 'Category',
                position: 'left',
                fields: ['name'],
                title: 'Sample Metrics'
            }],
            series: [{
                type: 'bar',
                axis: 'bottom',
                highlight: true,
                tips: {
                  trackMouse: true,
                  width: 140,
                  height: 28,
                  renderer: function(storeItem, item) {
                    this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
                  }
                },
                label: {
                  display: 'insideEnd',
                    field: 'data',
                    renderer: Ext.util.Format.numberRenderer('0'),
                    orientation: 'horizontal',
                    color: '#333',
                    'text-anchor': 'middle'
                },
                xField: 'name',
                yField: 'data'
            }]
        });

        //pie chart

        var store = Ext.create('Ext.data.JsonStore', {
            fields: ['name', 'data'],
            data: [
                { 'name': 'metric one',   'data': 10 },
                { 'name': 'metric two',   'data':  7 },
                { 'name': 'metric three', 'data':  5 },
                { 'name': 'metric four',  'data':  2 },
                { 'name': 'metric five',  'data': 27 }
            ]
        });

        Ext.create('Ext.chart.Chart', {
            renderTo: Ext.getBody(),
            width: 500,
            height: 350,
            animate: true,
            store: store,
            theme: 'Base:gradients',
            series: [{
                type: 'pie',
                angleField: 'data',
                showInLegend: true,
                tips: {
                    trackMouse: true,
                    width: 140,
                    height: 28,
                    renderer: function(storeItem, item) {
                        // calculate and display percentage on hover
                        var total = 0;
                        store.each(function(rec) {
                            total += rec.get('data');
                        });
                        this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100) + '%');
                    }
                },
                highlight: {
                    segment: {
                        margin: 20
                    }
                },
                label: {
                    field: 'name',
                    display: 'rotate',
                    contrast: true,
                    font: '18px Arial'
                }
            }]
        });
        //column chart

        var store = Ext.create('Ext.data.JsonStore', {
            fields: ['name', 'data'],
            data: [
                { 'name': 'January',   'data': 10 },
                { 'name': 'February',   'data': 20 },
                { 'name': 'March', 'data': 30},
                { 'name': 'April',  'data': 40 },
                { 'name': 'May',  'data': 50 },
                { 'name': 'June',   'data': 60 },
                { 'name': 'July',   'data': 70 },
                { 'name': 'August', 'data': 60 },
                { 'name': 'September',  'data': 50 },
                { 'name': 'October',  'data': 40},
                { 'name': 'November',  'data': 30},
                { 'name': 'December',  'data': 20}
            ]
        });

        Ext.create('Ext.chart.Chart', {
            renderTo: Ext.getBody(),
            width: 1000,
            height: 500,
            animate: true,
            store: store,
            axes: [
                {
                    type: 'Numeric',
                    position: 'left',
                    fields: ['data'],
                    label: {
                        renderer: Ext.util.Format.numberRenderer('0,0')
                    },
                    title: 'Sample Values',
                    grid: true,
                    minimum: 0
                },
                {
                    type: 'Category',
                    position: 'bottom',
                    fields: ['name'],
                    title: 'Sample Metrics'
                }
            ],
            series: [
                {
                    type: 'column',
                    axis: 'left',
                    highlight: true,
                    tips: {
                      trackMouse: true,
                      width: 140,
                      height: 28,
                      renderer: function(storeItem, item) {
                        this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $');
                      }
                    },
                    label: {
                      display: 'insideEnd',
                      'text-anchor': 'middle',
                        field: 'data',
                        renderer: Ext.util.Format.numberRenderer('0'),
                        orientation: 'vertical',
                        color: '#333'
                    },
                    xField: 'name',
                    yField: 'data'
                }
            ]
        });



        });

---

您需要熟悉以下内容：

对于要切换视图的组件，我觉得您最好使用带有菜单的按钮来选择图表，而不是尝试使用组合框

Ext.create（'Ext.button.button'{
文本：“选择图表”，
菜单：this.getChartList，
操作：“选择图表”，
菜单名：“tl bl”
}]
getChartList:函数（）{
var menuItems=[]；
this.store.each（函数（rec）{
mainMenuItems.push({
文本：rec.get（'name'）
});
}
返回新的Ext.menu.menu({
项目：主菜单项
});
}

然后在您的控制器中，或在您想要收听按钮的任何位置：

this.control({
'按钮[action=selectChart]菜单项'：{
单击：this.onSelectChart单击，
}
});
在选择图表上单击：功能（项目）{
开关（item.text）{
“酒吧”一案：
//显示条形图的逻辑
打破
“馅饼”一案：
//显示饼图的逻辑
打破
案例“行”：
//显示线图的逻辑
打破
}
}

至于显示图表的逻辑，在init上，您应该创建一个卡片布局……您可以从一个容器开始，该容器容纳您的项目：

this.p=Ext.create（'Ext.panel.panel'{
布局：“卡片”，
项目：[
这是.createBarGraph（），
这是.createPieChart（），
这个文件名为createLineGraph（）
]
});

然后在按钮侦听器上，您可以将活动项设置为图表：

this.p.getLayout（）.setActiveItem（this.barGraph）；

这个任务还有其他可能的解决方案吗？我查看了上面的注释并尝试执行。但我没有得到答案，即单击按钮，它不会从一个图表更改为另一个图表。