PDA

View Full Version : Ext.ux.form.Multiselect onSelection selects all Items



gordonhutchens
9 May 2014, 7:16 AM
I have six multiselects in a fieldset inside of a fieldcontainer inside of a form panel inside of a tab. One of the multiselects highlights everything when I click on an item inside it. The other multiselects works as I expected. When I submit the get the form data, the multiselect that highlights all does not display a value in the form but the other multiselects do. I have compared the code creating the multiselects, stores, models, and the JSON data and they appear to be the same. I am also having problems with labelAlign: 'top' where the fieldlabel is displaying at the bottom of the multiselect. I am using ExtJs 4.1.1.
Multiselect that highlights all:


Ext.define('Sdsfie.view.multiselects.DDItemTypes', { extend: 'Ext.ux.form.MultiSelect'
, alias: 'widget.dditemtypes'
, name: 'dDItemTypesMultiselect'
, store: 'Sdsfie.store.DDItemTypes'
, displayField: 'modelElementTypeName'
, valueField: 'modelElementTypePK'
, allowblank: 'false'
//, legend: 'Item Type(s)'
, fieldlabel: 'Item Type(s)'
, autoload: 'true'
, value: ['0']
, width: 350
, bodyPadding: 20
, height: 70
});

Store for this multiselect:


Ext.define('Sdsfie.store.DDItemTypes' ,{
extend: 'Ext.data.Store'
, requires: 'Sdsfie.model.DDItemType'
, model: 'Sdsfie.model.DDItemType'
, proxy: {
type: 'ajax'
//, url: '../../Services/ViewerService.svc/GetItemTypes'
, url: 'data/itemtype.json'
, reader: {
type: 'json'
, root: 'results'
}
}
, autoLoad: true
, sorters: ['modelElementTypeName']
});

Model:


Ext.define('Sdsfie.model.DDItemType' ,{
extend: 'Ext.data.Model'
, idProperty: 'modelElementTypePk'
, fields: [
{ name: 'modelElementTypePk', type: 'int' }
,{ name: 'modelElementTypeName', type: 'string'}
]
});

JSON data:


{
'success': true,
'results': [
{'modelElementTypePK': 0, 'modelElementTypeName': 'ANY'},
{'modelElementTypePK': 1, 'modelElementTypeName': 'Entity'},
{'modelElementTypePK': 2, 'modelElementTypeName': 'Attribute'},
{'modelElementTypePK': 3, 'modelElementTypeName': 'Enumeration'},
{'modelElementTypePK': 4, 'modelElementTypeName': 'Enumerant'},
{'modelElementTypePK': 5, 'modelElementTypeName': 'Association'}
]
}

Tab Page:


Ext.define('Sdsfie.view.dictionary.SearchScreen', {
extend: 'Ext.form.Panel',
alias: 'widget.dictionarysearchscreen',
padding: 5,
border: 0,
timeout: 120,
layout: 'vbox',
buttonAlign: 'center',
requires: [
'Sdsfie.view.multiselects.DDItemTypes'
,'Sdsfie.view.multiselects.DDItemStatuses'
,'Sdsfie.view.multiselects.DDItemProperties'
,'Sdsfie.view.multiselects.DDComponents'
,'Sdsfie.view.multiselects.DDConfigurations'
, 'Sdsfie.view.multiselects.DDVersions'
, 'Sdsfie.view.multiselects.TestSelect'
],
//fieldDefaults: {
// labelAlign: 'top',
// labelWidth: 100,
// labelStyle: 'font-weight:bold'
//},


initComponent: function () {
var me = this;
Ext.tip.QuickTipManager.init();
Ext.applyIf(me, {
items: [
{
xtype: 'label',
padding: '5',
cls: 'headline',
text: 'Search the SDSFIE Data Dictionary (SDD)'
},
{
xtype: 'panel',
border: 0,
width: 800,
html: '<center><p>Specify your search criteria and then click the <strongSearch</strong button at the bottom of the page. Click the <strong>Reset Search Form</strong> button to reset the search form fields to their default values.</p></center>'
},
{
xtype: 'fieldcontainer',
border: 0,
layout: 'vbox',
items: [
{
xtype: 'fieldset',
title: 'Search Form',
width: 800,
layout: 'vbox',
items: [
{
xtype: 'textfield',
id: 'searchterms_Id',
name: 'searchTerms',
anchor: '100%',
labelAlign: 'top',
labelWidth: 350,
labelStyle: 'font-weight:bold',
fieldLabel: 'Search Terms: Word(s) or phrases(s) to look for in the Item Type(s) and Target Field(s)'
},
{
xtype: 'fieldcontainer',
border: 0,
width: 780,
anchor: '100%',
layout: 'hbox',
items: [
{
xtype: 'ddtestselect',
labelAlign: 'top',
labelWidth: 350,
labelStyle: 'font-weight:bold'


},
//{
// xtype: 'dditemtypes',
// labelAlign: 'top',
// labelWidth: 350,
// labelStyle: 'font-weight:bold'
//},
{ xtype: 'tbspacer', width: 10 },
{
xtype: 'dditemproperties',
labelAlign: 'top',
labelWidth: 350,
labelStyle: 'font-weight:bold'
}
]
},
{
xtype: 'fieldcontainer',
border: 0,
width: 780,
anchor: '100%',
layout: 'hbox',
items: [
{
xtype: 'dditemstatuses',
labelAlign: 'top',
labelWidth: 350,
labelStyle: 'font-weight:bold'
},
{ xtype: 'tbspacer', width: 10 },
{
xtype: 'ddcomponents',
labelAlign: 'top',
labelWidth: 350,
labelStyle: 'font-weight:bold'
}
]
},
{
xtype: 'fieldcontainer',
border: 0,
width: 780,
anchor: '100%',
layout: 'hbox',
items: [
{
xtype: 'ddversions'
, labelAlign: 'top',
labelWidth: 350,
labelStyle: 'font-weight:bold'
},
{ xtype: 'tbspacer', width: 10 },
{
xtype: 'ddconfigurations',
labelAlign: 'top',
labelWidth: 350,
labelStyle: 'font-weight:bold'
}
]
},
{
xtype: 'fieldcontainer',
border: 0,
width: 780,
anchor: '100%',
layout: {
type: 'vbox',
align: 'center'
},
items: [
{
xtype: 'datefield',
fieldLabel: 'As-of Date',
labelStyle: 'font-weight:bold',
name: 'asofDate',
msgTarget: 'under', // location of the error message
invalidText: '"{0}" bad. "{1}" good.' // custom error message text
}
]
},
{
xtype: 'fieldcontainer',
border: 0,
width: 780,
anchor: '100%',
layout: 'hbox',
items: [
{
xtype: 'dditemtypes',
labelAlign: 'top',
labelWidth: 350,
labelStyle: 'font-weight:bold'
}
]
},
{
xtype: 'panel',
border: 0,
width: 780,
anchor: '100%',
layout: {
type: 'vbox',
align: 'center'
},
items: [{
xtype: 'toolbar',
items: [
{
xtype: 'button'
, action: 'resetSearch'
, text: 'Reset Search Form'
, width: 120
},
{ xtype: 'tbspacer', width: 50 },
{
xtype: 'button'
, action: 'performSearch'
, text: 'Search'
, width: 120
}
]
}]
}
]
}
]
}
]
});

me.callParent(arguments);
}
});

Gary Schlosberg
14 May 2014, 6:59 PM
Sounds like this issue, which was fixed in 4.1.2:
http://www.sencha.com/forum/showthread.php?231019