ext js

时间:2017-10-09 11:19:22

标签: javascript extjs

我是ext js的新手(处理ext js 6.2)并尝试从组合框中获取值以从所选值中获取3d条形图,但我既没有选择值也没有选择值的图表。请帮我摆脱这个问题。

我的代码如下:

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();
 },       

});

3 个答案:

答案 0 :(得分:0)

请将选择事件的听众更改为combobox,而不是面板。小组没有选择活动。

我为组合框选择/更改这两个事件创建了一个Sencha Fiddle演示。它将显示它是如何工作的。希望这能帮助您解决问题或实现您的功能。

add_shortcode('slider', 'team_slider_query');
function team_slider_query($atts, $content){

$args=array(
            'posts_per_page'    => 200,
        'post_type'         => 'teams',);
// The Query
$the_query = new WP_Query( $args );
// The Loop

if ( $the_query->have_posts() ) { ?>
          <div class="owl-carousel owl-theme">
<?php 
    while ( $the_query->have_posts() ) { 
        $the_query->the_post();?>

        <p><?php the_content(); ?></p>

        <?php 
        $imghtml = get_the_post_thumbnail(get_the_ID(), 'full');
            $url = get_post_meta(get_the_ID(), 'slider-url', true);
        // get_template_part( 'template-parts/post/content', get_post_format() );

$output .= '<div class="item">
            <img src="https://localhost/wordpress/wp-content/uploads/2017/10/Hydrangeas-300x225.jpg"/>
        </div>
        <div class="item">
            <img src="https://localhost/wordpress/wp-content/uploads/2017/10/i3solutions-team-solutions-business-solutions-data-management-collaboration-application-development-300x129.jpg"/>
        </div>';

    }
$output .= '</div>';


    /* Restore original Post Data */
      wp_reset_postdata();

} else {
    // no posts found
}
return $output;
}

答案 1 :(得分:0)

你应该将id听众附加到你的组合框:

select

请注意ViewController中的{ 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 } } 方法:

onItemSelected

答案 2 :(得分:0)

Sencha Ext JS MVVM体系结构的binding功能有助于编写声明性代码并避免在控制器中编写处理程序。由于它是迁移到6.2,因此可以采用这种方法来删除控制器中不必要的处理程序。 Here's这是一个小例子。

<强>更新 参考提供的示例,请阅读以下几点:

  1. 父类面板有一个视图模型,在层次结构中可用于组合框图表组件。< / p>

  2. 视图模型具有data属性rec,它保存对组合框中所选记录的引用。组合框的selection属性绑定到此rec属性。这意味着从组合框中选择新记录的那一刻,View Model的rec属性会更新。

  3. 视图模型还有两个商店 - comboStorechartStore

    一个。 comboStore: - 包含完整的数据集。它与组合框绑定。

    chartStore: - 是comboStore的子存储(子存储从父存储中获取其数据,但具有过滤和排序的附加功能,与父存储无关。)。它绑定到图表组件和rec.name属性上的过滤器(即更新时刻rec,触发过滤。)因此,从技术上讲,此商店始终只包含组合框中的选定记录。由于图表已绑定到此商店,因此它也会更新并显示所选记录的3dbar图表。

  4. 这是内联代码。请参阅评论了解更多信息。

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