Sencha chart tbar를 사용하여 상단 오른쪽에 버튼 추가하기

tbar를 사용하면 chart의 상단에 버튼을 추가할 수 있음

Ext.onReady(function () {
    Ext.create('Ext.container.Viewport', {
        layout: 'fit',
        items: [
            {
                xtype: 'panel',
                title: 'Chart with Functional Buttons',
                layout: 'vbox',
                tbar: [
                    {
                        text: 'Refresh Data',
                        iconCls: 'x-fa fa-refresh',
                        handler: function () {
                            const chart = Ext.getCmp('lineChart');
                            const store = chart.getStore();
                            store.loadData(generateRandomData());
                            Ext.Msg.alert('Info', 'Data refreshed successfully!');
                        },
                    },
                    {
                        text: 'Export Chart',
                        iconCls: 'x-fa fa-download',
                        handler: function () {
                            Ext.Msg.alert('Info', 'Export functionality not implemented yet!');
                        },
                    },
                ],
                items: [
                    {
                        xtype: 'cartesian',
                        id: 'lineChart',
                        width: 600,
                        height: 400,
                        insetPadding: 40,
                        store: {
                            fields: ['month', 'data1', 'data2'],
                            data: generateRandomData(),
                        },
                        axes: [
                            {
                                type: 'numeric',
                                position: 'left',
                                title: 'Values',
                                grid: true,
                            },
                            {
                                type: 'category',
                                position: 'bottom',
                                title: 'Months',
                                grid: true,
                            },
                        ],
                        series: [
                            {
                                type: 'line',
                                title: 'Dataset 1',
                                xField: 'month',
                                yField: 'data1',
                                marker: { type: 'circle', size: 5 },
                                style: { stroke: '#f00', lineWidth: 2 },
                            },
                            {
                                type: 'line',
                                title: 'Dataset 2',
                                xField: 'month',
                                yField: 'data2',
                                marker: { type: 'triangle', size: 5 },
                                style: { stroke: '#00f', lineWidth: 2 },
                            },
                        ],
                        legend: { docked: 'top' },
                    },
                ],
            },
        ],
    });

    function generateRandomData() {
        return [
            { month: 'Jan', data1: Math.random() * 100, data2: Math.random() * 100 },
            { month: 'Feb', data1: Math.random() * 100, data2: Math.random() * 100 },
            { month: 'Mar', data1: Math.random() * 100, data2: Math.random() * 100 },
            { month: 'Apr', data1: Math.random() * 100, data2: Math.random() * 100 },
            { month: 'May', data1: Math.random() * 100, data2: Math.random() * 100 },
        ];
    }
});