ComboBoxes

GXT 中的 Combobox 选择。

参考

• com.sencha.gxt.widget.core.client.form.ComboBox Javadoc
• 自定义 ComboBox Cell - 查找有关自定义 ComboBox Cells 的更多信息。

示例

在此处的示例链接中研究源代码。

• 高级 ComboBox
• ComboBox
• 样式化 ComboBox

ComboBoxes

层次结构

• com.sencha.gxt.widget.core.client.form.TriggerField Javadoc
• com.sencha.gxt.widget.core.client.form.ComboBox Javadoc
• com.sencha.gxt.widget.core.client.form.TimeField Javadoc
• com.sencha.gxt.widget.core.client.form.SimpleComboBox Javadoc
• com.sencha.gxt.widget.core.client.form.StringComboBox Javadoc

简单字符串 ComboBox

简单的字符串组合框已准备好用于字符串列表。

• StringComboBox 示例。

    StringComboBox combo = new StringComboBox();
    combo.add("Item 1");
    combo.add("Item 2");
    combo.add("Item 3");
    combo.add("Item 4");
  

任何模型 ComboBox

任何模型 ComboBox 都适合任何类型的模型列表。

• 任何模型 ComboBox<M> 示例。

    ListStore<Company> store = new ListStore<Company>(new ModelKeyProvider<Company>() {
      @Override
      public String getKey(Company item) {
        return item.getId().toString();
      }
    });
    store.add(new Company("0", "Company 1"));
    store.add(new Company("1", "Company 2"));
    store.add(new Company("2", "Company 3"));
    store.add(new Company("3", "Company 4"));
  
    LabelProvider<Company> labelProvider = new LabelProvider<Company>() {
      @Override
      public String getLabel(Company item) {
        if (item.getName() == null) {
          return "";
        }
        return item.getName();
      }
    };
  
    ComboBox<Company> combo = new ComboBox<Company>(store, labelProvider);
  

• ComboBox<M> 示例中使用的模型。

    public class Company {
      private String id;
      private String name;
  
      public Company(String id, String name) {
        this.id = id;
        this.name = name;
      }
  
      public String getId() {
        return id;
      }
  
      public String getName() {
        return name;
      }
    }
  

常用选项

一些常用的 ComboBox 配置选项。

• com.sencha.gxt.widget.core.client.form.ComboBox - 查看上面 Javadoc 参考中的所有选项。

隐藏光标

隐藏输入中闪烁的光标。

• 示例

    combo.setEditable(false);
  

触发操作

触发器是导致组合框展开列表选择的原因。

• TriggerAction.ALL 的示例。

    ComboBox<Company> combo = new ComboBox<Company>(store, labelProvider);
    combo.setTriggerAction(TriggerAction.ALL);
  

• TriggerAction.QUERY 的示例。

    ComboBox<Company> combo = new ComboBox<Company>(store, labelProvider);
    combo.setTriggerAction(TriggerAction.QUERY);
  

最小自动完成字符数

设置最小字符数，然后自动完成展开列表。

• 示例 setMinChars(4)。

    ComboBox<Company> combo = new ComboBox<Company>(store, labelProvider);
    combo.setMinChars(4);
  

自动填充提前输入

提前输入或自动填充字符。

• setTypeAhead(true) 的示例。

ComboBoxcombo = new ComboBox(store, labelProvider); combo.setTypeAhead(true);

加载数据

设置加载器以从服务器或其他位置加载数据。以下两个示例中唯一不同的是 Proxy 接线，并且还有许多其他可能的配置。高级组合框示例 有一个更复杂的加载器示例，该示例也使用了远程查询。

• 使用 DataProxy 的 setLoader(loader) 示例。

    // The Store
    ListStore<Company> store = new ListStore<Company>(new ModelKeyProvider<Company>() {
      @Override
      public String getKey(Company item) {
        return item.getId().toString();
      }
    });
  
    // The Data proxy tells how to fetch the data
    DataProxy<ListLoadConfig, ListLoadResult<Company>> proxy = new DataProxy<ListLoadConfig, ListLoadResult<Company>>() {
      @Override
      public void load(ListLoadConfig loadConfig, Callback<ListLoadResult<Company>, Throwable> callback) {
        // A client example to show data fetching in a proxy
        final List<Company> companies = new ArrayList<Company>();
        for (int i = 0; i < 5; i++) {
          Company company = getCompany(i);
          companies.add(company);
        }
  
        ListLoadResult<Company> result = new ListLoadResultBean<Company>(companies);
        callback.onSuccess(result);
      }
    };
  
    // The Loader wiring
    final ListLoader<ListLoadConfig, ListLoadResult<Company>> loader = new ListLoader<ListLoadConfig, ListLoadResult<Company>>(proxy);
    loader.addLoadHandler(new LoadResultListStoreBinding<ListLoadConfig, Company, ListLoadResult<Company>>(store));
  
    LabelProvider<Company> labelProvider = new LabelProvider<ComboboxExampleTest.Company>() {
      @Override
      public String getLabel(Company item) {
        if (item.getName() == null) {
          return "";
        }
        return item.getName();
      }
    };
  
    ComboBox<Company> combo = new ComboBox<Company>(store, labelProvider);
    combo.setLoader(loader);
  

• 使用 RpcProxy 的 setLoader(loader) 示例。

    // The Store
    ListStore<Company> store = new ListStore<Company>(new ModelKeyProvider<Company>() {
      @Override
      public String getKey(Company item) {
        return item.getId().toString();
      }
    });
  
    // The Proxy
    RpcProxy<ListLoadConfig, ListLoadResult<Company>> proxy = new RpcProxy<ListLoadConfig, ListLoadResult<Company>>() {
      @Override
      public void load(ListLoadConfig loadConfig, final AsyncCallback<ListLoadResult<Company>> asyncCallback) {
        //rpcService.fetchData(loadConfig, asyncCallback);
      }
    };
  
    // The Loader wiring
    final ListLoader<ListLoadConfig, ListLoadResult<Company>> loader = new ListLoader<ListLoadConfig, ListLoadResult<Company>>(proxy);
    loader.addLoadHandler(new LoadResultListStoreBinding<ListLoadConfig, Company, ListLoadResult<Company>>(store));
  
    LabelProvider<Company> labelProvider = new LabelProvider<ComboboxExampleTest.Company>() {
      @Override
      public String getLabel(Company item) {
        if (item.getName() == null) {
          return "";
        }
        return item.getName();
      }
    };
  
    ComboBox<Company> combo = new ComboBox<Company>(store, labelProvider);
    combo.setLoader(loader);
  

加载 HTML 和文本

在服务器获取数据时显示加载 HTML 或文本。对于 html，可以使用旋转的图像来显示为加载中。

• 使用 setLoadingText(text) 的示例。

    ComboBox<Company> combo = new ComboBox<Company>(store, labelProvider);
    combo.setLoader(loader);
    combo.setLoadingText("Loading...");
  

• 使用 setLoadingHtml(html) 的示例。

    ComboBox<Company> combo = new ComboBox<Company>(store, labelProvider);
    combo.setLoader(loader);
    combo.setLoadingHtml(SafeHtmlUtils.fromSafeConstant("<span style=\"color:red;\">Loading...</span>"));
  

提交选择

通过在列表视图折叠时调用 finishEditing，从展开的列表视图中选择时运行验证并提交值。

• 选择时完成编辑的示例。

    combo.addCollapseHandler(new CollapseHandler() {
      @Override
      public void onCollapse(CollapseEvent event) {
        combo.finishEditing();
      }
    });