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

Question

I have MVC app, it's a Tab Panel containing few Tabs with a chart on each, there is also a Date Picker with Refresh button, and a Combo box to choose which data source is being used for the 'Date Range'. The app currently loads the charts with all available data but the purpose is to select 1 of 3 available data sources, select a date range and refresh every chart tab by clicking a button, how do I do it?

Fiddle sample

标签： model-view-controllerextjscontrollersencha-touch

Answer 1

Something like this:

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);

                }
            }
        }],
    }]
});