---
title: "Combo 下拉框"
description: "下拉框的数据源、过滤、多列、分页与常见配置。"
---

> Documentation Index
> Fetch the complete documentation index at: https://ag.879818327.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# Combo 下拉框

## 下拉常用属性

> **Note**
>
> 注意：可编辑表格中的下拉框，向数据库存入时是当前列的dataIndex属性名
> 其他地方比如单独的新增，修改，查询条件里，传的值是该控件的itemId属性名

``` 
 allowBlank：是否允许为空
 displayField：显示的值（数据源是store时需要添加该属性）
 valueField：实际传参的值（数据源是store时需要添加该属性）
 keyName：下拉框的数据源，一般在codeSet.xwl中设置
 multiSelect：是否多选
 tagConfigs:  matchFieldWidth:false  下拉框宽度展示内容不折行
```

## 使用keyname

```javascript
1.scode 或 codeset 中设置keyname
```

### 静态设置

![image-20210104100744597](/webbulider/image-20210104100744597.png)

### 数据库中读取

![image-20210104100815129](/webbulider/image-20210104100815129.png)

```javascript
2.下拉中设置静态选项
pickList中
['WebBuilder', 'Java', 'JS', 'SQL', 'HTML5', 'Web'] 或 [['value1','text1'],['value2','text2']]
```



## 使用store

```javascript
//在displayField中设置显示值
//valueField中设置值
//设置的值应该与sql查询的字段名一致
```

## 下拉框快速过滤（检索）

![image-20210107151747260](/webbulider/image-20210107151747260.png)

![image-20210107151820889](/webbulider/image-20210107151820889.png)

> **Note**
>
> 若无效不使用searchText
> 
> 仅 `like {?query?} || '%'`
> 
> 也可能是store中设置了beforload并且格式是params:{};//这样会覆盖掉query
> 
> 应该是operation.params.lineId=app.LINE_ID.getValue();

## 下拉多列

### 数据源是keyname

``` html
//在tql中
<table cellspacing='0' width='100%'>
  <tr bgcolor="#F0FFFF">
<td style="color:#A0522D">船名</td>
<td style="color:#A0522D">航次</td>
  </tr>
  <tpl for='.'>
<tr class='x-boundlist-item'>
  <td width='90'>
    {VESSEL_NAM}
  </td>
  <td width='120'>
    {OBVYG}
  </td>
</tr>
  </tpl>
</table>
```

### 数据源是store

```javascript
//tql中
<table cellspacing='0' style='overflow:hidden' width='100%'>
  <tr bgcolor="#F0FFFF">
<td style="color:#A0522D">合同号</td>
<td style="color:#A0522D">委托人</td>
<td style="color:#A0522D">货名</td>
<td style="color:#A0522D">内外贸</td>
<td style="color:#A0522D">进出口</td>
<td style="color:#A0522D">协议签订日期</td>
  </tr>
  <tpl for='.'>
<tr class='x-boundlist-item'>
  <td width='60px'>
    {CONTRACT_NO}
  </td>
  <td width='140px'>
    {CLIENT_NAME}
  </td>
  <td width='80px'>
    {CARGO_REMARK}
  </td>
  <td width='40px'>
    {TRADE_NAME}
  </td>
  <td width='40px'>
    {I_E_NAME}
  </td>
  <td width='50px'>
    {CREATED_ON}
  </td>
</tr>
  </tpl>
</table>
```

## 下拉面板显示复选框

**Multiselect属性:** true

**listConfig属性：**

``` javascript
{
  itemTpl: Ext.create('Ext.XTemplate', '<input type=checkbox> {v}'),
  onItemSelect: function(record) {
var node = this.getNode(record);
if (node) {
  Ext.fly(node).addCls(this.selectedItemCls);
  var checkboxs = node.getElementsByTagName("input");
  if (checkboxs != null)
    var checkbox = checkboxs[0];
  checkbox.checked = true;
}
  },
  listeners: {
itemclick: function(view, record, item, index, e, eOpts) {
  var isSelected = view.isSelected(item);
  var checkboxs = item.getElementsByTagName("input");
  if (checkboxs != null) {
    var checkbox = checkboxs[0];
    if (!isSelected) {
      checkbox.checked = true;
    } else {
      checkbox.checked = false;
    }
  }
}
  }
}
```

## 下拉分页

数据源采用store方式

**pageSize****属性**：20（每页显示多少一条） 

## 下拉框常见问题

给下拉框赋值，赋值不上，不显示当前值

首先看是不是itemID的名字没匹配，其次就是看你赋值和取数据源的先后顺序。赋值要在取数据源之后

## 下拉框根据条件不同加载不同的数据

针对store数据源。在该下拉框的store的beforeload事件中

```javascript
var rec = app.workloadGrid.getSelection()[0];
operation.params={DEPT_CODE:rec.data.DEPT_CODE};
```

## 对下拉列表中的选项进行赋值

``` javascript
//combo的store设置field值如['ID']
//在store success中
store.removeAll();
//例子为ID从表格中取(表格会在操作中变化)
var data = Wb.getData(app.cntrGrid.store);
data.forEach(function(item,index){
  store.add({
ID:item.ID
  });
});
```

## 下拉宽度

``` javascript
matchFieldWidth:false
```

## 强制选择的下拉

**在store.success 中再 app.xxx.setValue()**

Source: https://ag.879818327.xyz/webbuilder/combo/index.mdx