Results 1 to 7 of 7

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

  1. #1
    Sencha User
    Join Date
    Nov 2012
    Location
    INDIA, Hyderabad
    Posts
    23
    Answers
    2
    Vote Rating
    0
      0  

    Default 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,154
    Answers
    501
    Vote Rating
    247
      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
      0  

    Default 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,154
    Answers
    501
    Vote Rating
    247
      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,790
    Answers
    583
    Vote Rating
    390
      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,154
    Answers
    501
    Vote Rating
    247
      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
      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

Tags for this Thread

Posting Permissions

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