How to align windows side by side?

Question

I have two windows i.e Chat window and feedback window, I want to show them side by side on button click, for eg if chat is open and user clicks on feedback button then it must tile horizontally. Here's what i have tried so far

var tiledWindows = Ext.create({
            xtype: 'container',
            autoHeight: true,
            autoWidth: true,
            frame: true,
            //layout: { type: 'hbox', align: 'stretch', pack: 'end' },
            layout:'column',
            items: [win, chatWindow]
        });

the win and chatWindow both have their unique styles. Please help me go about it

Answer 1

Do you need two seperate Windows or would it be enough to have two Panels inside of a window?

In the first scenario you could just create a simple window and align panels using hbox.

Here is a working sencha fiddle example: sencha fiddle

I also added code to "simulate" the ability to show/hide the feedback panel.

Answer 2

To do what you want you would need to know the position of one window so the other could be positioned next to it. Then use showAt method to position second window or use showAt method to position both windows. showAt

What I have done in the past with a window that is already rendered is this:

let firstWin = Ext.create('window').show();
let secondWin = Ext.create('window');
secondWin.showAt(firstWin.getX() + firstWin.getWidth(), firstWin.getY());

Note that this code is not functional but should give you an idea of how you could solve your problem using showAt method.