PDA

View Full Version : Want to select MultiSelect fields without holding Ctrl key..?



ravimaroju
9 Mar 2013, 4:08 AM
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...=D>


Thanks in Advance.

slemmon
9 Mar 2013, 11:36 AM
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.



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;
}
}
}
});

ravimaroju
10 Mar 2013, 8:40 PM
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

slemmon
11 Mar 2013, 6:48 AM
See if this is better:


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;
}
}
});
}
}
});

skirtle
11 Mar 2013, 3:20 PM
How about this?


listConfig: {simpleSelect: true}

slemmon
11 Mar 2013, 5:52 PM
HA! Totally missed SIMPLE. Don't know what I thought it did.
Yes, SIMPLE is plainly the right solution.

ravimaroju
12 Mar 2013, 12:11 AM
Hi, Kudos Slemmon,

Thanks for Spending your time.

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


Thanks and Regards
Ravi