如何在extjs标记字段中添加复选框

Question

我能够创建一个多选组合框，使用这个小提琴http://jsfiddle.net/dFEsc/16/选择所有功能，工作组合框图像如下所示。我想现在创建一个带复选框的标记字段。 下面的代码不起作用。事实上，整个tpl都不起作用。

expand: {
 fn: function() {
var dropdown = Ext.get(id).dom.parentElement;
var container = Ext.DomHelper.insertBefore(dropdown, '<div id="'+id+'-container"></div>', true);
toolbar.render(container);
},
single: true
}

有什么办法可以将相同的代码应用到extjs标记字段吗？

Answer 1

我同意吉列尔梅所说的话。

如果您的客户已经请求带有组合框的标记区域（并且不能以其他方式），这是一个建议（虽然有点精心）。

注意：这只会为用户创建视觉效果，因为tagfield不需要按预期工作

{
xtype: 'tagfield',
fieldLabel: 'MyTagfield',
name: 'name',
valueField: 'id_name',
displayField: 'name',
queryMode: 'local',
bind: {
    store: '{mystore}'
},
emptyText: '',
delimiter: '',
submitEmptyText: false,
allowBlank: false,
allowOnlyWhitespace: true, // this is important
enableKeyEvents: true,
multiSelect: true,
selectOnFocus: false, 
editable: false,
stacked: true, // better with this config
listConfig: {
       tpl: Ext.create('Ext.XTemplate',
        '<tpl for=".">',           
        '<div role="option" class="x-boundlist-item" style="padding-left: 5px">',
        '<img src="' + Ext.BLANK_IMAGE_URL + '"class="chkCombo-default-icon chkCombo"/> {name}</div>',
        '</tpl>'

},

您需要在图片资源文件夹中选中未经检查的未经检查的gif

你需要以下css：

.x-boundlist-item img.chkCombo {
   background: transparent url('../resources/images/unchecked.gif');
    width: 15px;
    height: 15px;
 }

 .x-boundlist-selected img.chkCombo{
    background: transparent url('../resources/images/checked.gif');
    width: 15px;
    height: 15px;
 }

我希望它有所帮助。

编辑：我只用EXTJS 5.1测试了这个解决方案