如何在extjs tagfield中添加複選框

我能夠使用此提琴創建多選組合框，使用此提琴http://jsfiddle.net/dFEsc/16/，工作組合框圖如下所示。我想現在用複選框創建一個標記欄。下面的代碼不起作用。事實上整個tpl不起作用。如何在extjs tagfield中添加複選框

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 tagfield ？

來源

2016-11-11 Gaurav

ExtJS的有真正的標籤適當的標記字段，什麼是在其複選框點？ –

這不是Tagfield的工作方式，您試圖將TagField轉換回帶有MultiSelect的組合框。我對你的建議是創建你自己的Component來擴展ComboBox並使用MultiSelect（這就是TagField所做的）。 –

謝謝Guilherme明白你的觀點。我創建了一個組合框的插件，其圖像已附加在問題中。它工作正常，問題是我已經使用了在extjs中已被棄用的multiselect屬性。這可能會在不久的將來造成問題 – Gaurav

我同意Guilherme所說的。

萬一帶有combobox的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圖像中的資源文件夾tagfield並不需要這個工作

而且你需要以下的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

來源

2016-11-14 16:01:57 josei

感謝josei的回覆。其實我已經在我的組合框中應用了這個（在這個問題中的圖片），它在那裏工作，但是在extjs版本6.0.1中的tagfield中，在模板呈現中存在一些問題並且它不起作用。在較早的版本和更高的版本，這工作正常。但我需要它在版本6.0.1 – Gaurav

你是對的;我現在用extjs 6.0.1測試了它，但沒有奏效 – josei

如何在extjs tagfield中添加複選框

回答

相關問題