PDA

View Full Version : [OPEN-139][3.0rc1] Bugs: Ext.ux.MultiSelect issues



mschwartz
1 May 2009, 12:00 PM
1) doesn't honor anchor config option.
2) Used in a dialog with frame: true, it's unusable as it renders wrong, uses css that isn't functional with the (default) blue background.

mschwartz
1 May 2009, 12:25 PM
destroy function should read this:



destroy: function(){
this.fs.destroy();
if (this.dragZone && this.dragZone.destroy) this.dragZone.destroy();
if (this.dropZone && this.dropZone.destroy) this.dropZone.destroy();
Ext.ux.Multiselect.superclass.destroy.call(this);
}
The bolded line is a typo in the rc-1 zip, examples directory.

mschwartz
1 May 2009, 1:49 PM
Oddly, ItemSelector seems to honor anchor. Set it to 100% and you get an overflow: auto set of scrollbars no matter what.

aconran
1 May 2009, 6:25 PM
mschwartz -

Could you prepare a brief showcase for us? Are you using it in a FormLayout or another layout manager which supports anchoring?

mschwartz
4 May 2009, 4:58 AM
Used in a FormPanel in a window. Window has frame: true, though I think I tried frame: true on the form itself.

In either case, the background of the window/form is nice and blue, but the multiselect and itemselector render a white background much wider than the width/height settings.

Looking at the css, there's a ux-mselect selector that doesn't seem to be used anywhere. I've hacked the sources to add that, and added some other css to fix it up.

mschwartz
4 May 2009, 5:11 AM
Here's a snippet of code.



config.height = 200;
config.xtype = 'itemselector';
config.multiselects = [
{
width: 170,
height: 200,
valueField: 'classificationId',
displayField: 'name',
store: store,
listeners: {
render: function() {
this.store.load();
}
}
},
{
width: 170,
height: 200,
valueField: 'classificationId',
displayField: 'name',
store: new Ext.data.ArrayStore({
fields: [ 'classificationId', 'name' ]
})
}
];
I drag two items from the left multiselect to the right. Click on an item in the right, firebug stops at line 235 of MultiSelect.js with this error:

this.store.getAt(selectionsArray[i]) is undefined

If I add these lines to the store in the second multiselect, no error but I can't sort the right multiselect via drag & drop as it's supposed to.



store: new Ext.data.ArrayStore({
fields: [ 'classificationId', 'name' ],
sortInfo: {
field: 'name',
direction: 'ASC'
}
})

mschwartz
4 May 2009, 5:24 AM
The bug seems to be with Ext.DataView.

I set a breakpoint at line 232 of MultiSelect.js:

var selectionsArray = this.view.getSelectedIndexes();

and step in.

this.selected.elements contains an array of 1 item, dl.x-list-selected.

the loop in getSelectedIndexes() has this line:

indexes.push(s[i].viewIndex)

I examine s[i] and there is no viewIndex member / undefined.

mschwartz
4 May 2009, 5:38 AM
I set a breakpoint inside DataView.js, updateIndexes.

When dragging a 2nd item to the right MultiSelect, it's being called with startIndex = 2. I think this is why it's not setting viewIndex for the 2nd node (would be index = 1).

mschwartz
4 May 2009, 5:46 AM
and the bug is in MultiSelect.js at my line #521

It should read:



var insertAt = (this.ms.appendOnly || (n == this.ms.fs.body.dom)) ? this.view.store.getCount()-1 : this.view.indexOf(n);
The getCount()-1 returns the proper index. The original source returned just getCount().

aconran
4 May 2009, 10:32 AM
Thanks for the feedback, marking this as an open issue to take a look into.

mschwartz
7 May 2009, 7:44 AM
ItemSelector has no setValue() method, and initValue is set to emptyFn.

As it is currently written, it can be used in a form, but it cannot have its values initialized.

The left multiselect is loaded from a store, which needs the initial value items removed from it on load and moved to the selected multiselect (right one) in the proper order.

It gets icky because I've not seen that Ext anywhere deals with store.on('load'...) to setValue() for form fields. Like, for a combo, you have to write your own onLoad handler to set the initial value. This is opposed to having it do the right thing internally using the config.value.

mpf
11 Jun 2009, 11:43 PM
I'd like to add this issue: http://extjs.com/forum/showthread.php?p=342419 to this thread.

mpf
11 Jun 2009, 11:51 PM
I've been trying to fit ItemSelector into a regular form processing backend and it doesn't like the way the ItemSelector posts the selected values to the form. Currently it POSTs it as selected=value1,value2,etc which is not how a regular form multi select posts its values. A regular multiselect sends them as selected=value1&selected=value2&selected=etc.

Below is a patch that restores regular behaviour.

regards

Matthew



--- ItemSelector.js 2009-06-03 12:39:36.000000000 +1000
+++ ../../../nong/ItemSelector.js 2009-06-11 11:22:22.000000000 +1000
@@ -141,8 +141,8 @@
p.body.removeClass();

this.hiddenName = this.name;
- var hiddenTag = {tag: "input", type: "hidden", value: "", name: this.name};
- this.hiddenField = this.el.createChild(hiddenTag);
+ this.hiddenTag = {tag: "input", type: "hidden", value: "", name: this.name};
+ this.hiddenFields = [];
},

afterRender: function(){
@@ -300,16 +300,28 @@
valueChanged: function(store) {
var record = null;
var values = [];
+ for (var i=0; i<this.hiddenFields.length; i++) {
+ this.hiddenFields[i].remove();
+ }
+ this.hiddenFields = [];
for (var i=0; i<store.getCount(); i++) {
record = store.getAt(i);
- values.push(record.get(this.toMultiselect.valueField));
+ var hiddenField = this.el.createChild(this.hiddenTag);
+ hiddenField.dom.value = record.get(this.toMultiselect.valueField);
+ values.push(hiddenField.dom.value);
+ this.hiddenFields.push(hiddenField);
}
- this.hiddenField.dom.value = values.join(this.delimiter);
- this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);
+
+ this.fireEvent('change', this, this.getValue(), values.join(this.delimiter));
},

getValue : function() {
- return this.hiddenField.dom.value;
+ var values = [];
+ for (var i=0; i<this.hiddenFields.length; i++) {
+ values.push(this.hiddenFields[i].dom.value);
+ }
+
+ return values.join(this.delimiter);
},

onRowDblClick : function(vw, index, node, e) {
@@ -333,4 +345,4 @@
}
});

-Ext.reg("itemselector", Ext.ux.ItemSelector);
\ No newline at end of file
+Ext.reg("itemselector", Ext.ux.ItemSelector);

evant
16 Jun 2009, 8:06 AM
We'll look at giving the multi select/item selector a rework in 3.1, however it won't make the 3.x release. Going to mark this as DEFER.

mjlecomte
17 Jul 2009, 7:05 AM
There may be some related information here (not sure though):
http://extjs.com/forum/showthread.php?t=74652