View Full Version : Using a template with Ext.ux.form.ItemSelector

19 Apr 2013, 6:26 AM
I'm trying to use a template with the ItemSelector component like this:

Ext.define('ItemAssignment', {
extend: 'Ext.ux.form.ItemSelector',

name : 'assigned_items',
hideLabel : true,
store : 'MyStore',
tpl : '{item_name} ({item_code})',
displayField: 'item_name',
valueField : 'item_code',
allowBlank : false,
fromTitle : 'Unassigned',
toTitle : 'Assigned',
buttons : ['add','remove']

This doesn't seem to work. I've tried a number of different things, including removing the displayField attribute and using listConfig: { itemTpl: '{item_name} ({item_code})' }, nothing works. Is this not possible, or am I doing something wrong?

20 Apr 2013, 7:54 PM
After digging some more into the ItemSelector and MultiSelect component, I came up with the following override to make the tpl work with ItemSelector:

Ext.override(Ext.ux.form.ItemSelector, {
createList: function(title){
var me = this;

var cfg = {
submitValue: false,
flex: 1,
dragGroup: me.ddGroup,
dropGroup: me.ddGroup,
tpl: me.tpl,
title: title,
store: {
model: me.store.model,
data: []
displayField: me.displayField,
disabled: me.disabled,
listeners: {
boundList: {
scope: me,
itemdblclick: me.onItemDblClick,
drop: me.syncValue

if (me.tpl) {
cfg.listConfig = { tpl: me.tpl };

return Ext.create('Ext.ux.form.MultiSelect', cfg);

I'm getting good at answering my own questions! Hopefully the solutions come in handy for others.