PDA

View Full Version : Ux.field.Multiselect



vadimv
14 Mar 2013, 9:40 AM
As I didn't like available extensions, I've extended Ext.field.Select widget and added the multiselect feature. Works as a single or multi select field.

It can easily extend Ext.field.Text if to take the missing code from Ext.field.Select and add it to Ux.field.Multiselect.

Github repository: https://github.com/vadimpopa/Ux.field.Multiselect
Works on ST 2.x
Multiselect field example image:

42406

EDIT: usePicker config won't work as it is always used a list on both tablets and phones

r9

mitchellsimoens
16 Mar 2013, 12:50 PM
Without using it, what happens when someone is on a phone and the developer wants to use an array of values?

vadimv
16 Mar 2013, 2:39 PM
Without using it, what happens when someone is on a phone and the developer wants to use an array of values?
If you are about 'tablets only'... I've made the extension for project which small screens weren't on the requirements list. As soon as I find some free time will take a look to phones too.

vadimv
16 Mar 2013, 3:11 PM
and the developer wants to use an array of values?
Fixed....where I'm using it has no default value, being lazy and not tested with it, needed one code line which have deleted from the extended component.

thx.

armode
18 Mar 2013, 6:19 AM
I think there's a very simular plugin, maybe someone needs an alternative which works on small screens, too:
http://www.sencha.com/forum/showthread.php?251440-ListActions-Plugin
https://github.com/wnielson/sencha-ListActions

vadimv
25 Mar 2013, 3:35 AM
I think there's a very simular plugin, maybe someone needs an alternative which works on small screens, too:
http://www.sencha.com/forum/showthread.php?251440-ListActions-Plugin
https://github.com/wnielson/sencha-ListActions

Looks nice.

Took a fast look and seems that on each item's element is attached a button, which at first impression is used only to show the check/uncheck state, IMO is too much, it makes list's DOM bigger but for what....hope I might be wrong....will take a dipper look this days.
And probably the select/cancel button is an optional not useful step for the user, at least if to use it in the app I'm working at, but for others could be useful....

armode
25 Mar 2013, 4:09 AM
Yeah you're right, every list row has a button. I'm not sure how much this slows the component down, but for really long lists it's definitly a problem, good point!

The buttons in the bottom toolbar are optional and are passed to the component as items of the actionsToolbar.

vadimv
25 Mar 2013, 4:27 AM
Yeah you're right, every list row has a button. I'm not sure how much this slows the component down, but for really long lists it's definitly a problem, good point!

then looks that there's place for improvements....on mobile every millisecond&bit counts.



The buttons in the bottom toolbar are optional and are passed to the component as items of the actionsToolbar.
I've understood this, I was saying about the top one.....but I see in code that is optional too.

vadimv
26 Mar 2013, 9:29 AM
Removed code for Ext.picker.Picker so always will be used a popup overlay Ext.List, even for phones too.

raulm3
10 May 2013, 5:39 AM
work on sencha touch 2.2?

vadimv
10 May 2013, 6:01 AM
yes

raulm3
10 May 2013, 6:06 AM
Could you provide a full example of how to use it?
I'm trying to use it, but I'm just getting a blank screen, actually gray screen.

Thanks in advanced.

vadimv
10 May 2013, 6:22 AM
there's an example on github.

kidmanmatch
3 Oct 2013, 9:30 PM
Its working great......super Plugin...

vadimv
7 Oct 2013, 10:31 AM
Hey guys, just added the fiddle for it.

ingo.hefti
8 Oct 2013, 12:33 PM
I have a use case where there are quite a few options to be selected. When most of them are selected, then a very long string is displayed in the form and, of course, cut at the end as there is no line wrapping. You see a chance to implement this behavior?

46232

vadimv
8 Oct 2013, 12:40 PM
I could take a look at it over the weekend, but I don't promise. Also I'm not against contributions, I'm busy during the week...the code is on Github.

ingo.hefti
8 Oct 2013, 11:32 PM
Also I'm not against contributions...
:) I was already looking into the code. But as usual with ST core code: it is not so easy to understand (at least not for me). But I will try again!

ingo.hefti
25 Oct 2013, 6:35 AM
ok, took me some time. And I was only partly successful... After staring at the Chrome Dev tools for some time, I started looking into the Touch source code. I noticed, that the 'selectfield' extends from 'Ext.field.Text'. So I replaced it with 'Ext.field.TextArea'. And look there, this was just working fine. Now as I didn't want to patch the original source code I digged deeper. In 'Ext.field.Text' I saw the definition of the component was done with an 'xtype="input"'. So what would happen if I could change that f.e. in the constructor event. So I tried, and tried, and ... The only way that worked, somehow, was when I did this in the MultiSelectField.js:


