-
FEATURED COMPONENTS
First time here? Check out the FAQ!
Hi!
I wanna design a listbox where I can add/delete items using toolbar buttons and ctrl keys both.
My aim is navigate through a listbox with up/down arrow keys, do insert/delete (in both ways) and after insert/delete is executed to be focused on a listbox and can navigate through it again.
It's sample:
<window id="testWindow" title="Test Window" border="normal" width="50%" height="50%" sizable="true" closable="true" mode="overlapped" maximizable="true" minimizable="true"> <button label="Add" onClick="add()" /> <button label="Delete" onClick="delete()" /> <separator bar="true" /> <zscript> <![CDATA[ // data init List data = new ArrayList(); for(int i; i < 21; i++) { data.add("Option" + i); } ListModel modelList = new ListModelList(data); // listbox's listeners void addListboxListeners() { // ctrl keys listener testListbox.addEventListener(Events.ON_CTRL_KEY, new org.zkoss.zk.ui.event.EventListener() { public void onEvent(Event event) throws Exception { switch (((KeyEvent) event).getKeyCode()) { case KeyEvent.INSERT : add(); break; case KeyEvent.DELETE : delete(); break; } } }); } // add new option void add() { int selectedIndex = testListbox.getSelectedIndex(); if (selectedIndex != -1) { ((ListModelList) testListbox.getModel()).add(selectedIndex, "Added option"); testListbox.setSelectedIndex(selectedIndex); testListbox.focus(); } else { alert("No selected item."); } } // delete selected option void delete() { int selectedIndex = testListbox.getSelectedIndex(); if (selectedIndex != -1) { ((ListModelList) testListbox.getModel()).remove(selectedIndex); if (selectedIndex == 0) { if (testListbox.getItems().size() != 0) { testListbox.setSelectedIndex(0); } } else { testListbox.setSelectedIndex(selectedIndex - 1); } testListbox.focus(); } else { alert("No selected item."); } } ]]> </zscript> <listbox id="testListbox" model="${modelList}" rows="10" ctrlKeys="#ins#del" onCreate="addListboxListeners()" /> </window>
The problem occurs when I delete listbox item using Del ctrl key. As I see the listbox is focused, selected item is set but I cann't navigate through the listbox with up/down arrow key. But when I use Delete toolbar button such effect is absent - all works as I expect.
Please do the following steps with the sample to catch this effect:
1. Select any item.
2. Add an item with toolbat button Add, try navigate with arrow keys after that.
3. Delete an item with toolbat button Delete, try navigate with arrow keys after that.
4. Add an item with ctrl key Insert, try navigate with arrow keys after that.
5. Delete an item with ctrl key Delete, try navigate with arrow keys after that - it should be impossible.
ZK version: 5.0.2
Browser: IE 8, Chrome 5.x
Thanks in advise,
Alexey
UP
Any suggestion?
Do I use focus and ctrl keys in the right way?
Or is another technigue to develop the listbox which could be full controlled by keys without mouse?
Thanks!
Alexey
Asked: 2010-06-23 04:04:39 +0800
Seen: 999 times
Last updated: Feb 04 '16