Extjs 有着豐富的組件,但是在API裏面卻沒有直接寫好的checkbox下拉框組件,這個時候對於新手來說可能有點蒙了,但是在好好看看Extjs的API後我們不難發現,我們可以通過自己設計拼裝出checkbox下拉框主鍵(所有組件都一樣的,都是在基本組件的基礎上拼裝而成的)。
我們通過兩個組件得到我們想要的checkbox下拉框:
1. Ext.form.field.ComboBox 下拉框組件
2. Ext.XTemplate 模板組件
其實,在combo組件的配置項中我們就可以看到,combo是支持使用XTemplate的,所以下拉框我們就可以用combo而checkbox則用XTemplate自己寫就可以了。
{ xtype: 'combo', name: 'status', id: 'statusId', multiSelect: true, editable: false, emptyText: justsyLang.strategyExecutionStatus, //'策略執行狀態', queryMode: 'local', store: status, valueField: 'id', displayField: 'name', listConfig: { itemTpl: '<tpl for="."><div class="x-combo-list-item"><span> {name}</span></div></tpl>', }, queryMode: 'local', triggerAction: 'all', },
備註:multiSelect 默認爲false表示單選,如果需要支出多選則設置爲true。
從上面我們就可以得到一個簡單的checkbox了,但是這樣的checkbox是不完美的,在做選擇的時候點擊checkbox框和點擊下拉內容都表示選擇了該項,但是隻有點擊checkbox的時候checkbox才表現出選中的效果,所以我們需要給他添加一些方法,保證checkbox的打鉤和沒打鉤表現出選中和未選中的統一性;
//在listConfig中添加下面的方法 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; } }
這樣總有讓一個簡單的checkbox成型了。
可能在項目中,我們對checkbox下拉框的需求量較大,這樣的話,我們就可以直接把checkbox下拉框做出一個自己封裝的組件的形式存在,這樣就不需要重複的寫了,每次需要的時候只用通過xtype調用就可以了。
ps:下面直接寫成組件形式的代碼引用自網絡,自己就一個地方用到也就沒刻意的去寫了
Ext.define('MDM.view.custom.MultiComboBox', { extend: 'Ext.form.ComboBox', alias: 'widget.multicombobox', xtype: 'multicombobox', initComponent: function(){ this.multiSelect = true; this.listConfig = { itemTpl : Ext.create('Ext.XTemplate', '<input type=checkbox>{value}'), 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; } } } } } this.callParent(); } });
Extjs版本:Extjs 4.2.1