1. #1
    Sencha User
    Join Date
    Jan 2011
    Posts
    17
    Vote Rating
    0
    uhuru is on a distinguished road

      0  

    Question Can I have a "popup" panel opened on clicking a button?

    Can I have a "popup" panel opened on clicking a button?


    Hi. First of all I have to say i'm new to Sencha.

    I have a Panel with a toolbar docked on top of it. What I need to do is to display a new panel (like a popup window) containing some kind of list (nested list for example) when I click a toolbar button. I've tried to find any example in the forum.. nothing found. Is it possible to do something like this? Does anyone know any example? Thank you.

  2. #2
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,395
    Vote Rating
    23
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      1  

    Default


    Hi uhuru and welcome.
    To do what you request look at this example I develop.

    Code:
    Ext.setup({
        onReady: function() {
    
            var pnlMain = new Ext.Panel({
                fullscreen: true,
                html: 'This is an example',
                dockedItems: [{
                    xtype: 'toolbar',
                    title: 'Example',
                    items: [{
                        text: 'Show PopUp',
                        handler: function(){
                            popup.show();
                        }
                    }]
                }]
            });
            
            var popup = new Ext.Panel({
                floating: true,
                centered: true,
                modal: true,
                width: 300,
                height: 400,
                styleHtmlContent: true,
                html: 'Hello! I\'m a PopUp',
                dockedItems: [{
                    xtype: 'toolbar',
                    title: 'PopUp',
                    items: [{
                        xtype: 'spacer'
                    },{
                        text: 'Close',
                        handler: function(){
                            popup.hide();
                        }
                    }]
                }]
            });
        }
    });
    This will show you a modal popup in the center of your screen.
    If you want to attach the popup to the button taht open it just change the button handler in this way

    Code:
    handler: function(btn){
         popup.showBy(btn);
    }
    Hope this helps.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  3. #3
    Sencha User
    Join Date
    Jan 2011
    Posts
    17
    Vote Rating
    0
    uhuru is on a distinguished road

      0  

    Default


    Thank you, that's what I was looking for.

    Now I have another question. I've tried to add as an item the nested list exemple on SenchaTouch API.

    I've modified the popup panel like this:

    Code:
            var popup = new Ext.Panel({
                floating: true,
                centered: true,
                modal: true,
                fullscreen: true,
                dockedItems: [{
                    xtype: 'toolbar',
                    title: 'Categorias',
                    items: [{
                        xtype: 'spacer'
                    },{
                        text: 'Close',
                        handler: function(){
                            popup.hide();
                        }
                    }],
    				items: [nestedList]
                }]
            });
    If I try to add a button ( items: [{xtype: 'button'}]) it works perfectly but not with nestedList.
    Any ideas?

    EDIT: Since NestedList is a sub-class of Panel, the same method ".show()" worked.

  4. #4
    Sencha User
    Join Date
    Jan 2011
    Posts
    17
    Vote Rating
    0
    uhuru is on a distinguished road

      0  

    Default


    Hi again. I'm trying to add the "close button" like in your example, with:
    Code:
    var nestedList = new Ext.NestedList({
                displayField: 'text',
                floating: true,
                centered: true,
                width: 600,
                height: 400,
                modal: true,
                title: 'categories',
                dockedItems: [{
                        dock: 'top',
                        text: 'Cerrar',
                        width: 30,
                        heigth: 30,
                        handler: function(){
                            nestedList.hide();
                        }
                    }],
                store: store
            });
    but it doesn't work. Is it possible to have buttons in the top of a nested list?

  5. #5
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,395
    Vote Rating
    23
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Hi uhuru.
    You have to set the toolbar configuration of your NestedList.

    Code:
    var nestedList = new Ext.NestedList({
        fullscreen: true,
        displayField: 'text',
        store: store,
        toolbar: {
            title: 'Example',
            items: [{
                text: 'Cerrar',
                handler: function(){
                    nestedList.hide();
                }
            }]
        }
    });
    Hope this helps.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  6. #6
    Sencha User
    Join Date
    Jan 2011
    Posts
    17
    Vote Rating
    0
    uhuru is on a distinguished road

      0  

    Default


    Quote Originally Posted by andreacammarata View Post
    Hi uhuru.
    You have to set the toolbar configuration of your NestedList.

    Code:
    var nestedList = new Ext.NestedList({
        fullscreen: true,
        displayField: 'text',
        store: store,
        toolbar: {
            title: 'Example',
            items: [{
                text: 'Cerrar',
                handler: function(){
                    nestedList.hide();
                }
            }]
        }
    });
    Hope this helps.

    Thanks again, very helpful.

  7. #7
    Sencha User
    Join Date
    Aug 2011
    Posts
    4
    Vote Rating
    0
    usmanprivacy is on a distinguished road

      0  

    Default


    Hey andreacammarata


    I want to have the popup centered/directed to the tapped item, what should be changed?

  8. #8
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,395
    Vote Rating
    23
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Hi,

    Quote Originally Posted by andreacammarata View Post
    ...
    If you want to attach the popup to the button taht open it just change the button handler in this way

    Code:
    handler: function(btn){
         popup.showBy(btn);
    }
    And remember to remove the "centered" config param from the panel.

    Hope this helps.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  9. #9
    Sencha User
    Join Date
    Apr 2012
    Location
    Denmark
    Posts
    71
    Vote Rating
    1
    hjeDK is on a distinguished road

      1  

    Default


    I'm sorry to bump this old thread but I'm new to Sencha Touch and this is just what I need, but how do I adapt it to Sencha Touch 2 with the folder structure made by the new SDK Tool?
    I have the popup panel in an Ext.define by itself.
    What is the correct way to do it?

Similar Threads

  1. Replies: 5
    Last Post: 2 Jan 2014, 9:08 AM
  2. Replies: 8
    Last Post: 11 Sep 2008, 9:00 AM
  3. Replies: 5
    Last Post: 25 Feb 2008, 4:15 AM
  4. Combobox values are lost after clicking "back" button
    By AdamDawes in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 10 Jul 2007, 3:28 AM
  5. Replies: 4
    Last Post: 13 May 2007, 4:40 PM

Thread Participants: 3

Tags for this Thread