Ext JS Sencha 6.2，根据单选按钮值从商店中选择的值

Question

回到stackoverflow来打扰你的人。我写了一个包含一个单选按钮组和一个笛卡尔图表的脚本。我想通过单选按钮从商店获取特定选定区域值的数据。该值应仅显示在图表中。休息服务中的值正在商店Chartdata.js中正确加载。请问如何实现。 BasicZone.js

Ext.define('LICApp.view.charts.bar3d.BasicZone', {
    extend: 'Ext.form.Panel',
    xtype: 'bar-basic-zone',
    controller: 'bar-basic-3d',
    requires: [
        'Ext.chart.theme.Muted',
        'LICApp.store.Chartdata',
        'Ext.form.RadioManager'

    ],

    width: 1300,
    bind: '{Chartdata}',


    items: [{
        xtype: 'fieldcontainer',
        fieldLabel: 'Zone',
        defaultType: 'radiofield',
        isRadio: true,
        inputType: 'radio',
        ariaRole: 'radio',
        listeners: {
            selected: 'getGroupValue'
        },
        defaults: {
            flex: 1
        },
        layout: 'hbox',
        items: [{
            boxLabel: 'Central Office',
            name: 'zone',
            inputValue: 'Central Office',
            id: 'radio1'
        }, {
            boxLabel: 'Central Zone',
            name: 'zone',
            inputValue: 'Central Zone',
            id: 'radio2'
        }, {
            boxLabel: 'East-Central Zone',
            name: 'zone',
            inputValue: 'East-Central Zone',
            id: 'radio3'
        }, {
            boxLabel: 'Eastern Zone',
            name: 'zone',
            inputValue: 'Eastern Zone',
            id: 'radio4'
        }, {
            boxLabel: 'North-Central Zone',
            name: 'zone',
            inputValue: 'North-Central Zone',
            id: 'radio5'
        }, {
            boxLabel: 'Northern Zone',
            name: 'zone',
            inputValue: 'Northern Zone',
            id: 'radio6'
        }, {
            boxLabel: 'South-Central Zone',
            name: 'zone',
            inputValue: 'South-Central Zone',
            id: 'radio7'
        }, {
            boxLabel: 'Southern Zone',
            name: 'zone',
            inputValue: 'Southern Zone',
            id: 'radio8'
        }, {
            boxLabel: 'Western Zone',
            name: 'zone',
            inputValue: 'Western Zone',
            id: 'radio9'
        }]

    }, {
        xtype: 'cartesian',
        title: 'Zone - At a glance',
        reference: 'chart2',
        interactions: ['itemhighlight'],
        width: '100%',
        height: 600,
        insetPadding: 40,
        innerPadding: '0 3 0 0',
        theme: 'Muted',
        legend: {
            docked: 'bottom'
        },
        store: {
            type: 'chartdata',
            autoLoad: true
        },
        animation: Ext.isIE8 ? false : {
            easing: 'backOut',
            duration: 500
        },
        axes: [{
            type: 'numeric3d',
            position: 'left',
            grid: true,
            fields: ['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7'],
            renderer: 'onAxisLabelRender1',
            minimum: 0,
        }, {
            type: 'category3d',
            position: 'bottom',
            grid: true,

            fields: ['selected'],

            label: {
                rotate: {
                    degrees: -10
                }
            }
        }],
        series: [{
            type: 'bar3d',
            fullStack: false,
            title: ['Total Users', 'Biometric Enrolled ', 'Authorised Users', 'Devices Issued', 'User Confirmation', 'eFeap Enabled', 'Concurrencia Enabled'],
            xField: 'zone',
            yField: ['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7'],
            stacked: false,
            highlightCfg: {
                brightnessFactor: 1.2,
                saturationFactor: 1.5
            },
            tooltip: {
                trackMouse: true,
                renderer: 'onSeriesTooltipRender1'
            }
        }],
        sprites: [{
            type: 'text',
            text: '2FA Biometric Progress - Zonewise comparison',
            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: 520
        }]
    }]
});

Answer 1

您需要在load() loadData()事件中使用store var chartStore = Ext.create('Ext.data.Store', { fields: ['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'zone'], data: [] }); function getRandomArbitrary() { var min = 10, max = 50; return Math.random() * (max - min) + min; } function doCreateData(newValue) { var obj = { zone: newValue.zone }, key = 1; for (; key <= 7; key++) { obj[`data${key}`] = getRandomArbitrary(); } return [obj]; } Ext.create('Ext.form.Panel', { renderTo: Ext.getBody(), layout: 'vbox', items: [{ xtype: 'radiogroup', fieldLabel: 'Zones', columns: 6, vertical: true, listeners: { change: function (cmp, newValue) { chartStore.loadData(doCreateData(newValue)); } }, defaults: { flex: 1, margin:'0 10' }, items: [{ boxLabel: 'Central Office', name: 'zone', inputValue: 'Central Office', id: 'radio1' }, { boxLabel: 'Central Zone', name: 'zone', inputValue: 'Central Zone', id: 'radio2' }, { boxLabel: 'East-Central Zone', name: 'zone', inputValue: 'East-Central Zone', id: 'radio3' }, { boxLabel: 'Eastern Zone', name: 'zone', inputValue: 'Eastern Zone', id: 'radio4' }, { boxLabel: 'North-Central Zone', name: 'zone', inputValue: 'North-Central Zone', id: 'radio5' }, { boxLabel: 'Northern Zone', name: 'zone', inputValue: 'Northern Zone', id: 'radio6' }, { boxLabel: 'South-Central Zone', name: 'zone', inputValue: 'South-Central Zone', id: 'radio7' }, { boxLabel: 'Southern Zone', name: 'zone', inputValue: 'Southern Zone', id: 'radio8' }, { boxLabel: 'Western Zone', name: 'zone', inputValue: 'Western Zone', id: 'radio9' }] }, { xtype: 'cartesian', title: 'Zone - At a glance', reference: 'chart2', interactions: ['itemhighlight'], width: '100%', height: 400, flex: 1, innerPadding: '0 3 0 0', legend: { docked: 'bottom' }, store: chartStore, animation: Ext.isIE8 ? false : { easing: 'backOut', duration: 500 }, axes: [{ type: 'numeric3d', position: 'left', grid: true, fields: ['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'zone'], minimum: 0, }, { type: 'category3d', position: 'bottom', title: { text: 'Zone', fontSize: 15 }, grid: true, fields: 'zone' }], series: [{ type: 'bar3d', fullStack: false, title: ['Total Users', 'Biometric Enrolled ', 'Authorised Users', 'Devices Issued', 'User Confirmation', 'eFeap Enabled', 'Concurrencia Enabled'], xField: 'zone', yField: ['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7'], stacked: false }] }] }); org.apache.ignite.configuration.IgniteConfiguration#setConsistentId方法。

在 radiogroup 中，我使用了您的代码并根据您的要求进行了一些更改。希望这能帮助您或指导您解决问题。

onComplete: function(data) {
    data = JSON.parse(data);
    document.getElementById('result').value = data['id'];
}