如何使用输入数据加载新的extjs图表?

时间:2012-08-27 18:07:24

标签: javascript extjs extjs4

我从xml文件加载了输入数据。然后用户从下拉列表中选择值。我使用选定的值重新加载图表。每次用户重新选择该选项时,都会重新加载图表。这是极限4。

如何使用新选择的值重新加载图表的新代理网址并更新图表以反映新的选择? 谢谢

Ext.define('Column',{
            extend: 'Ext.data.Model',
            fields: [

                     'data1','Data2']
        });

var store = Ext.create('Ext.data.Store', {
            model: 'Column',
            autoLoad: true,
            proxy: {
                type: 'ajax',
                url:'/data.xml',
                reader:{
                    type:'xml',
                    record: 'result'
                }
            }
        });
var store2 = Ext.create('Ext.data.Store', {
            model: 'Column',
            autoLoad: true,
            proxy: {
                type: 'ajax',
                url:'/data2.xml?selectvalue=',
                reader:{
                    type:'xml',
                    record: 'result'
                }
            }
        });

var mychart = Ext.create('Ext.chart.Chart', {

        width: 400,
        height: 200,
        renderTo: 'ChartsDiv',
        store: store2,
        axes: [{
            type: 'gauge',
            position: 'gauge',
            minimum: 0,
            maximum: 100,
            steps: 10,
            margin: 20
        }], 
        series: [{
            type: 'gauge',
            field: 'data2',
            donut: 40,
            colorSet: ['#843525', '#ddd']
        }]
    });

var simpleCombo = Ext.create('Ext.form.field.ComboBox', {
            store: store,
            displayField: 'data1',
            valueField: 'data1' ,
            width: 250,
            labelWidth: 120,
            fieldLabel: 'select a value',
            renderTo: 'simpleCombo',
            queryMode: 'local',
            typeAhead: true,
            listeners:{
            change: function(combo,records){
                var selectedValue= simpleCombo.getValue();
                Ext.Msg.alert(selectedValue);   
            }
        });

1 个答案:

答案 0 :(得分:1)

如果我理解您的问题,您想根据对组合框所做的更改来更改store2的网址吗?

change: function(combo, records){
    var selectedValue = combo.getValue();
    store2.proxy.url = "/data2.xml?selectvalue=" + selectedValue;

    // Load the store with a callback function to redraw the chart
    store2.load(function(records, operation, success){
        if(success){
            chart.redraw();
        }
    });
}