View Full Version : Itemselector / multiselect not working

3 Jun 2014, 10:07 AM
We have used these extensions in past without any problem on ExtJS 4.0x but cant make it work with 4.2x. Here is the situation we are in

This is our layout


This is our code in beforeRender method of container

var msForm = Ext.widget('itemselector', {
anchor: '100%',
xtype: 'multiselect',
msgTarget: 'side',
fieldLabel: 'Multiselect',
name: 'multiselect-new',
id: 'multiselect-field',
itemId: 'multiselect-field',
allowBlank: false,
store: 'pf_group',
valueField: 'group_account_name',
displayField: 'display_field',
value: [],
ddReorder: true

and this is our output


Error we are getting in console is
Uncaught TypeError: Cannot read property 'ownerCt' of undefined

and error is logged on following line of class MultiSelect.js

and here is the basic dump of itemselector object after creation

j {anchor: "100%", xtype: "multiselect", msgTarget: "side", fieldLabel: "Multiselect", name: "multiselect-new"}

activeErrorsTpl: Array[3]

0: "<tpl if="errors && errors.length">"
1: "<ul class="{listCls}"><tpl for="errors"><li role="alert">{.}</li></tpl></ul>"
2: "</tpl>"
length: 3
__proto__: Array[0]

activeUI: "default"
allowBlank: false
anchor: "100%"
bodyEl: A
childEls: Array[7]
componentCls: "x-field"
componentLayout: j
container: A
ddReorder: true
displayField: "display_field"
dragGroup: "MultiselectDD-ext-gen1115"
dropGroup: "MultiselectDD-ext-gen1115"
el: A
errorEl: A
events: Object
fieldLabel: "Multiselect"
frame: undefined
fromField: j
hasListeners: l
hierarchyState: Object
id: "multiselect-field"
initialConfig: Object
innerCt: A
inputEl: null
inputId: "multiselect-field-inputEl"
inputRow: A
itemId: "multiselect-field"
labelCell: A
labelEl: A
lastActiveError: ""
lastBox: null
lastValue: Array[0]
loader: null
msgTarget: "side"
name: "multiselect-new"
originalValue: Array[0]
ownerCt: j
ownerLayout: A
plugins: undefined
pluginsInitialized: true
protoEl: null
rawValue: Array[0]
renderData: Object
renderSelectors: Object
renderTpl: A
rendered: true
rendering: null
scrollFlags: Object
sideErrorCell: A
stateEvents: Array[0]
stateId: undefined
store: j
subTplData: Object
suspendCheckChange: 0
toField: j
ui: "default"
uiCls: Array[0]
value: Array[0]
valueField: "group_account_name"
xtype: "multiselect"
__proto__: Object

Gary Schlosberg
23 Jun 2014, 4:40 PM
That's quite odd. Probably a stupid question, but are you sure you're adding it to the right component? Is this 4.2.1? And this worked for you in 4.0.7?

24 Sep 2014, 8:27 AM
I am trying to add an itemselector in a popup. I am using the MVC for EXTJS4.
Can you help in guiding me where I am going wrong ? Do i need to export any js for itemselector to work ?
my code goes here. i get the error in firebug

TypeError: k is undefined - ext-all.js (line 18, col 47926)

Ext.define('App.controller.MakerController', { extend : 'Ext.app.Controller',

models : [],

stores : [],

views : [ 'makertabpanel' ],

init : function() {
'makertabpanel button[name= addNewUser]' : {
click : this.openDialog
openDialog : function() {
var dialog = Ext.create('Ext.window.Window', {
renderTo : Ext.getBody(),
title : 'Permission Uesr',
itemId : 'adduserpopup',
id : 'adduserpopup',
modal : true,
width : 1000,
height : 400,
layout : 'anchor',
resizable : false,
items : [
{ xtype: 'itemselector',
store: 'ProductStore',
toStore: 'RoleStore',
valueField :'key',
value: 'ProductStore' ,
msgTarget: 'side',
fromTitle : 'Available',
toTitle : 'Selected'

buttons : [ {
text : 'OK',
id : 'okbutton',
action : 'addfile'
}, {
text : 'Cancel',
id : 'cancelbutton'
} ]