GXT - 具有多选功能的ComoboBox [英] GXT - ComoboBox with Multi select feature

问题描述

我有一个任务要设计一个控件的大小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; 
} 
 
 
} 
 
  

代码已在这里解释...
http://bhat86.blogspot.com/2012/02/gxt-comobobox-with-multi-select-feature.html

谢谢！

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！