PDA

View Full Version : Can I have a "popup" panel opened on clicking a button?



uhuru
27 Jan 2011, 3:00 AM
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.

AndreaCammarata
27 Jan 2011, 3:28 AM
Hi uhuru and welcome.
To do what you request look at this example I develop.



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



handler: function(btn){
popup.showBy(btn);
}


Hope this helps.

uhuru
28 Jan 2011, 1:21 AM
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:


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.

uhuru
31 Jan 2011, 12:26 AM
Hi again. I'm trying to add the "close button" like in your example, with:

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?

AndreaCammarata
31 Jan 2011, 12:45 AM
Hi uhuru.
You have to set the toolbar configuration of your NestedList.



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


Hope this helps.

uhuru
31 Jan 2011, 12:56 AM
Hi uhuru.
You have to set the toolbar configuration of your NestedList.



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.

usmanprivacy
30 Sep 2011, 5:46 AM
Hey andreacammarata (http://www.sencha.com/forum/member.php?77762-andreacammarata)
http://www.sencha.com/forum/images/statusicon/user-offline.png

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

AndreaCammarata
30 Sep 2011, 5:52 AM
Hi,


...
If you want to attach the popup to the button taht open it just change the button handler in this way



handler: function(btn){
popup.showBy(btn);
}




And remember to remove the "centered" config param from the panel.

Hope this helps.

hjeDK
20 Apr 2012, 3:53 AM
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?