PDA

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



tjstuart
13 Aug 2007, 6:45 PM
Available now @ http://extjs.com/learn/Extension:Multiselect

For use on an Ext.form, basically mimics the traditional HTML select/multiple control (some people call it a ListBox).

Also have a Ext.ux.ItemSelector coming soon which is essentially two Multiselects that support moving items from one to another with drag drop and move left/right buttons etc.

Also, could one of the core dev team advise if this component should be in the Ext.ux.form namespace rather than just Ext.ux?

Finally, if anyone knows how to prevent the browser from selecting/highlighting the text when selecting items that would be useful.

nassaja-rus
13 Aug 2007, 8:03 PM
What for everyone use these awful ctrl-click? It would Be quite good to realize logic when the select and unselect is done by one mouse click. Same much more conveniently and more clearly, than ctrl-click.

tjstuart
13 Aug 2007, 8:41 PM
What for everyone use these awful ctrl-click? It would Be quite good to realize logic when the select and unselect is done by one mouse click. Same much more conveniently and more clearly, than ctrl-click.

I agree in theory however the idea was to mimic traditional HTML select/multiple exactly.

See the description of the component ... "Mimics the traditional HTML select/multiple control".

Perhaps I'll add it as a config option in next release.

Cheers

jheid
13 Aug 2007, 11:29 PM
I agree in theory however the idea was to mimic traditional HTML select/multiple exactly.

See the description of the component ... "Mimics the traditional HTML select/multiple control".

Perhaps I'll add it as a config option in next release.

Cheers

Please think about that.
For my customers I added a workaround for HTML selects so that a click will toggle the selection instead of removing all selection if ctrl wasn't pressed (using event handlers). It works to a certain degree but flickers awfully.

From my experience the normal user (well, most of my customers) don't know that they have to press shift or ctrl to do things right.

matjaz
14 Aug 2007, 12:12 AM
Nice one !

I have a few suggestions. First you should get rid of
this.store = new Ext.data.SimpleStore({
fields: this.dataFields,
data : this.data
});This must be done outside of a widget.
What if you already have a store and want it to bind to this multiselect ? Right now you can't !
Second add some namespace to view and proxy.

In general, great job !

vibez
14 Aug 2007, 12:24 AM
I agree that would make a good option. Also maybe the option of allowing us to drag through the list to select more than one item.

I'm just having a go at getting it to work with a jsonstore. But I cannot get the data loaded into the box. Here is my code


<script type="text/javascript">
Ext.onReady(function(){

Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';

var form = new Ext.form.Form({
labelWidth: 75
});

//data store one
var store = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({url : 'sample.php?type=one'}),
reader : new Ext.data.JsonReader({ id: 'PID'}, [{name: 'Division'}]),
remoteSort : false
});

var multiselect = new Ext.ux.Multiselect({
name: 'abc',
store: store,
dataFields:['PID', 'Division'],
valueField: 'PID',
displayField: 'Division',
fieldLabel: 'Multiselect',
width: 150,
height: 150
});
multiselect.store.load();

form.add(multiselect);

form.addButton('Get Value', function() { alert(form.getValues(true)); })
form.render('form-ct');

});
</script>

and this is my json response


[{"PID":"BM","Division":"SECTSPLATES"},{"PID":"BT","Division":"SCP"},{"PID":"CE","Division":"ENGSUPP"

},{"PID":"CM","Division":"ENGSUPP"},{"PID":"CP","Division":"CNES"},{"PID":"CW","Division":"CNES"},{"PID"

:"EA","Division":"SCP"},{"PID":"EB","Division":"ENGSUPP"},{"PID":"ES","Division":"ENGSUPP"},{"PID":"IA"

,"Division":"SCP"},{"PID":"IB","Division":"SCP"},{"PID":"ID","Division":"SCP"},{"PID":"IO","Division"

:"SCP"},{"PID":"MB","Division":"SCP"},{"PID":"MM","Division":"SECTSPLATES"},{"PID":"MP","Division":"SECTSPLATES"

},{"PID":"RS","Division":"RODS"},{"PID":"SB","Division":"SCP"},{"PID":"SC","Division":"SCP"}]

Can you see why I cannot get this data loaded into the multiselect box?

rjckirby
14 Aug 2007, 12:36 AM
I've not downloaded the source and poked around yet but the demo looks great!


Available now @ http://extjs.com/learn/Extension:Multiselect
Finally, if anyone knows how to prevent the browser from selecting/highlighting the text when selecting items that would be useful.

In IE you can use: unselectable="on"

In Firefox: you can use CSS: -moz-user-select:none;

Richard

q_no
14 Aug 2007, 2:46 AM
Yes! That one looks great! Thanks alot for sharing this handy widget :) =D>

Hani
14 Aug 2007, 5:14 AM
Also have a Ext.ux.ItemSelector coming soon which is essentially two Multiselects that support moving items from one to another with drag drop and move left/right buttons etc.


This would be sooo useful, hope it's available soon!

Hani
14 Aug 2007, 5:17 AM
Some issues:

- up/down dont work, they seem to scroll the whole page instead
- Similarly with shift up/down (should extend the selection in either direction)

tjstuart
14 Aug 2007, 3:34 PM
Thanks guys. Have a couple of issues/bugs to sort out. I will try do that today. Expect version 1.1 today or tomorrow.

@vibez - i'll have a look into that. it will be sorted in 1.1 anyways. the problem is with the widget creating its own data store internally.

Cheers

tjstuart
14 Aug 2007, 5:36 PM
1.1 released see thread here:- http://extjs.com/forum/showthread.php?p=54648

JorisA
16 Aug 2007, 3:48 AM
I agree that the store logic should be outside of the widget.

Furthermore I think your widget looks better with .ux-mselect-pointer { margin: 1px }

tjstuart
16 Aug 2007, 3:17 PM
The internal store logic has been removed. See thread v1.1 here http://extjs.com/forum/showthread.php?t=11167

Re. .ux-mselect-pointer { margin: 1px } ... I agree! I'll add it to the next release.

Cheers

LorenzoW
18 Aug 2007, 8:34 AM
great job!

is it possible to have some checkboxes on the left side that manege select/unselect?
I think checkboxes are more user friendly than pressing CTRL during selection.

tjstuart
21 Aug 2007, 5:31 PM
great job!

is it possible to have some checkboxes on the left side that manege select/unselect?
I think checkboxes are more user friendly than pressing CTRL during selection.

Nice idea. Perhaps in a later release as I'm quite busy at the moment. In the meantime, feel free to submit any enhancements and I'll add them.

Cheers

Hani
21 Aug 2007, 5:33 PM
Any ETA on the two pane selector? Anxiously awaiting that!

tjstuart
21 Aug 2007, 5:36 PM
Any ETA on the two pane selector? Anxiously awaiting that!

Hopefully a beta by the end of the week.

tjstuart
22 Aug 2007, 7:48 PM
Hopefully a beta by the end of the week.

Beta available now. See this thread http://extjs.com/forum/showthread.php?t=11660