ZK自定義列表框組件

Question

我想用選擇模具來實現Listbox的一個非常常見的功能，這在ZK上找不到。

情況：用戶從列表框中選擇值。當選擇該值並且用戶再次打開該列表框時，我需要將模型更改爲相同的模型，但前面列出空的列表項。如果他選擇的是空值，再次模式必須改變，以相同的，但不索引0

空列表項我想喜歡寫作了很多東西：

1）從ZUL動態模型。它有效，但我想保持ZUL儘可能簡單和乾淨。

<listbox id="x" mold="select" model="@load(not empty vm.criteria[self.id].selectedItem ? 
vm.metaDataMap[self.id].model : vm.metaDataMap[self.id].modelWithEmptyValue)" 
    selectedItem="@bind(vm.criteria[self.id].selectedItem)"> 
    <listitem> 
     <listcell label="@load(each.value)" value="@load(each)" /> 
    </listitem> 
</listbox> 

2）爲我的列表框寫SelectorComposer。它沒有正常工作，因爲標籤和值有時會消失，並且它不會將該值設置爲「@bind（vm.criteria [self.id] .selectedItem）」。還有一些問題與index`es

public class ListboxComposer extends SelectorComposer<Listbox> { 
private static final long serialVersionUID = 1L; 

public ListModelList<CaseStatusEnum> status = new ListModelList<CaseStatusEnum>(CaseStatusEnum.values()); 
public ListModelList<CaseStatusEnum> statusWithEmpty = new ListModelList<CaseStatusEnum>(CaseStatusEnum.values()); 

public Listbox comp; 

public void doAfterCompose(Listbox comp) throws Exception { 
    super.doAfterCompose(comp); 
    comp.setModel(new ListModelList<CaseStatusEnum>(status)); 
    statusWithEmpty.add(0, null); 
} 

public ListModelList<CaseStatusEnum> getStatus() { 
    return status; 
} 

@Listen("onSelect = listbox") 
public void onSelect(SelectEvent<Listitem, CaseStatusEnum> evt) { 
    Listbox listbox = this.getSelf(); 
    Listitem selectedItem = listbox.getSelectedItem(); 
    int selectedIndex = selectedItem.getIndex(); 
    if (listbox.getSelectedItem().getValue() != null) { 
     listbox.setModel(statusWithEmpty); 
     if (selectedIndex >= listbox.getModel().getSize()) { 
      listbox.setSelectedIndex(listbox.getModel().getSize()-1); 
     } else { 
      listbox.setSelectedIndex(selectedIndex+1); 
      listbox.getItemAtIndex(selectedIndex+1).setLabel(selectedItem.getLabel()); 
      listbox.getItemAtIndex(selectedIndex+1).setValue(selectedItem.getValue()); 
     } 
    } else { 
     listbox.setModel(status); 
     listbox.clearSelection(); 
    } 
} 
} 

，並在我的ZUL：

<listbox id="x" mold="select" apply="lt.pathxxx.ListboxComposer" 
    model="${composer.status}" 
    selectedItem="@bind(vm.criteria[self.id].selectedItem)"> 
    <listitem> 
     <listcell label="@load(each.value)" value="@load(each)" /> 
    </listitem> 
</listbox> 

3）我甚至嘗試通過擴展列表框創建自定義組件。但我沒有做到這一點。所以基本上，我想通過擴展列表框來編寫我自己的自定義組件，它可以根據是否存在選定的項目或不存在（空白）來操縱模型？什麼是正確的方法來做到這一點？

編輯： 基本上，我需要的是

<hlayout id="x"> 
    <listbox mold="select" selectedItem="@bind(vm.criteria[self.parent.id].order)" 
     visible="@load(not empty vm.criteria[self.parent.id].order)"> 
     <listitem label="" value="" /> 
     <listitem label="Descending" value="desc" /> 
     <listitem label="Ascending" value="asc" /> 
    </listbox> 
    <listbox mold="select" selectedItem="@bind(vm.criteria[self.parent.id].order)" 
     visible="@load(empty vm.criteria[self.parent.id].order)"> 
     <listitem label="Descending" value="desc" /> 
     <listitem label="Ascending" value="asc" /> 
    </listbox> 
<hlayout> 

我需要這一切ONE列表框和模型（listItems中）必須從Java設置。也許我現在更清楚了！感謝您的迴應！

Answer 1

ZUL：

<listbox mold="select" model="@load(vm.listboxModel)" selectedItem="@bind(vm.selectedListBoxItem)" onSelect="@command('check')"> 
    <listitem> 
     <listcell label="@load(each.value)" value="@load(each)" /> 
    </listitem> 
</listbox> 

VM：

private ListModelList listData; // of course init and fill it 
private Person selectedListBoxItem; 

public ListModelList getListData() { 
    return listData; 
} 

public void setSelectedListBoxItem(Person selectedListBoxItem) { 
    this.selectedListBoxItem = selectedListBoxItem; 
} 

public Person getSelectedListBoxItem() { 
    return selectedListBoxItem; 
} 

@Command 
@NotifyChange("listData") 
public void check() { 
    if (selectedListBoxItem != null) { 
     if (listData.get(0) != null) { 
      System.out.println("added null"); 
      listData.add(0, null); 
     } 
    } else { 
     if (listData.get(0) == null) { 
      System.out.println("removed null"); 
      listData.remove(0); 
     } 
    } 
} 

編輯：更喜歡這個？沒有測試它（與System.out.println("removed null");，所以你可以檢查他做他需要做什麼。

希望這是你想要的東西（它的什麼，我明白你的問題的）。

格爾茨的寒意。