PDA

View Full Version : [Ver 1.1] Ext.ux.Multiselect



tjstuart
14 Aug 2007, 5:35 PM
Fixed a few bugs etc ...

Get it from here:- http://extjs.com/learn/Extension:Multiselect

See what's fixed and what's proposed for the future here:- http://www.figtreesystems.com/ext/ext-ux/1.1/Multiselect/Multiselect.html

matjaz
15 Aug 2007, 2:57 AM
Nice !

One thing I noticed.
If I click setValue, One, two, three are selected. Then if I click on this selected values it gets unselected, BUT other twos stays selected.
So I get an idea for selecting multiple values just by clicking on it and for deselection click on it again. So there is no Ctrl magic needed.
What do you think ?

vibez
15 Aug 2007, 7:17 AM
Thanks for the removing the internal store, it works just fine with my jsonstore now.

Couple of event handler bugs:

I have event handler code like below



combo.on("select", function(){
multiselect.reset();
multiselect.setDisabled(true);
});


BUG 1: It seems like reset() is not working. The initial loaded values are still displayed in the combobox.

BUG 2: options are still selectable (although they are greyed out) when envoking setDisabled(true)

vibez
15 Aug 2007, 12:00 PM
Could you tell me what event handlers we have available in this extension please?

I need to fire an even whenever a list item is select.

Currently the only open I have at the moment is 'dblclick'



multiselect.on("dblclick", function(){
multiselect2.enable(true);
});


Indeally I want to be able to just use either 'click' or 'selected' like so



multiselect.on("selected", function(){
multiselect2.enable(true);
});


But neither are working. Could you advise on what event handler I could use please?

tjstuart
15 Aug 2007, 7:08 PM
Added/Fixed the following in v1.1 ...

- Enabled/disabled now works correctly
- Reset now properly clears selections
- Click and Change events added

Page here:- http://www.figtreesystems.com/ext/ext-ux/1.1/Multiselect/Multiselect.html

Download here:- http://www.figtreesystems.com/ext/ext-ux/1.1/Multiselect/Multiselect-1.1.zip

Cheers

vibez
16 Aug 2007, 12:35 AM
Thanks again bro! Click event handling works great now ;)

Back with a bug though :(

disabled:true; doesnt seem to work in IE


var multiselect = new Ext.ux.Multiselect({
name: 'multiselect',
store:store5,
valueField: 'CostCentre',
displayField: 'CostCentre',
emptyText:'',
fieldLabel: 'Cost Centre',
disabled:true,
width: 165,
height: 150
});

although multiselect.setDisabled(true); works just fine.

tjstuart
21 Aug 2007, 5:33 PM
Vibez ... I was unable to replicate the 'disabled:true' bug you mentioned in IE6 or IE7

vibez
21 Aug 2007, 11:59 PM
Vibez ... I was unable to replicate the 'disabled:true' bug you mentioned in IE6 or IE7

Demo Here (http://www.console-covers.com/test/grid2a/index.html)

The last two multiselection boxes are set, disabled true.

The attachment here shows how I see them in IE compared to Firefox. As you can see the last two boxes in firefox are greyed out correctly, but none of the multiselect boxes are greyed out in IE

tjstuart
22 Aug 2007, 4:15 PM
Vibez,

They are in fact disabled in both IE6 & IE7. It's just a little harder to see. If you put some data in your multiselects it will become more evident.

Setting 'disabled' via config and using 'setDisabled' are ultimately handled by Ext.Component and all this does is set the HTML 'disabled' attribute for the element in question (in Multiselect's case the DIV inside the widget's container) and adds "x-item-disabled" to its class.

Cheers

vibez
23 Aug 2007, 12:35 AM
I'm not sure I follow you. Are you saying you cannot see the two boxes clearly greyed out in firefox, but not greyed out in IE?

setDisabled does grey they out in IE, but disabled:true does not.

tjstuart
23 Aug 2007, 1:35 AM
I'm not sure I follow you. Are you saying you cannot see the two boxes clearly greyed out in firefox, but not greyed out in IE?

That's exactly what I'm saying :) It's even evident in your screenshot! Take a closer look. Pay particular attention to the surrounding blue border of your multiselect's that have 'disabled:true' set. See that they are a lighter shade of blue! On your IE screenshot see how the blue border for 'Cost Centre' is "bluer" or "brighter" than those below it? The gray disabled "mask" may not be as defined in IE as it is in Firefox but it is definitely there!

Anyhoo, as I said earlier this is all handled by Ext.Component. Perhaps I'll look into a better way of visually disabling a widget in IE as I agree it is not well enough defined.

Cheers

aconran
23 Aug 2007, 6:36 AM
Bug Report for Ext.ux.MultiSelect v1.1

When an underlying datastore is cleared the selections remain in place and will be posted with a form. To resolve this I simply added:


this.store.on('clear', this.reset, this);


After the store is created in the onRender function.

Thanks for the great work.
Aaron

tjstuart
23 Aug 2007, 3:31 PM
Bug Report for Ext.ux.MultiSelect v1.1

When an underlying datastore is cleared the selections remain in place and will be posted with a form. To resolve this I simply added:


this.store.on('clear', this.reset, this);


After the store is created in the onRender function.

Thanks for the great work.
Aaron

Thanks aconran will add your fix. Cheers

vibez
23 Aug 2007, 9:35 PM
That's exactly what I'm saying :) It's even evident in your screenshot! Take a closer look. Pay particular attention to the surrounding blue border of your multiselect's that have 'disabled:true' set. See that they are a lighter shade of blue! On your IE screenshot see how the blue border for 'Cost Centre' is "bluer" or "brighter" than those below it? The gray disabled "mask" may not be as defined in IE as it is in Firefox but it is definitely there!

Anyhoo, as I said earlier this is all handled by Ext.Component. Perhaps I'll look into a better way of visually disabling a widget in IE as I agree it is not well enough defined.

Cheers

I apologise, on closer inspection I can see it is disabled, as you said it is just not as well defined as in firefox. Thanks for taking the time to investigate :D

falcondot
24 Aug 2007, 1:23 AM
hi tjstuart,

is there any way in which we can have selective CSS applied to the items in Multiselect widget, because we have a scenario in which out of 10 items,4 items are mandatory and we need these 4 items to be shown with different css style.


thanks
falcon

andrei.neculau
17 Sep 2007, 10:51 AM
Needs a new line "this.store.load();" inside the onRender function, after testing for !this.store

This is to make sure that the store is loaded.

tjstuart
17 Sep 2007, 4:51 PM
Needs a new line "this.store.load();" inside the onRender function, after testing for !this.store

This is to make sure that the store is loaded.

Are you referring to the store that is created internally when you set the 'data' and 'dataFields' configuration options or a store set via the 'store' configuration option?

If the former then the store is loaded automatically by the SimpleStore constructor.

If the latter, then it is up to the consumer to load the store (as we have no way of knowing if it is already loaded and wouldn't want to load it twice).

Regards

tjstuart
17 Sep 2007, 4:52 PM
hi tjstuart,

is there any way in which we can have selective CSS applied to the items in Multiselect widget, because we have a scenario in which out of 10 items,4 items are mandatory and we need these 4 items to be shown with different css style.


thanks
falcon

I'll add this to the long list of requests :) Hopefully I'll get to them soon. In the meantime I suggest you auto-select those mandatory items.

andrei.neculau
17 Sep 2007, 11:21 PM
@tjstuart: You're very much right, yet for instance ComboBox doesn't need it when you're using mode:remote, as it is loading the store automatically. Just a thought.