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

    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
    570
    Vote Rating
    181
    Answers
    62
    Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold

      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
    570
    Vote Rating
    181
    Answers
    62
    Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold

      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
    570
    Vote Rating
    181
    Answers
    62
    Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold

      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