constructor: function(config) {
var component = this.superclass.config.component;
component.xtype = 'textareainput';

this.callParent(arguments);
},

And this looks now like that:
46561

Only this changes (of course) the xtype for ALL SelectFields. I tried to have it just on my instance of the MultiSelectField, but was not successful so far.

Maybe you have a better idea?

mitchellsimoens
25 Oct 2013, 7:01 AM
constructor: function(config) {
var component = this.superclass.config.component;
component.xtype = 'textareainput';

this.callParent(arguments);
},


The configs are merged so why not have this:


config : {
component : {
xtype : 'textareainput'
}
}

Here is a fiddle:

16v

ingo.hefti
25 Oct 2013, 7:04 AM
The configs are merged so why not have this:


config : {
component : {
xtype : 'textareainput'
}
}

I definitely learned a lot today! Thanks Mitchell!!

ingo.hefti
29 Oct 2013, 7:49 AM
There seems to be a little problem in this component when using a delimiter other then a comma (','). When doing a getValue() on the field you will always get back comma separated values like this: "aaaaa,bbbb,cccc", no matter what you set as a delimiter.

The reason for this is that the selected item values are stored as an array and not as one string (like it is when the component is initialized).

I found 3 places in the code that I had to modify in order to make it work with the delimiter of my choice ("; "). Two concern the Setter for the VALUE field. Right now the APPLY does return an array. Only in the UPDATE is the array converted into a string. Problem is that it is the APPLY that stores the new value in the VALUE field which will let getValue() fail. So I had to change that first:

new applyValue():


applyValue: function(value) {
this.getOptions();
var value = this.getValueFromRecords(value,this.getValueField());
value = this.convertValue(value, this.getValueField(), this.getDisplayField());
return value.join(this.getDelimiter());
},


new updateValue():


updateValue: function(newValue, oldValue) {
this.superclass.superclass.updateValue.call(this,[newValue]);
},



then there was a little conversion problem here (new code in blue):


getRecordsFromValue: function(value){
var records = [],
all = this.getStore().getRange(),
valueField = this.getValueField(),
i = 0,
allLen = all.length,
rec,
j,
valueLen;

if(value){
// value must be an array!
if (!Ext.isArray(value)) {
value = value.split(this.getDelimiter());
}
for (valueLen = value.length; i < valueLen; ++i) {
for (j = 0; j < allLen; ++j) {
rec = all[j];
if (rec.get(valueField) == value[i]) {
records.push(rec);
break;
}
}
}
}
return records;
},

vadimv
3 Nov 2013, 1:16 PM
Hey @ingo.hefti

Nothing is wrong with it, your change now makes getValue to return a string instead of an array. The delimiter is for visual purpose, and for splitting initial string value.
Someone needs a string, someone an array - my use case was to send to server an array of ids.

Having an array, easily you could get the string as you want by joining that array.

Vadim.

ingo.hefti
4 Nov 2013, 12:11 AM
Nothing is wrong with it, your change now makes getValue to return a string instead of an array. The delimiter is for visual purpose, and for splitting initial string value.
Someone needs a string, someone an array - my use case was to send to server an array of ids.
I see your point. Only it does not sound logical to me. I mean the component is intended to be used in forms. So the data type should not change between input and output. Just my 2 cents...

But at the end it's your component and I still like it very much!

Ant0nin
6 Feb 2014, 2:02 AM
Hello,

I've made a derived class of the extension. However the list values do not appear in the field, but they appear in the list at the time of the selection.



Ext.define('DocuTouch.form.field.recherche.Liste', {
extend:'Ext.field.Select',
xtype: 'fieldrechercheliste',

constructor: function(champ) {

this.callParent();

var storeListe = Ext.create('DocuTouch.store.ValeurListe', champ);

this.setRecord(champ);
this.setLabel(champ.get('nom'));
this.setStore(storeListe);
},

config: {
valueField: 'id',
displayField: 'valeur',
autoSelect: false,
value: null
}
});


What is wrong in my code ?

Thanks in advance.

gkatz
31 May 2014, 11:47 PM
is this still the only decent multi select out there for ST2.x? or are there other native or extension options?
thanks!

gkatz
2 Jun 2014, 12:57 AM
---