1. #1
    Sencha User
    Join Date
    Nov 2012
    Location
    INDIA, Hyderabad
    Posts
    23
    Answers
    2
    Vote Rating
    0
    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
    5,040
    Answers
    391
    Vote Rating
    185
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      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
    Answers
    2
    Vote Rating
    0
    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
    5,040
    Answers
    391
    Vote Rating
    185
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      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,596
    Answers
    542
    Vote Rating
    324
    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
    5,040
    Answers
    391
    Vote Rating
    185
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      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
    Answers
    2
    Vote Rating
    0
    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