ExtJs – Membuat Combobox Multiselection With Checkbox

Untuk membuat sebuah combobox multi selection dengan checkbox sebagai penanda pilihan ada beberapa langkah yang mesti anda lakukan.
1. Pastikan anda men-set multiSelect : true untuk membuat combobox bisa mengakomodir multi selection.
2. Di listConfig anda bisa meng-overide function getInnerTpl.

  xtype : 'combo',
  fieldLabel : 'Please Select ',
  store : someStore,
  multiSelect : true,
  queryMode : 'local',
  displayField : 'ne',
  valueField : 'ne',
  emptyText : 'Please Select',
  listConfig : {
	  loadingText : 'Please wait...',
	  emptyText : 'No item to display.',
	  
	  getInnerTpl : function() {
		return '<div class="x-combo-list-item"><img src="' + Ext.BLANK_IMAGE_URL + '" class="chkCombo-default-icon chkCombo" /> {ne} </div>';
		/* ne is dataIndex for display value refer to your model. */
	  }
  }

Perlu diketahui bahwa function getInnerTpl ini mengembalikan nilai yang akan ditampilkan di list combobox.
Jadi kita bisa mengganti nilai balikan function ini dengan custom css.

3. Jangan lupa buat CSS untuk menampilkan checked dan unchecked checkbox.

.x-boundlist-item img.chkCombo {
	background: transparent
	url(../../../Ext-4/Ext-4/resources/themes/images/gray/menu/unchecked.gif); 
	/*Please change to your url for uncheck checkbox gif*/
	width: 17px;
	height: 14.5px;
}

.x-boundlist-selected img.chkCombo {
	background: transparent
	url(../../../Ext-4/Ext-4/resources/themes/images/gray/menu/checked.gif); 
	/*Please change to your url for checked checkbox gif*/
	width: 17px;
	height: 14.5px;
}

Terima kasih dan semoga bermanfaat.

mazipan-signature

Be a good reader, leave your comment please.

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s