Sencha Ext.window.Window 팝업 띄우기

부모창의 chart 정보를 그대로 뿌려주기

function showChartInPopup(chart) {
    // Clone the initial configuration of the chart
    const chartConfig = Ext.clone(chart.initialConfig);

    // Ensure the series configuration is correctly cloned
    const seriesOrigin = [].concat(chart.getSeries()); // Wrap in an array if not already
    const seriesClone = seriesOrigin.map(series => Ext.clone(series.getInitialConfig()));
    chartConfig.series = seriesClone;

    // Bind the store of the original chart to the popup chart
    //chartConfig.store = chart.getStore();

    // Create a popup window to display the chart
    Ext.create('Ext.window.Window', {
        title: 'Popup Chart',
        modal: true,
        width: 600,
        height: 400,
        layout: 'fit',
        items: [
            Ext.create('Ext.chart.CartesianChart', chartConfig)
        ],
        buttons: [
            {
                text: 'Close',
                handler: function (btn) {
                    btn.up('window').close();
                }
            }
        ]
    }).show();
}

chart 만들어서 뿌려주기

Ext.create('Ext.window.Window', {
    title: 'Popup Chart',
    modal: true,
    width: 600,
    height: 400,
    layout: 'fit',
    viewModel: {
        data: {
            chartTitle: 'Dynamic Chart Title' // Example data for binding
        }
    },
    items: [
        {
            xtype: 'cartesian',
            bind: {
                title: '{chartTitle}' // Binding to the viewModel
            },
            store: {
                fields: ['x', 'y'],
                data: [
                    { x: 1, y: 10 },
                    { x: 2, y: 20 },
                    { x: 3, y: 30 }
                ]
            },
            axes: [
                { type: 'numeric', position: 'left' },
                { type: 'category', position: 'bottom' }
            ],
            series: [
                {
                    type: 'line',
                    xField: 'x',
                    yField: 'y'
                }
            ]
        }
    ],
    buttons: [
        {
            text: 'Close',
            handler: function (btn) {
                btn.up('window').close();
            }
        }
    ]
}).show();

창 동작하는 API

const myWindow = Ext.create('Ext.window.Window', {
    title: 'My Window',
    width: 400,
    height: 300,
    collapsible: true, // Allows collapsing
    html: 'Window content here...'
});

// Show the window
myWindow.show();

// Collapse the window
myWindow.collapse();

// Expand the window
myWindow.expand();

Minimize

{
    type: 'minimize',
    tooltip: 'Minimize',
    handler: function (event, toolEl, panel) {
        const win = panel.up('window');
        if (win.collapsed) {
            win.expand(); // Restore the window if minimized
        } else {
            win.collapse(); // Minimize the window if expanded
        }
    }
}