onClick Open Panels exclusively

Question

I have created two buttons in a panel :

{
        xtype: 'button',
        width: 196,
        height: 29,
        hidden: false,
        text: "button1",
        glyph: 'ab123@FontAwesome',
        handler: 'onClick1',
        reference: 'button1Click',
        cls: 'buttons1Cls'
    }, {
        xtype: 'button',
        width: 196,
        height: 29,
        hidden: false,
        text: "button2",
        glyph: 'ab123@FontAwesome',
        handler: 'onClick2',
        reference: 'button2Ref',
        cls: 'buttons2Cls'
    }

Each binded like shown to a different handler displaying different views like so :

onClick1: function () {
                    Ext.create('Mine.view.BaseWindow1', {
                        title: "panel1",
                        items: {
                            xtype: 'view1'
                        }
                    }).show();
}

And

onClick2: function () {
                    Ext.create('Mine.view.BaseWindow2', {
                        title: "panel2",
                        items: {
                            xtype: 'view2'
                        }
                    }).show();
}

My questions are how to make the panel1 and panel2 display exclusively :

if one panel is open and a user clicks on the second button the first panel closes first for the second to open (toggling panels)
one panel opens once (even in the case of a double click on the same button)

What i want is not a card layout solution but rather a solution where i can open centered windows individually on button click.

score 0 · Answer 1 · answered Nov 25 '20 at 20:14

0

This is a card layout or tab panel. The tab panel uses the card layout and gives you tabs.

These examples are the modern toolkit but also available in the classic going back to at least version 3.

Kitchen sink example of card layout. Kitchen sink example of tab layout

answered Nov 25 '20 at 20:14

mcg1103

678
1
4
9

sorry for not being clearer, but on buttons clicks a window (extending `Ext.window.Window`) in the middle of the screen displays, so it is not in any way a card layout nor tabs cases, i was thinking of checking opened window through a JS variable or smth. – Nov 25 '20 at 21:47
So dialog boxes. You are using extjs 6 classic? They floated windows? So on a toolbar if you click one button a dialog opens. If you click the other the first dialog closes and another opens? – mcg1103 Nov 25 '20 at 22:51
extjs 6.2.0 classic yes, no floated windows, no but that's the behaviour i want to get. so far just open one after the other on clicks without closing each others. – Nov 25 '20 at 23:19
So it sounds like you want to have multiple windows open on the main viewport, like a dashboard. You have to create the panel (or any component) and add it to the viewport. If you just create then show it does not have a parent container. LIke this example: https://examples.sencha.com/extjs/7.3.0/examples/classic/portal/ there is an "add item" drop down on the left.... it will add a new panel to the window. – mcg1103 Nov 26 '20 at 01:10
Not exactly, what i want is one window open at a time – Nov 26 '20 at 09:25
That sounds like a card layout. – mcg1103 Nov 26 '20 at 13:36
No, please see EDIT for a better understanding of the question – Nov 26 '20 at 15:53
https://fiddle.sencha.com/#view/editor&fiddle/3aek I don't really get what you are looking for. This is just standard extjs stuff. You should spend some time with the examples and the documentation. – mcg1103 Nov 26 '20 at 16:44
This is i want to achieve except that i need a generalized solution, for 8 buttons in total, is there a config or prop or a JS solution that enables the exclusivity for many panels ? – Nov 27 '20 at 17:38
https://rb.gy/tm1m8w No there is not. There is not going to be a pre-built solution for every situation. The framework is very extensible. You can create components to meet your needs. Extjs is a set of components that are built upon each other. All the source is included, so you can see how they were built and build your own to fit your needs. – mcg1103 Nov 28 '20 at 12:34
so in this case how to handle many panels to display one at a time ? you just did that for only two, i want for eight or more. – Nov 28 '20 at 12:37
Plus using this : `window2.hide(); window1.show();` in the handler of onClick, if you click twice you will get window1 displayed twice, am i right ? – Nov 28 '20 at 12:50
Stackoverflow is not a place to request contract software written. It is a place to ask questions when you are stuck on something and have tried to solve yourself. – mcg1103 Nov 28 '20 at 14:01

onClick Open Panels exclusively

1 Answers1