1. #1
    Sencha User
    Join Date
    Jul 2012
    Location
    France
    Posts
    159
    Vote Rating
    3
    Answers
    2
    Elfayer is on a distinguished road

      0  

    Default Unanswered: How to open/close or show/hide a panel from a button

    Hi,

    I tried some things, but it don't want to work.

    I have that on my controller :
    Code:
    Ext.define('DSK.controller.desktop', {
        extend: 'Ext.app.Controller',
    
        views: ['desktop.Taskbar', 'desktop.StartMenu'],
    
        init: function () {
            var status = false;
            var menu = Ext.create('DSK.view.desktop.StartMenu');
    
            menu.hide();
            this.control({
                '#startButton': {
                    click: this.openMenu
                }
            })
        },
        openMenu: function () {
            if (status == false) {
                menu.show();
                status = true;
            }
            else {
                menu.hide();
                status = false;
            }
        }
    });
    With that code, when i click on the button it doesn't do anything.

  2. #2
    Sencha User Tim Toady's Avatar
    Join Date
    Feb 2010
    Location
    Pennsylvania
    Posts
    580
    Vote Rating
    268
    Answers
    62
    Tim Toady has much to be proud of Tim Toady has much to be proud of Tim Toady has much to be proud of Tim Toady has much to be proud of Tim Toady has much to be proud of Tim Toady has much to be proud of Tim Toady has much to be proud of Tim Toady has much to be proud of

      0  

    Default

    The first thing I notice is that the variable status is not in scope in your openMenu function. I would expect it to throw an error.

  3. #3
    Sencha User
    Join Date
    Jul 2012
    Location
    France
    Posts
    159
    Vote Rating
    3
    Answers
    2
    Elfayer is on a distinguished road

      0  

    Default

    Now i have :

    Code:
    Ext.define('DSK.controller.desktop', {
        extend: 'Ext.app.Controller',
    
        views: ['desktop.Taskbar', 'desktop.StartMenu'],
    
        init: function () {
            var menu = Ext.create('DSK.view.desktop.StartMenu');
    
            menu.setVisible(false);
            this.control({
                '#startButton': {
                    click: this.openMenu
                }
            })
        },
        openMenu: function () {
            if (menu.isVisible() == false) {
                menu.setVisible(true);
            }
            else {
                menu.setVisible(false);
            }
        }
    });
    Same problem.

  4. #4
    Sencha User Tim Toady's Avatar
    Join Date
    Feb 2010
    Location
    Pennsylvania
    Posts
    580
    Vote Rating
    268
    Answers
    62
    Tim Toady has much to be proud of Tim Toady has much to be proud of Tim Toady has much to be proud of Tim Toady has much to be proud of Tim Toady has much to be proud of Tim Toady has much to be proud of Tim Toady has much to be proud of Tim Toady has much to be proud of

      0  

    Default

    Can you share the code for your StartMenu component? Is this based on the Extjs desktop example?

  5. #5
    Sencha User
    Join Date
    Jul 2012
    Location
    France
    Posts
    159
    Vote Rating
    3
    Answers
    2
    Elfayer is on a distinguished road

      0  

    Default

    Yes, I'm trying to do something like the Web desktop example, but i didn't find source codes, or help.

    StartMenu.js :

    Code:
    Ext.define('DSK.view.desktop.StartMenu', {
        extend: 'Ext.panel.Panel',
        alias: 'widget.startMenu',
    
        layout: 'hbox',
        title: 'Menu',
        width: 300,
        height: 300,
        items: [{
            xtype: 'menu',
            width: 200,
            height: 300,
            floating: false,
            items: [
            { text: 'regular item 1' },
            { text: 'regular item 2' },
            { text: 'regular item 3' }
            ]},
            {
            xtype: 'menu',
            showSeparator: false,
            width: 100,
            height: 300,
            floating: false,
            items: [
            { text: 'Settings' },
            {xtype: 'menuseparator'},
            { text: 'Logout' }
            ]
        }],
        renderTo: Ext.getBody()
    });

  6. #6
    Sencha User Tim Toady's Avatar
    Join Date
    Feb 2010
    Location
    Pennsylvania
    Posts
    580
    Vote Rating
    268
    Answers
    62
    Tim Toady has much to be proud of Tim Toady has much to be proud of Tim Toady has much to be proud of Tim Toady has much to be proud of Tim Toady has much to be proud of Tim Toady has much to be proud of Tim Toady has much to be proud of Tim Toady has much to be proud of

      1  

    Default

    You can find the source code of the web desktop example in your ext folder. It is in ext/examples/desktop. The StartMenu component they defined is in the js folder. They use it as the menu property on a button to control the showing/hiding of it. You can see how they add it in TaskBar.js.

Thread Participants: 1