PDA

View Full Version : [CLOSED] [ExtJs 4.07]Ext.ux.form.ItemSelector - Change event does't fire correctly



anton.dimitrov
16 Nov 2011, 6:32 AM
Ext version tested:

Ext 4.0.7

Browser versions tested against: DOCTYPE tested against:

FF4 +
IE9

Description:

The 'change' event is not fired when moving from 'Available' to 'Selected', or at least not until the user clicks on one of the records in the 'Selected' list.
On the other hand, moving back record form the 'Selected' to 'Available' fires the event on time, without the need to click. Drag and drop functionality fires the 'change' event properly.

Steps to reproduce the problem:

Replace the code of multiselect-demo.js in the Examples with the code supplied below.
Try to add item form 'Available' to 'Selected'

Test Case:


/*

This file is part of Ext JS 4

Copyright (c) 2011 Sencha Inc

Contact: http://www.sencha.com/contact

Commercial Usage
Licensees holding valid commercial licenses may use this file in accordance with the Commercial Software License Agreement provided with the Software or, alternatively, in accordance with the terms contained in a written agreement between you and Sencha.

If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.

*/
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.form.Panel',
'Ext.ux.form.MultiSelect',
'Ext.ux.form.ItemSelector'
]);

Ext.onReady(function(){

function createDockedItems(fieldId) {
return [{
xtype: 'toolbar',
dock: 'top',
items: {
text: 'Options',
menu: [{
text: 'Set value (2,3)',
handler: function(){
Ext.getCmp(fieldId).setValue(['2', '3']);
}
},{
text: 'Toggle enabled',
checked: true,
checkHandler: function(item, checked){
Ext.getCmp(fieldId).setDisabled(!checked);
}
},{
text: 'Toggle delimiter',
checked: true,
checkHandler: function(item, checked) {
var field = Ext.getCmp(fieldId);
if (checked) {
field.delimiter = ',';
Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>","</b>. Click Save to ' +
'see that values are now submitted as a single parameter separated by the delimiter.');
} else {
field.delimiter = null;
Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>null</b>. Click Save to ' +
'see that values are now submitted as separate parameters.');
}
}
}]
}
}, {
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
defaults: {
minWidth: 75
},
items: ['->', {
text: 'Clear',
handler: function(){
var field = Ext.getCmp(fieldId);
if (!field.readOnly && !field.disabled) {
field.clearValue();
}
}
}, {
text: 'Reset',
handler: function() {
Ext.getCmp(fieldId).up('form').getForm().reset();
}
}, {
text: 'Save',
handler: function(){
var form = Ext.getCmp(fieldId).up('form').getForm();
if (form.isValid()){
Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
form.getValues(true));
}
}
}]
}];
}

