PDA

View Full Version : EXT JS 3.2.1 Combo box



RKenkre
18 Apr 2016, 10:26 PM
Hi Everyone,

Actually I wanted little help from you all, I am using Ext JS 3.2.1 version.
I am using one combo box where I can select a single value but now I want to select multiple values from that combo box. After researching about combo boxes, I had got one property 'multiSelect' which need to be set to 'true'. But this property is supporting only for versions above 4.0.

Below is my code for Combo Box:
border: false,
columnWidth: .75,
items: [{
allowBlank: false,
anchor: '100%',
displayField: 'Name',
fieldLabel: 'Name',
id: 'RoleEditor.form.Name',
itemCls: 'required',
labelSeparator: ': *',
listeners: {
'specialkey': {
fn: function (sender, e) {
if (e.getKey() == Ext.EventObject.ENTER) {
var button = Ext.getCmp('RoleEditor.form.buttonSubmit');
if (!Ext.isEmpty(button)) {
button.handler(button, e);
}
}
},
scope: this
}
},
mode: 'local',
name: 'Name',
store: CDBAdmin.AuthorizationsForGroup,
triggerAction: 'all',
typeAhead: true,
xtype: 'combo'
}],
layout: 'form'

Even I have seen that List View can work in this case, So can anyone guide how can this code be replaced to support List View instead of Combo box if there is no way out to fix this combo box.

Let me know if any additional data is required to solve this query. Thanks in advance!

Gary Schlosberg
19 Apr 2016, 7:57 AM
This thread has a couple of options.
https://www.sencha.com/forum/showthread.php?67647

RKenkre
20 Apr 2016, 12:09 AM
Thanks Gary for the link!!!

I replaced that Combo Code with the ListView and following is the code that helped me.

Posting here so it can help others:



{
anchor: '100%',
border: false,
items: [{
border: false,
columnWidth: .75,
items: [{
allowBlank: false,
anchor: '100%',
//displayField: 'Name',
//fieldLabel: 'Name',
id: 'RoleEditor.form.Name',
//itemCls: 'required',
//labelSeparator: ': *',
listeners: {
'specialkey': {
fn: function(sender, e) {
if (e.getKey() == Ext.EventObject.ENTER) {
var button = Ext.getCmp('RoleEditor.form.buttonSubmit');
if (!Ext.isEmpty(button)) {
button.handler(button, e);
}
}
},
scope: this
}
},
mode: 'local',
name: 'Name',
store: CDBAdmin.AuthorizationsForGroup,
triggerAction: 'all',
typeAhead: true,
multiSelect: true,
emptyText: 'No Authorizations to display',
reserveScrollOffset: true,
columns: [{
header: 'Authorizations',
width: .75,
dataIndex: 'Name'
}],
xtype: 'listview'
}, {
displayField: 'Name',
fieldLabel: 'Name',
itemCls: 'required',
labelSeparator: ': *',
id: 'images-view',
width: 420,
height: 250,
collapsible: true,
collapsed: true,
layout: 'fit',
title: 'Expand to Select the Authorizations',
items: 'RoleEditor.form.Name',
xtype: 'panel',
renderTo: document.body
}],
layout: 'form',
}]
}

Thanks...

Gary Schlosberg
20 Apr 2016, 3:32 PM
Great to hear that you've gotten it working, and thanks for sharing your solution with the community.