Sencha Ext JS - 如何在选择日期后刷新选项卡？

Question

我有 MVC 应用程序，它是一个选项卡面板，其中包含几个选项卡，每个选项卡上都有一个图表，还有一个带有刷新按钮的日期选择器，以及一个用于选择哪个数据源用于 'Date Range'. 该应用程序当前加载包含所有可用数据的图表，但目的是 select 3 个可用数据源中的 1 个，select 日期范围并通过单击按钮刷新每个图表选项卡，我该怎么做？

Fiddle sample

Answer 1

像这样：

Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    height: 800,
    width: 800,
    layout: 'border',

    defaults: {
        collapsible: false,
        split: true,
    },

    items: [{
        title: 'PanelCenter',
        xtype: 'tabpanel',
        region: 'center',
        itemId: 'centerPanel',
        bodyPadding: 10,
        activeTab: 0,
        items: [{
            title: "Tab1",
            items: {
                xtype: 'cartesian',
                width: 655,
                height: 400,
                store: {
                    fields: ['name', 'value'],
                    data: [{
                        name: 'metric one',
                        value: 10,
                    }, {
                        name: 'metric two',
                        value: 7,

                    }, {
                        name: 'metric three',
                        value: 5,
                    }]
                },
                axes: [{
                    type: 'numeric',
                    position: 'left',
                    title: {
                        text: 'Sample Values',
                        fontSize: 15
                    },
                }, {
                    type: 'category',
                    position: 'bottom',
                    title: {
                        text: 'Sample Values',
                        fontSize: 15
                    },
                    fields: 'name',
                }],
                series: [{
                        type: 'bar',
                        xField: 'name',
                        yField: 'value'
                    }

                ]

            }

        }, {
            title: "Tab2",
            items: {
                xtype: 'cartesian',
                width: 655,
                height: 400,
                store: {
                    fields: ['name', 'value'],
                    data: [{
                        name: 'metric one',
                        value: 3,
                    }, {
                        name: 'metric two',
                        value: 5,

                    }, {
                        name: 'metric three',
                        value: 10,
                    }]
                },
                axes: [{
                    type: 'numeric',
                    position: 'left',
                    title: {
                        text: 'Sample Values',
                        fontSize: 15
                    },
                }, {
                    type: 'category',
                    position: 'bottom',
                    title: {
                        text: 'Sample Values',
                        fontSize: 15
                    },
                    fields: 'name',
                }],
                series: [{
                        type: 'bar',
                        xField: 'name',
                        yField: 'value'
                    }

                ]

            }
        }, {
            title: "Tab3",
            items: {
                xtype: 'cartesian',
                width: 655,
                height: 400,
                store: {
                    fields: ['name', 'value'],
                    data: [{
                        name: 'metric one',
                        value: 10,
                    }, {
                        name: 'metric two',
                        value: 3,

                    }, {
                        name: 'metric three',
                        value: 9,
                    }]
                },
                axes: [{
                    type: 'numeric',
                    position: 'left',
                    title: {
                        text: 'Sample Values',
                        fontSize: 15
                    },
                }, {
                    type: 'category',
                    position: 'bottom',
                    title: {
                        text: 'Sample Values',
                        fontSize: 15
                    },
                    fields: 'name',
                }],
                series: [{
                        type: 'bar',
                        xField: 'name',
                        yField: 'value'
                    }

                ]

            }
        }]

    }, {
        xtype: 'form',
        title: 'PanelTop',
        layout: {
            type: 'hbox',
        },
        region: 'north',
        border: false,
        bodyPadding: 10,
        height: '100',
        width: '100%',
        margin: '0 0 5 0',
        region: 'north',
        items: [{
            xtype: 'combo',
            name: 'data_type',
            itemId: 'dataTypeSelect',
            emptyText: 'Select date type',
            displayField: 'source',
            store: {
                fields: ['code', 'source'],
                data: [{
                    code: 'created',
                    source: 'Sales date'
                }, {
                    code: 'invoice',
                    source: 'Invoice date'
                }, {
                    code: 'bookIn',
                    source: 'Order date'
                }]
            },
            allowBlank: false,
        }, {
            xtype: 'datefield',
            itemId: 'dateFromSearchField',
            fieldLabel: 'From',
            labelAlign: 'right',
            name: 'from_date',
            format: 'd/m/Y',
            maxValue: new Date(),
            allowBlank: false,
        }, {
            xtype: 'datefield',
            itemId: 'dateToSearchField',
            fieldLabel: 'To',
            labelAlign: 'right',
            name: 'to_date',
            format: 'd/m/Y',
            maxValue: new Date(),
            value: new Date(),
            padding: '0 30 0 0',
            allowBlank: false
        }, {
            xtype: 'button',
            itemId: 'refreshButton',
            region: 'center',
            text: 'Refresh',
            formBind: true,
            handler: function () {
                const formData = this.up('panel').getValues();
                if (
                    formData.data_type && formData.from_date && formData.to_date
                ) {
                    const tabPanel = Ext.ComponentQuery.query('tabpanel#centerPanel')[0];
                    const cartesianCharts = tabPanel.query('cartesian');
                    Ext.Array.each(cartesianCharts, function (cartesianChart) {
                        cartesianChart.getStore().load({
                            params: formData,
                            callback: function (records, operation, success) {

                            },
                            scope: this
                        });;
                    }, this);

                }
            }
        }],
    }]
});

Sencha Ext JS - 如何在选择日期后刷新选项卡？

Sencha Ext JS - how to refresh the Tabs after date picking?

model-view-controller

controller

extjs

sencha-touch