mask() still not block keyboard - howto block it?

[Arno.Nyhm]

if i use mask() then the component is visible blocked by setting css style.

mouseclicks are also blocked because a div with the blocking message is over the object.


BUT: the keybord is not blocked.


example:

if you have a grid and on each rowchange you make a rpc call.

i like to block the grid for this. but now if i have a mask over it i can still hit the cursor down and my rpc calls are called many times.

but i like to block the grid until the rpc call is ready.


is there a way to full block the components?

[sven]

You can disableevents for example

[Arno.Nyhm]

http://www.extjs.com/deploy/gxtdocs/com/extjs/gxt/ui/client/widget/Component.html#disableEvents%28boolean%29

if i do this on a grid, then the keydown is shown as "scroll down" like with the mouse scroll wheel.


mybe this is gone i mask and disable the full application - how i get the Body as Component so i can use the disableEvents on it?

[sven]

That is a default browser behaviour and is not linked to an event directly.

You can, when a keylistener to the component and stop all key events also.

[Arno.Nyhm]

i try to make a general full application blocking for every thing.

- mask it
- disable all keybord events

but still i dont get this working :-(


i try it with the viewport, but then it not mask my windows i created with "new Window ... "

is there some one stroke solution for blocking all?

it looks i can disable mouse and keyboard with this GWT stuff.






import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.Event.NativePreviewEvent;
import com.google.gwt.user.client.Event.NativePreviewHandler;

[...]

boolean disableEvents = false;


final NativePreviewHandler handler = new NativePreviewHandler() {

@Override
public void onPreviewNativeEvent(NativePreviewEvent event) {
if (disableEvents) {
event.cancel();
}

}
};
Event.addNativePreviewHandler(handler);

// on start of my RPC call
disableEvents = true;

// on end of my RPC call
disableEvents = false;


but still i have the problem, that the mask not mask all.


it mask the background, but not mask the current open window.


i try this things:



1) get the body from dom:


XDOM.getBody().getmask("a very long text to see it :-)");2) get the Rootpanel



El.fly(RootPanel.getBodyElement()).mask("a very long text to see it :-)");3) get the viewport (getViewport() is a static method to geht the viewport i have created)


ForumThreadMaskIt.getViewport().mask("a very long text to see it :-)");



and now the big question:
how i can apply a mask over ALL elements i see?

[sven]

simple adjust the zindex of the mask to be over everything.

[Arno.Nyhm]

i can do this general in css so it is for all masks or only in this case?

my css:

i added also a cursor wait


.ext-el-mask {
z-index: 100000;
cursor:wait;
}
.ext-el-mask-msg {
z-index: 100001;
cursor:wait;
}

just for info - my testcode:




package com.mycompany.myapplication.client.customer.test;

import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.Style.SelectionMode;
import com.extjs.gxt.ui.client.core.XDOM;
import com.extjs.gxt.ui.client.data.BaseModel;
import com.extjs.gxt.ui.client.event.BaseEvent;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.GridEvent;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.event.SelectionChangedEvent;
import com.extjs.gxt.ui.client.event.SelectionChangedListener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Info;
import com.extjs.gxt.ui.client.widget.Text;
import com.extjs.gxt.ui.client.widget.Window;
import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
import com.extjs.gxt.ui.client.widget.grid.Grid;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.Event.NativePreviewEvent;
import com.google.gwt.user.client.Event.NativePreviewHandler;
import com.google.gwt.user.client.Timer;
import java.util.ArrayList;
import java.util.List;

/**
*
* @author anonym
*/
public class LayoutClass8MaskingSample extends Window {

boolean disableEvents = false;

public LayoutClass8MaskingSample() {
createWindow();
}

private void createWindow() {
setHeading("Header");
setWidth(600);


List<ColumnConfig> configs = new ArrayList<ColumnConfig>() {

{
add(new ColumnConfig() {

{
setHeader("ID");
setId("id");
setWidth(20);
}
});
add(new ColumnConfig() {

{
setHeader("Name");
setId("name");
}
});
}
};

ColumnModel cm = new ColumnModel(configs);

ListStore<Pair> store = new ListStore<Pair>();
store.add(getPairs());

final Grid<Pair> grid = new Grid<Pair>(store, cm);
grid.setAutoExpandColumn("name");
grid.setBorders(true);
grid.setStripeRows(true);

ContentPanel cp = new ContentPanel();
cp.setBodyBorder(false);
cp.setHeading("Basic Grid");
cp.setButtonAlign(HorizontalAlignment.CENTER);
cp.setLayout(new FitLayout());
cp.setSize(600, 300);
cp.add(grid);

setLayout(new FitLayout());
add(cp);



grid.addListener(Events.CellDoubleClick, new Listener<BaseEvent>() {

public void handleEvent(BaseEvent be) {

// Test for masking content on a modal window.

GridEvent ge = (GridEvent) be;
Info.display("Grid", "Doubleclick on " + ge.getRowIndex() + "/" + ge.getColIndex());
new InfoWindow() {

{
setModal(true);
show();
}
};

}
});

grid.getSelectionModel().setSelectionMode(SelectionMode.SINGLE);



final NativePreviewHandler handler = new NativePreviewHandler() {

@Override
public void onPreviewNativeEvent(NativePreviewEvent event) {
if (disableEvents) {
event.cancel();
}

}
};
Event.addNativePreviewHandler(handler);

grid.getSelectionModel().addSelectionChangedListener(new SelectionChangedListener<Pair>() {

@Override
public void selectionChanged(SelectionChangedEvent<Pair> se) {

Info.display("Grid", "selection change selected " + se.getSelection().size() + " item " + (se.getSelectedItem() == null ? "none" : se.getSelectedItem().toString()));

XDOM.getBodyEl().mask("a very long text to see it :-)");
// El.fly(RootPanel.getBodyElement()).mask("a very long text to see it :-)");
// ForumThreadMaskIt.getViewport().mask("a very long text to see it:-)");

disableEvents = true;

Timer timer = new Timer() {

@Override
public void run() {
Info.display("Grid", "mask removed");

// El.fly(RootPanel.get().getBodyElement()).unmask();
// ForumThreadMaskIt.getViewport().unmask();
XDOM.getBodyEl().unmask();

disableEvents = false;
}
};
timer.schedule(2000);
}
});




}

public List<Pair> getPairs() {
List<Pair> pairs = new ArrayList<Pair>();
for (int i = 1; i < 20; i++) {
pairs.add(new Pair("" + i, new Character((char) (i + 64)).toString()));

}
return pairs;

}

public class Pair extends BaseModel {

private static final long serialVersionUID = 1L;

public Pair(String id, String name) {
setId(id);
setName(name);
}

public void setId(String id) {
set("id", id);
}

public String getId() {
return get("id");
}

public void setName(String name) {
set("name", name);
}

public String getName() {
return get("name");
}

@Override
public String toString() {
return getName();
}
}

public class InfoWindow extends Window {

public InfoWindow() {

add(new Text("Hello!"));

}
}
}


i extracted the blocking thing into a own class:



ApplicationMask.java
http://www.extjs.com/forum/showthread.php?t=85897