Page 1 of 2 12 LastLast
Results 1 to 10 of 19

Thread: [Ver 1.0] Ext.ux.Multiselect

  1. #1
    Sencha Premium Member tjstuart's Avatar
    Join Date
    May 2007
    Location
    Sydney, Australia
    Posts
    457

    Default [Ver 1.0] Ext.ux.Multiselect

    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.

  2. #2
    Ext User nassaja-rus's Avatar
    Join Date
    Mar 2007
    Location
    Russia
    Posts
    314

    Default

    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.
    -= miu-miu =-

    Linux, Perl, GNU, Open Source, Ajax, Ubuntu 9.04

  3. #3
    Sencha Premium Member tjstuart's Avatar
    Join Date
    May 2007
    Location
    Sydney, Australia
    Posts
    457

    Default

    Quote Originally Posted by nassaja-rus View Post
    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

  4. #4
    Ext JS Premium Member
    Join Date
    Apr 2007
    Posts
    298

    Default

    Quote Originally Posted by tjstuart View Post
    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.

  5. #5
    Ext User matjaz's Avatar
    Join Date
    Apr 2007
    Location
    Slovenia
    Posts
    126

    Default

    Nice one !

    I have a few suggestions. First you should get rid of
    Code:
    		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 !
    Regards,
    M.

  6. #6
    Ext User
    Join Date
    Aug 2007
    Posts
    96

    Default

    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

    HTML 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

    Code:
    [{"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?

  7. #7

    Default Making text unselectable

    I've not downloaded the source and poked around yet but the demo looks great!

    Quote Originally Posted by tjstuart View Post
    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

  8. #8
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    germany
    Posts
    52

    Default

    Yes! That one looks great! Thanks alot for sharing this handy widget

  9. #9
    Sencha Premium Member
    Join Date
    Apr 2007
    Posts
    65

    Default

    Quote Originally Posted by tjstuart View Post
    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!

  10. #10
    Sencha Premium Member
    Join Date
    Apr 2007
    Posts
    65

    Default

    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)

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •