0

My task is to fetch different types of charts ,when i click from the drop down box. Based on which graph i select from dropdown ,i need to display the same in JS file. Currently i can display different types of charts.

Can you please help me how to fetch from based on dropdown values through sencha EXT JS.

Thanks in advance..

please find the attached code below.

        /*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'
                }
            ]
        });



        });
4

1 回答 1

0

您需要熟悉卡片布局：

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

Ext.create('Ext.button.Button', {
    text: 'Select Chart',
    menu: this.getChartList,
    action: 'selectChart',
    menuAlign: 'tl-bl'
}]

getChartList: function() {
    var menuItems = [];
    this.store.each(function(rec) {
        mainMenuItems.push({
            text: rec.get('name')
        });
    }
    return new Ext.menu.Menu({
        items: mainMenuItems
    });
}

然后在您的控制器中，或任何您想听按钮的地方：

this.control({
    'button[action=selectChart] menuitem': {  
       click: this.onSelectChartClick,
    }
});

onSelectChartClick: function(item) {
    switch (item.text) {
    case 'Bar':
        //logic for showing bar graph
        break;
    case 'Pie':
        //logic for showing pie chart
        break;
    case 'Line':
        //logic for showing line graph
        break;
    }
}

至于显示图表的逻辑，在初始化时你应该创建一个卡片布局......你可以从一个包含你的项目的容器开始：

this.p = Ext.create('Ext.panel.Panel', {
    layout: 'card',
    items: [
         this.createBarGraph(),
         this.createPieChart(),
         this.createLineGraph()
    ]
});

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

this.p.getLayout().setActiveItem(this.barGraph);
于 2013-06-15T07:05:15.653 回答