/*
* Ext.ux.form.MultiSelect Example Code
*/
var msForm = Ext.widget('form', {
title: 'MultiSelect Test',
width: 400,
bodyPadding: 10,
renderTo: 'multiselect',
items:[{
anchor: '100%',
xtype: 'multiselect',
msgTarget: 'side',
fieldLabel: 'Multiselect',
name: 'multiselect',
id: 'multiselect-field',
allowBlank: false,
store: [[123,'One Hundred Twenty Three'],
['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
value: ['3', '4', '6'],
ddReorder: true
}],
dockedItems: createDockedItems('multiselect-field')
});


var ds = Ext.create('Ext.data.ArrayStore', {
data: [[123,'One Hundred Twenty Three'],
['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
fields: ['value','text'],
sortInfo: {
field: 'value',
direction: 'ASC'
}
});

/*
* Ext.ux.form.ItemSelector Example Code
*/
var isForm = Ext.widget('form', {
title: 'ItemSelector Test',
width: 700,
bodyPadding: 10,
renderTo: 'itemselector',
items:[{
xtype: 'itemselector',
name: 'itemselector',
id: 'itemselector-field',
anchor: '100%',
fieldLabel: 'ItemSelector',
imagePath: '../ux/images/',
store: ds,
displayField: 'text',
valueField: 'value',
value: ['3', '4', '6'],
allowBlank: false,
msgTarget: 'side',
listeners: {
change: function (f,newV,oldV,opts){
Ext.Msg.alert('Change','newV:' + newV + '</br>oldV:' + oldV);
}
}
}],
dockedItems: createDockedItems('itemselector-field')

});

});




HELPFUL INFORMATION

Additional CSS used:

only default ext-all.css

Operating System:


Win7

mitchellsimoens
19 Nov 2011, 2:15 PM
There is nothing in there that says id does fire that event. ItemSelector consists of 2 MultiSelects. A MultiSelect is just a BoundList like in a ComboBox.

shailykamboj
13 Feb 2012, 3:46 PM
Hello ,
We are using 4.0.7 and have observed that the ItemSelector fires the change event only when any record in the 'Selected' list is clicked .
Steps :
1. select an item in Available list add it to 'Selected' list

Result : no 'change' event fired
2. Click on some item in 'Selected' list

Result : 'change' event fired .

In the documentation for ItemSelector it is provided that 'change' event would be fired for any user initiated change in the value , so as per this definition when we are adding anything to the Selected list then a change event should be fired .

Please let me know if there is any fix for this .

Thanks

Reimius
14 Feb 2012, 7:21 AM
I had this problem, developed my own fix, basically you have have to add the event to the store change event. I have overridden the whole class with many custom methods, so I'm not completely sure if overridding the onRender with this will work completely, but this might steer you in the right direction for a custom fix for yourself:


Ext.override(Ext.ux.form.ItemSelector, {
onRender: function(ct, position) { var me = this,
baseCSSPrefix = Ext.baseCSSPrefix,
ddGroup = 'ItemSelectorDD-' + Ext.id(),
commonConfig = {
displayField: me.displayField,
valueField: me.valueField,
dragGroup: ddGroup,
dropGroup: ddGroup,
flex: 1,
hideLabel: true
},
fromConfig = Ext.apply({
listTitle: 'Available',
store: Ext.create('Ext.data.Store', {model: me.store.model}), //blank store to begin
listeners: {
boundList: {
itemdblclick: me.onItemDblClick,
scope: me
}
},
searchBoxConfig: me.searchBoxConfig
}, me.multiselects[0], commonConfig),
toConfig = Ext.apply({
listTitle: 'Selected',
store: Ext.create('Ext.data.Store', {
model: me.store.model,
listeners: {
datachanged: me.onToFieldChange,
scope: me
}
}), //blank store to begin
listeners: {
boundList: {
itemdblclick: me.onItemDblClick,
scope: me
},
scope: me
}
}, me.multiselects[1], commonConfig),
fromField = Ext.widget('multiselect', fromConfig),
toField = Ext.widget('multiselect', toConfig),
innerCt,
buttons = [];


// Skip MultiSelect's onRender as we don't want its content
Ext.ux.form.MultiSelect.superclass.onRender.call(me, ct, position);


me.fromField = fromField;
me.toField = toField;


if (!me.hideNavIcons) {
Ext.Array.forEach(me.buttons, function(name) {
buttons.push({
xtype: 'button',
tooltip: me.buttonsText[name],
handler: me['on' + Ext.String.capitalize(name) + 'BtnClick'],
cls: baseCSSPrefix + 'form-itemselector-btn',
iconCls: baseCSSPrefix + 'form-itemselector-' + name,
scope: me
});
//div separator to force vertical stacking
buttons.push({xtype: 'component', height: 3, width: 1, style: 'font-size:0;line-height:0'});
});
}});

iomanip
18 Mar 2012, 6:20 AM
Hi guys... Check the 4.1.0-b3 version, seems it's working. even though still the bug when you're adding on the run the elements to the store, but that's another history.

Santosh Dhumale
12 Sep 2012, 3:03 AM
Can we control this event?

Because In my project I have such requirement that if user add the items in selected list once then user should not be able to remove those items or cannot change the sequence of inserted items.But he should able to add new items.