1. #1
    Sencha User
    Join Date
    Nov 2012
    Location
    INDIA, Hyderabad
    Posts
    23
    Vote Rating
    0
    Answers
    2
    ravimaroju is on a distinguished road

      0  

    Default Answered: Want to select MultiSelect fields without holding Ctrl key..?

    Answered: Want to select MultiSelect fields without holding Ctrl key..?


    Hi,

    I have used the multiselectfield. Its good for selecting multiple items.

    But, I want to select items of "multiselectfield" without holding Ctrl key..

    give your suggestion which will be helpful for me a lot...


    Thanks in Advance.
    Ravi Maroju

  2. See if this is better:
    Code:
    var msForm = Ext.widget('form', {
        title: 'MultiSelect Test',
        width: 400,
        bodyPadding: 10,
        renderTo: Ext.getBody(),
        items:[{
            anchor: '100%',
            xtype: 'multiselect',
            msgTarget: 'side',
            fieldLabel: 'Multiselect',
            name: 'multiselect',
            id: 'multiselect-field',
            allowBlank: false,
            store: {
                fields: [ 'number' ],
                data: [{
                    number: 1
                }, {
                    number: 2
                }, {
                    number: 3
                }, {
                    number: 4
                }, {
                    number: 5
                }, {
                    number: 6
                }, {
                    number: 7
                }]
            },
            valueField: 'number',
            displayField: 'number'
        }]
        , listeners: {
            afterrender: function (ms) {
                var view = ms.down('dataview');
                
                view.myAllowDeselect = false;
                
                view.on({
                    beforedeselect: function (selModel) {
                        var view = selModel.view;
                        view.lastSelected = Ext.Array.from(selModel.getSelection());
                        return view.myAllowDeselect;
                    }
                    , itemmousedown: function (view, record, item, i) {
                        var selModel = view.getSelectionModel()
                            , selected = selModel.isSelected(i);
                        
                        if (view.lastSelected && !selected) {
                            selModel.select(i, true);
                        }
                        if (selected) {
                            view.myAllowDeselect = true;
                            selModel.deselect(record);
                            view.myAllowDeselect = false;
                        }
                    }
                });
            }
        }
    });

  3. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,052
    Vote Rating
    215
    Answers
    484
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Here is the solution I came up with:
    Probably more elegant to extend the row selection model or something, but this'll do in a pinch.

    Code:
    Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone'],
        data:{'items':[
            { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
            { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
            { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
            { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });
    
    
    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            { text: 'Name',  dataIndex: 'name' },
            { text: 'Email', dataIndex: 'email', flex: 1 },
            { text: 'Phone', dataIndex: 'phone' }
        ],
        height: 200,
        width: 400,
        renderTo: Ext.getBody()
        
        , selModel: {
            selType: 'rowmodel'
            , mode: 'MULTI'
        }
        , listeners: {
            beforedeselect: function (selModel) {
                var view = selModel.view;
                view.lastSelected = Ext.Array.from(selModel.getSelection());
                return view.myAllowDeselect;
            }
            , itemmousedown: function (view, record, item, i) {
                var selModel = view.getSelectionModel()
                    , selected = selModel.isSelected(i);
                
                if (view.lastSelected && !selected) {
                    selModel.select(i, true);
                }
                if (selected) {
                    view.myAllowDeselect = true;
                    selModel.deselect(record);
                    view.myAllowDeselect = false;
                }
            }
        }
    });

  4. #3
    Sencha User
    Join Date
    Nov 2012
    Location
    INDIA, Hyderabad
    Posts
    23
    Vote Rating
    0
    Answers
    2
    ravimaroju is on a distinguished road

      0  

    Default I want to select multiple items using Ext.ux.Multiselect without holding Ctrl key..

    I want to select multiple items using Ext.ux.Multiselect without holding Ctrl key..


    Hi Slemmon,

    Thanks for Spending your time.


    I need to select the multiple items using Ext.ux.Multiselect without holding Ctrl key in Extjs.

    Your given solution is for Grid Panel, but I want this for mutiselectfield of ux.


    I tried to apply "beforedeselect" and "itemmousedown" events to Ext.ux.Multiselect field, but
    they are not working as they are not in Ext.ux.Multiselect.

    Please give the suggestions regarding this issue.

    Regards
    Ravi
    Ravi Maroju

  5. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,052
    Vote Rating
    215
    Answers
    484
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    See if this is better:
    Code:
    var msForm = Ext.widget('form', {
        title: 'MultiSelect Test',
        width: 400,
        bodyPadding: 10,
        renderTo: Ext.getBody(),
        items:[{
            anchor: '100%',
            xtype: 'multiselect',
            msgTarget: 'side',
            fieldLabel: 'Multiselect',
            name: 'multiselect',
            id: 'multiselect-field',
            allowBlank: false,
            store: {
                fields: [ 'number' ],
                data: [{
                    number: 1
                }, {
                    number: 2
                }, {
                    number: 3
                }, {
                    number: 4
                }, {
                    number: 5
                }, {
                    number: 6
                }, {
                    number: 7
                }]
            },
            valueField: 'number',
            displayField: 'number'
        }]
        , listeners: {
            afterrender: function (ms) {
                var view = ms.down('dataview');
                
                view.myAllowDeselect = false;
                
                view.on({
                    beforedeselect: function (selModel) {
                        var view = selModel.view;
                        view.lastSelected = Ext.Array.from(selModel.getSelection());
                        return view.myAllowDeselect;
                    }
                    , itemmousedown: function (view, record, item, i) {
                        var selModel = view.getSelectionModel()
                            , selected = selModel.isSelected(i);
                        
                        if (view.lastSelected && !selected) {
                            selModel.select(i, true);
                        }
                        if (selected) {
                            view.myAllowDeselect = true;
                            selModel.deselect(record);
                            view.myAllowDeselect = false;
                        }
                    }
                });
            }
        }
    });

  6. #5
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,616
    Vote Rating
    327
    Answers
    545
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    How about this?

    Code:
    listConfig: {simpleSelect: true}

  7. #6
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,052
    Vote Rating
    215
    Answers
    484
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    HA! Totally missed SIMPLE. Don't know what I thought it did.
    Yes, SIMPLE is plainly the right solution.

  8. #7
    Sencha User
    Join Date
    Nov 2012
    Location
    INDIA, Hyderabad
    Posts
    23
    Vote Rating
    0
    Answers
    2
    ravimaroju is on a distinguished road

      0  

    Default


    Hi, Kudos Slemmon,

    Thanks for Spending your time.

    The example you are given working fine and it is good work.


    Thanks and Regards
    Ravi
    Ravi Maroju

Thread Participants: 2

Tags for this Thread