PDA

View Full Version : Dialog as popup



gxtnewbie
29 Jan 2010, 3:06 AM
I have a scenario:

A viewport with some panels and on an action I'm showing a dialog.
On selecting collapse of the dialog, i'm adding the collapsed dialog to one of the panel in the viewport. On expanding the dialog I need the dialog to be removed from the panel and should be again popped up as a dialog (popup) in the center of the viewport (i.e., on top of the viewport)

How can this be accomplished. Any suggestions will be of great help.

sokulkarni
29 Jan 2010, 3:17 AM
Please post your code.

gxtnewbie
29 Jan 2010, 3:24 AM
Code is quite exhaustive because this is just a part of what I'm doing.
I will explain the steps involved in this if that is enough.

A view port has a border layout
On clicking a button, a dialog is popped up.
On selecting the collapse (Event: Events.Collapse) of the dialog i am adding this dialog to a panel in the viewport.
Again on selecting the expand of the dialog i am removing the dialog from that panel.
Now the dialog has to be again popped up back as a dialog.

When i handle the expand event, and then say dialog.show, it is just showing up in the same panel hence i tried removing the dialog from the panel i added before. Now again how to show it as a dialog (popup) in the center (on top) of the screen

Arno.Nyhm
29 Jan 2010, 1:12 PM
it looks you like to make some floting panels which can pinned to the the viewport - like in good IDEs



but: i think nobody has the time to create the code with your description until your current state.

if you make a standalone example up to the point of your problem then i think you will find more users they will help you. but i think there is nobody is willing to code a full working example for you.

gxtnewbie
31 Jan 2010, 10:49 PM
Sample code is provided, i welcome ur suggestions

package com.test.client;

import com.extjs.gxt.ui.client.event.BaseEvent;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Dialog;
import com.extjs.gxt.ui.client.widget.Info;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.layout.CenterLayout;
import com.extjs.gxt.ui.client.widget.layout.FlowLayout;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class Test implements EntryPoint
{

public static Viewport viewport = new Viewport();
private ContentPanel cp;
private Dialog dlg;

@Override
public void onModuleLoad()
{
Viewport vw = new Viewport();
vw.setLayout(new CenterLayout());

cp = new ContentPanel();
cp.setLayout(new FlowLayout());
cp.setLayoutOnChange(true);
cp.setCollapsible(true);
cp.setAutoWidth(true);
cp.setHeight(500);
cp.setHeaderVisible(true);
cp.setHeading("Test Dialog as popup");
Button btn = new Button("Click");
btn.addSelectionListener(new SelectionListener<ButtonEvent>() {

@Override
public void componentSelected(ButtonEvent ce)
{
//The dialog pops up here on click
dlg.show();
}
});
cp.add(btn);

dlg = new Dialog();
dlg.setSize(400, 900);
dlg.setCollapsible(true);
dlg.addListener(Events.Collapse, new Listener<BaseEvent>() {

@Override
public void handleEvent(BaseEvent be)
{
Dialog wnd = (Dialog) be.getSource();
//Added the collapsed dialog to the content panel
cp.add(wnd);
}
});

dlg.addListener(Events.BeforeExpand, new Listener<BaseEvent>() {

@Override
public void handleEvent(BaseEvent be)
{
Dialog wnd = (Dialog) be.getSource();
//Collapsed panel is removed from the panel
cp.remove(wnd);
//Need to show this dialog as a popup back again
//But wnd.show() doesn't show the dialog, it may be hidded or something
//Please suggest me how to show this dialog as a popup again
wnd.show();
wnd.setActive(true);
wnd.center();
wnd.focus();
}
});

dlg.addListener(Events.Expand, new Listener<BaseEvent>() {

@Override
public void handleEvent(BaseEvent be)
{
Info.display("Dlg", "Expanded");
}
});

vw.add(cp);
RootPanel.get().add(vw);

}
}