带复选框的ExtJS组合框

t1qtbnec  于 2022-09-26  发布在  其他
关注(0)|答案(3)|浏览(177)

对于我使用的组合框中的复选框:

AOEDComboAssociationName = new Ext.form.ComboBox({
  id: 'AOEDComboAssociationName',
  store: AOEDstoreAssociationName,
  displayField: 'Name',
  valueField: 'Id',
  typeAhead: true,
  mode: 'local',
  emptyText: '',
  selectOnFocus: true,
  triggerAction: 'all',
  width: 220,
  tpl: new Ext.XTemplate('<tpl for=".">'
        + '<div class="search-item" >'
        + '<input type="checkbox" class=" x-form-checkbox x-form-field">&nbsp;{Name}'
        + '</div></tpl>'
        )
})

它的显示复选框和组合框的显示字段,但当我选择一个项目时,组合框会自动折叠,所以再次单击组合框以选择多个(另一个项目)
我怎么能检查不止一次?

liwlm1x9

liwlm1x91#

我怎么能检查不止一次?
在组合框中设置:

multiSelect: true
9q78igpj

9q78igpj2#

这完全是一次黑客攻击,但我认为您可以在子类中重写

// private
onSelect : function(record, index){
    if(this.fireEvent('beforeselect', this, record, index) !== false){
        this.setValue(record.data[this.valueField || this.displayField]);
        this.collapse();
        this.fireEvent('select', this, record, index);
    }
},
//…

具有

// private
onSelect : function(record, index){
    if(this.fireEvent('beforeselect', this, record, index) !== false){
        this.setValue(record.data[this.valueField || this.displayField]);
        //this.collapse();
        this.fireEvent('select', this, record, index);
    }
},
//…

如果不想覆盖任何内容,可以通过在“beforeselect”事件中返回false来取消onSelect代码,但您必须自己处理setValue()和fireEvent(“select”)。

rseugnpd

rseugnpd3#

我已经用这种方法解决了组合框的这个问题。我的存储和组合框的几个属性定义为:

queryMode: 'local',
            multiSelect: true,
            valueField: 'id',
            displayField: 'name',
            store: Ext.create('Ext.data.Store', {
                    fields: ['id', 'name'],
                    data: [
                        {id: 'FR', name: 'France'},
                        {id: 'BL', name: 'Belgium'},
                        {id: 'CH', name: 'Croatia'},
                    ]
                })

然后,我在ComboBox中的TPL定义为:

tpl: new Ext.XTemplate(
   '<tpl for=".">',
      '<div onclick="checkedReverse(this)" class="x-boundlist-item">',
         '<input type="checkbox" class="x-form-checkbox"/>',
      '{name}</div>',
   '</tpl>'
   )

它用<input type="checkbox">中存在的<div class="x-boundlist-item">替换了'Ext.form.ComboBox'的普通项<li class="x-boundlist-item">
这样,<checkbox><div>内单击Area,它会给我们提供所需的选择。但是,当我们在<div>中的另一个区域单击not on复选框时,它会给出所需的选择,但现在我们的复选框没有React(他仍然被选中)。因此,这就是我在div元素onclick="checkedReverse(this)中设置属性的原因,该元素在my.jsp中定义为:

<script>
    function checkedReverse(el) {
        el.children[0].checked = !el.classList.contains("x-boundlist-selected");
    }
</script>

它为我们提供反馈沟通和必要的功能,现在我们的组合框对所有点击都做出React。

相关问题