Skip to content

Combo 下拉框

下拉框的数据源、过滤、多列、分页与常见配置。

Updated View as Markdown

下拉常用属性

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

使用keyname

1.scode 或 codeset 中设置keyname

静态设置

image-20210104100744597

数据库中读取

image-20210104100815129

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

使用store

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

下拉框快速过滤(检索)

image-20210107151747260

image-20210107151820889

下拉多列

数据源是keyname

//在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

//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属性:

{
  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事件中

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

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

//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
  });
});

下拉宽度

matchFieldWidth:false

强制选择的下拉

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

Navigation

Type to search…

↑↓ navigate↵ selectEsc close