问题描述
我有一个任务要设计一个控件的大小ComboBox(GXT)与多选功能。我试图设置CheckBoxListView使用setView的ComboBox,但似乎没有工作。如果有任何人可以指导我,如果有任何方式使用GXT框架我可以实现这个?
PS:我发现一个组件XComboBox在sencha论坛
>解决方案
感谢@smiletolead为您的指导,我发现了一个解决方案,通过集成Dialog与CheckBoxListView和TriggerField类。
完整的代码列表..
package com.ui.test.client;
import java.util.List;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.WindowEvent;
import com.extjs.gxt.ui.client.event.WindowListener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.CheckBoxListView;
import com.extjs.gxt.ui.client.widget.Dialog;
import com.extjs.gxt.ui.client.widget.form.TriggerField;
import com.extjs.gxt.ui.client.widget.layout.FillLayout;
import com.google.gwt.user.client.Element;
public class MultiSelectComboBox extends TriggerField {
private Dialog checkBoxListHolder;
private CheckBoxListView listView;
private ListStore store;
private String delimiter =,;
private boolean readOnly;
public MultiSelectComboBox(){
store = new ListStore();
listView = new CheckBoxListView();
}
@Override
protected void onTriggerClick(ComponentEvent ce){
super.onTriggerClick(ce);
if(readOnly){
return;
}
checkBoxListHolder.setSize(getWidth(),200);
listView.setWidth(getWidth());
checkBoxListHolder.setPosition(getAbsoluteLeft(),
getAbsoluteTop()+ getHeight());
if(checkBoxListHolder.isVisible()){
checkBoxListHolder.hide();
}
else {
checkBoxListHolder.show();
}
}
@Override
protected void onRender(Element target,int index){
super.onRender(target,index);
checkBoxListHolder = new Dialog();
checkBoxListHolder.setClosable(false);
checkBoxListHolder.setHeaderVisible(false);
checkBoxListHolder.setFooter(false);
checkBoxListHolder.setFrame(false);
checkBoxListHolder.setResizable(false);
checkBoxListHolder.setAutoHide(false);
checkBoxListHolder.getButtonBar()。setVisible(false);
checkBoxListHolder.setLayout(new FillLayout());
checkBoxListHolder.add(listView);
listView.setStore(store);
checkBoxListHolder.addWindowListener(new WindowListener(){
@Override
public void windowHide(WindowEvent we){
setValue(parseCheckedValues(listView)) ;
}
});
}
private String parseCheckedValues(CheckBoxListView checkBoxView){
StringBuffer buf = new StringBuffer
if(checkBoxView!= null){
List selected = checkBoxView.getChecked();
int index = 1,len = selected.size();
for(D c:selected){
buf.append(c.get(listView.getDisplayProperty()));
if(index getListView(){
return listView;
}
public void setListView(CheckBoxListView listView){
this.listView = listView;
}
public ListStore getStore(){
return store;
}
public void setStore(listStore store){
this.store = store;
}
public String getDelimiter(){
return delimiter;
}
public void setDelimiter分隔符){
this.delimiter = delimiter;
}
public boolean isReadOnly(){
return readOnly;
}
public void setReadOnly(boolean readOnly){
this.readOnly = readOnly;
}
}
代码已在这里解释...
谢谢!
I have a task to design a control of size ComboBox (GXT) with Multi-select feature. I tried to set CheckBoxListView using setView of ComboBox but did not seemed to work. Can anybody please guide me if there is any way using the GXT framework I can achieve this?
PS: I found a component called XComboBox in sencha forum (java class, source code) which works good, but cant be used as its under GNU GPL License
Thanks in advance!
Thanks @smiletolead for your guidance, I found a solution by integrating Dialog with CheckBoxListView and TriggerField class.
The complete code listing is..
package com.ui.test.client;
import java.util.List;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.WindowEvent;
import com.extjs.gxt.ui.client.event.WindowListener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.CheckBoxListView;
import com.extjs.gxt.ui.client.widget.Dialog;
import com.extjs.gxt.ui.client.widget.form.TriggerField;
import com.extjs.gxt.ui.client.widget.layout.FillLayout;
import com.google.gwt.user.client.Element;
public class MultiSelectComboBox extends TriggerField {
private Dialog checkBoxListHolder;
private CheckBoxListView listView;
private ListStore store;
private String delimiter = ",";
private boolean readOnly;
public MultiSelectComboBox() {
store = new ListStore();
listView = new CheckBoxListView();
}
@Override
protected void onTriggerClick(ComponentEvent ce) {
super.onTriggerClick(ce);
if(readOnly) {
return;
}
checkBoxListHolder.setSize(getWidth(), 200);
listView.setWidth(getWidth());
checkBoxListHolder.setPosition(getAbsoluteLeft(),
getAbsoluteTop() + getHeight());
if(checkBoxListHolder.isVisible()) {
checkBoxListHolder.hide();
}
else {
checkBoxListHolder.show();
}
}
@Override
protected void onRender(Element target, int index) {
super.onRender(target, index);
checkBoxListHolder = new Dialog();
checkBoxListHolder.setClosable(false);
checkBoxListHolder.setHeaderVisible(false);
checkBoxListHolder.setFooter(false);
checkBoxListHolder.setFrame(false);
checkBoxListHolder.setResizable(false);
checkBoxListHolder.setAutoHide(false);
checkBoxListHolder.getButtonBar().setVisible(false);
checkBoxListHolder.setLayout(new FillLayout());
checkBoxListHolder.add(listView);
listView.setStore(store);
checkBoxListHolder.addWindowListener(new WindowListener(){
@Override
public void windowHide(WindowEvent we) {
setValue(parseCheckedValues(listView));
}
});
}
private String parseCheckedValues(CheckBoxListView checkBoxView) {
StringBuffer buf = new StringBuffer();
if(checkBoxView != null) {
List selected = checkBoxView.getChecked();
int index = 1, len = selected.size();
for(D c : selected) {
buf.append(c.get(listView.getDisplayProperty()));
if(index getListView() {
return listView;
}
public void setListView(CheckBoxListView listView) {
this.listView = listView;
}
public ListStore getStore() {
return store;
}
public void setStore(ListStore store) {
this.store = store;
}
public String getDelimiter() {
return delimiter;
}
public void setDelimiter(String delimiter) {
this.delimiter = delimiter;
}
public boolean isReadOnly() {
return readOnly;
}
public void setReadOnly(boolean readOnly) {
this.readOnly = readOnly;
}
}
The code has been explained here...http://bhat86.blogspot.com/2012/02/gxt-comobobox-with-multi-select-feature.html
Thank you!
这篇关于GXT - 具有多选功能的ComoboBox的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!