PDA

View Full Version : [2.x] Ext.ux.Andrie.Select (ComboBox with multiSelect)



andrei.neculau
31 Oct 2007, 1:47 PM
March 26, 2008
This extension has been discontinued! A new extension with the same capabilities, but with cleaner and smarter code will be uploaded within the future days.
---------------
* This extension is merely the new-comer after Ext.ux.form.Select for Ext 1.x (http://extjs.com/forum/showthread.php?t=13757)

Same features are available. To summarize: a ComboBox with multiple selection support.
Nothing much changed on the surface, other than switching the config property singleSelect to it's counter-property: multiSelect. The reason behind the change is to make it more logical when using Ext.DataView.

Since 0.3.6 - it also features history capabilities (the former HistoryComboBox)

Live DEMO is available here (http://www.andrei.neculau.home.ro/extjs2/ux.Andrie.Select/Select_test.htm). Testcase is included in the attached ZIP file.

As always - looking forward to reactions on this! :)

TO DO (not in the very near future)
------
- add key search (Ext 1.x - SelectBox)
- add grouping capability (Ext 1.x - GroupComboBox)

Post Scriptum
I sincerely apologize, but you won't be seeing "Mine is better because..." regarding this post (http://extjs.com/forum/showthread.php?t=16466). People can choose and make up their own mind. This is one reason why I switched to Ext.ux.Andrie namespace. I want to govern over Ext.ux.Select (sounds like community-work, consensus toward official release) no more than I want somebody else to use Ext.ux.Andrie namespace (personal work).
I apologize for a second time because there was a "nice" delay since I promised to support Ext 2.x and the current time - release time. To be honest, this switch has only taken one day - today -, so it could have been released a long time ago.
All in all, I'd like to thanks the Ext2 team - it was fairly easier to implement this on the new framework, than it was on Ext1.-
[GMT 14:33 Nov. 5] - Update to v0.3.4 (fixed clearValue, improved reset, new clear button/trigger)
[GMT 23:14 Nov. 5] - Update to v0.3.5 (improved clear trigger and transform capabilities)
[GMT 10:04 Nov. 6] - Update to v0.3.6 (added history capabilities) [GMT 13:40 Nov. 7] - Update to v0.3.7 (removed a faulty JS hack - It's important to go ahead with this update!!!)
[GMT 17:02 Nov. 12] - Update to v0.3.8 (improved setValue function)
[GMT 10:35 Nov. 17] - Update to v0.4 (improvements and fixes + cleaner code; full changelog on the demo page)
[GMT 14:19 Nov 20] - Update to v0.4.1 - LIVE DEMO IS NOT YET UPDATED TO USE THE LATEST VERSION! (Having problems with accessing the webhost)

galdaka
31 Oct 2007, 3:21 PM
IE6. Error in line 51 "Console is not defined".

Thanks in advance.

Lucian
1 Nov 2007, 12:49 AM
This extension is very useful for the application I'm working on it right now. ;)

P.S.: o treaba buna...

andrei.neculau
1 Nov 2007, 2:08 AM
@galdaka - Pfff.. Ok, I will switch to another way of showing the values of the fields. Right now it is using console.log which supposedly it was available on IE in the debug version of ExtJS. It will get fixed today


@lucian - mersi ;)

andrei.neculau
1 Nov 2007, 8:11 AM
The component has now been updated and has some fixes, but most importantly some enhancements (e.g. deleting the value by keyboard - the feature was available in 0.2 but wasn't included in 0.3).

The testcase uses form textfields to show components' values.

The testcase also now features a comparison between Select and the formal ComboBox.

[PS: I'm not able to reach my hosting server for the moment, so the Live Demo is not yet updated]
PS: Live Demo now Online

TommyMaintz
2 Nov 2007, 10:37 AM
I like the extention but whats up with the name lol :p

andrei.neculau
2 Nov 2007, 2:52 PM
@TommyMaintz - what's wrong with the name? If you are talking about Andrie - it's not a mispelling from Andrei.. and if you are talking about why it is not Ext.ux.Select, you find the explanation in the starting post of this thread.

TommyMaintz
2 Nov 2007, 5:17 PM
Ah yes you are right. I didnt read the small characters. Lucky me its not a contract :) And indeed i thought it was based on your name. Andrie is a name sometimes used in the netherlands so i thought it would maybe be your real name.

Again really nice work, i think its worth getting the actual Ext.ux.Select namespace!

shade
2 Nov 2007, 7:29 PM
Great widget, but the items aren't deselected if you remove items from the list even though the field's text updates. I added a deselect method that also removes it from the dataview because I needed to be able to clear any selected values if the first item was clicked.



deselect:function(index){
this.removeValue(this.store.getAt(index).data[this.valueField || this.displayField]);
this.view.deselect(index, this.multiSelect);
},

andrei.neculau
3 Nov 2007, 5:18 AM
@shade - you mean you would like to have this situation:you remove items from the store and you would like them to be removed automatically from the combobox/select ? is this what you are talking about?

shade
3 Nov 2007, 5:18 PM
I meant that an item will stay highlighted in the list if you call removeValue on it (when using multiSelect). I wasn't sure if this was intended behavior or a bug. Changing the store works just fine.

andrei.neculau
4 Nov 2007, 12:18 AM
@shade - I'm sorry I didn't get your point the first time. Yes, it seems obvious that your comment is the "normal/expected behavior". I will post an update shortly.

andrei.neculau
5 Nov 2007, 7:37 AM
Updated just now - added a fix to clearValue which cleared only the text, and not the value (already posted a bug-thread on this) and added a clear trigger.

galdaka
5 Nov 2007, 9:46 AM
Excellent widget! Thanks for share.

andrei.neculau
6 Nov 2007, 2:07 AM
Updated now to support history capabilities for (Single) Select

Graaf
8 Nov 2007, 1:38 AM
I've added the multiselect in my grid, as a custom editor.
But the initial values of the field ( loaded from datastore ) aren't "read" by the multiselect.
So it appends the values selected, instead of using the values to determine which one is selected and whcoh one not....


edit:

Can't you do the "this.valueArray = this.getValue()?[this.getValue()]:[];" somewhere when the multiselect is opened?
Instead on initComponent? Data isn't loaded into the widget useing it in grid.

And is sorting possible?

andrei.neculau
8 Nov 2007, 7:12 AM
First of all be sure that you have the latest version!

Secondly, I don't know if I follow you on this.
I modified the grid example in examples/grid in order to use Ext.ux.Andrie.Select. It seems to be working ok. I'm attaching them now - you need to change the path to the Select component in the html file.

I admit that at the moment I'm busy with others, and I did not develop an application with the new Ext.ux.Andrie.Select for Ext2.0 , so you may be right that there is a bug - can anyone confirm this situation? any details?

As regards the sorting - sure. Sorting is available as it is for ComboBox. Just sort its store (selectComponent.store)!

KimH
11 Nov 2007, 2:52 AM
Just tried it, and found a bug:

Select a country from the first dropdown using the mouse and move to the next field either by mouse or TAB.
Now go back to the dropdown using shift-TAB and choose another country by Alt-Down and then use the up/down key. To select press TAB and the country will be selected and cursor moved to the next field, but the Value field will not be set.

andrei.neculau
11 Nov 2007, 6:01 AM
@KimH - I will assume that "first dropdown" refers to the Select component - the 3rd dropdown, after ComboBox and ComboBox (Force).

First of all, please pay attention to what it is written on the demo page. It contains VALUABLE information. On the right column, you can read "(Diff) Doesn't select on TAB key press".

Because this component supports multiSelect, the TAB key needed to lose its make-selection function. In order for that to happen, you must use ENTER. TAB only goes to the next form field.

So my scenario when trying out your steps goes like this: after shift-tab, alt-down, moving up/down and pressing tab - I get the same value for the component, same selection in the list, and I simply move to the next field. What browser are you using (me - Firefox 2) ?

simonbun
12 Nov 2007, 7:49 AM
I've hit a bug it seems. When I use setValue([val1, val2, valn]), the appropriate items from the dropdown are not selected (i.e. highlighted in blue).

To demonstrate:
Run: Ext.getCmp('ext-comp-1011').setValue(['DE', 'US'])

on the demo page. The values are set correctly, but they are not selected in the dropdown itself.

Thanks for a great widget by the way!

regards,
Simon

andrei.neculau
12 Nov 2007, 9:05 AM
Thanks, Simon! Extension updated with a fix.

PS: neat testcase ;)

simonbun
12 Nov 2007, 11:16 PM
Thanks for the quick fix! It works perfectly.

regards,
Simon

KimH
13 Nov 2007, 12:39 AM
@KimH - I will assume that "first dropdown" refers to the Select component - the 3rd dropdown, after ComboBox and ComboBox (Force).

First of all, please pay attention to what it is written on the demo page. It contains VALUABLE information. On the right column, you can read "(Diff) Doesn't select on TAB key press".

Because this component supports multiSelect, the TAB key needed to lose its make-selection function. In order for that to happen, you must use ENTER. TAB only goes to the next form field.
I'm sorry.... didn't see that specific Diff 8-|

Anyway... try it on the first select box (Combobox) and you'll see that the second select using tab will not set the Value even though the combobox is set to the value...

andrei.neculau
13 Nov 2007, 1:42 AM
As the name suggests - ComboBox is not my Select component. The first two components (ComboBox) are put there in order to compare the formal ComboBox with my Select component.

Concerning the situation you are presenting - no bug in the component. Just a tippo in the testcase. Fixed in the zip now, and later on the live demo page.

catacaustic
13 Nov 2007, 5:12 PM
Andrei, again a a fantastic widget. I've found that it works perfectly when I'm using it in a form.

Only one issue that I've found, and I'm not sure if is to do with your component, or with Ext itself... When I try to use this in an EditorGridPanel (V. 2.0) I can set the values with it correctly to start with, and by using editor.field.getRawValue () I'm returning the values when I render the grid cell. The problem is that when I go to edit that cell again, what's displayed is the value fields, and not the display fields as they should be. Also, the selected entries aren't displaying as selected in the drop-down list. This lets the selections get added two or more times to the selections list. From what I can see, this is because of the editors actions when it closes the field after editing, but I'm not to sure of how to get around it.

I've got fields with the same definitions working fine in a form, but not working in the editable grid. Not sure if there is anything that can be done about this.

andrei.neculau
14 Nov 2007, 3:21 AM
@catacaustic - so apparently it's not working as perfect as you say it is :)

I don't know what to say. I have made a small testcase inside a grid, based on the Ext2 example - http://extjs.com/forum/showthread.php?p=83945#post83945 - it seems to work ok. If you can please post the config for the Select, or even bring a small testcase, or if you feel comfortable with it - message me in private with the link to your application.

As of now, I'm cleaning the code a bit, and improving some functions in order to publish v0.4 soon.

catacaustic
14 Nov 2007, 3:43 PM
As I said, it works perfectly when I use it in a form. ;)

Your editable grid example works fine... when the select box a single select. When I add in the config item of "multiSelect: true" to make it a multi-selectable ComboBox it displays the same problems that I've described. It doesn't remember (or doesn't display) the selections, and just keeps on adding selections even if they are already there. As I said, I'm pretty sure this is to do with the Editor trying to set the value of the select box when editing closes. This will set the values as a string, as it is returned from the select box, but the select box doesn't seem to parse that string into an array properly, so sees the full string as one single item. For some reason it also brings in a blank item at the start, probably also doe to the editor trying to set something that it shouldn't be doing.

The setup for the column with the multi-select editor that I've got here is:
{header: "<span ext:qtip=\"Tags set on this footprint\">Tags", dataIndex: "tags", width: 100, sortable: false, hidden: false, renderer: CF.Render.renderFootprintTags, editor: new Ext.grid.GridEditor (new Ext.form.MultiSelect ({
store: new Ext.data.Store ({
proxy: new Ext.data.HttpProxy ({
url: "api/api-json.php?f=getTags",
method: "POST"
}),
reader: new Ext.data.JsonReader ({
root: "tags",
id: "id"
}, [
{name: "id", mapping: "id"},
{name: "name", mapping: "name"}
])
}),
name: "tags",
listWidth: 200,
allowBlank: true,
emptyText: "All tags",
valueField: "id",
displayField: "name",
editable: false,
forceSelection: true,
triggerAction: "all",
title: "Tags",
loadingText: "Loading tags",
multiSelect: true
}))}I hope this can help a little bit with some "fixing". I'm going to see what I can come up with too and if I get any results I'll post here again. Once again, thanks for your help, and helping everyone here.

catacaustic
14 Nov 2007, 4:08 PM
I think I've got something worked out here. It looks like it's working in my system, so see what it can do from your end.

I've done some small changes to the setValue() function and it looks like it works. My changes are set out here:
setValue:function(v){
// Don't set anything if the value isn't defined
if (v !== undefined) {
var result = [],
resultRaw = [];
if (!(v instanceof Array)){
// Split a string into an array
// v = [v];
v = v.split (",");
}
if (!this.multiSelect && v instanceof Array){
v = v.slice(0,1);
}
for (var i=0, len=v.length; i<len; i++){
var value = v[i];
var text = value;
if(this.valueField){
var r = this.findRecord(this.valueField, value);
if(r){
text = r.data[this.displayField];
}
}
resultRaw.push(value);
result.push(text);
}
v = resultRaw.join(',');
text = result.join(',');

this.lastSelectionText = text;
this.valueArray = resultRaw;
if(this.hiddenField){
this.hiddenField.value = v;
}
Ext.form.ComboBox.superclass.setValue.call(this, text);
this.value = v;
if (this.view){
this.view.clearSelections();
this.selectByValue(this.valueArray);
}

if (this.oldValueArray != this.valueArray){
this.fireEvent('change', this, this.oldValueArray, this.valueArray);
}
this.oldValueArray = Ext.apply([], this.valueArray);
if (this.history && !this.multiSelect && this.mode == 'local'){
this.addHistory(this.getRawValue());
}
} // if ()
else {
// Clear everything to start with
this.valueArray = [];
} // else
}What was happening was the editor was trying to set values as single values of a string instead of a single ID or an array, and it was throwing everything out. By adding these changes in, it works well with editors as well as not being affected when it's used as a stand-alone field in a form. The "if" statement checks that there is actually a value being set as the editor initially wants to see a value of "undefined" as there's nothing selected in the component. The "else" statement clears the list of selected items so that when it is used in an editable grid it shows up with no selections for a field that doesn't have anything set. That isn't quite working right yet, but I'm trying to get it going unless anyone else can come up with a better solution. :D

Check this for yourself, and see if this works for you as well. I think I may be pretty close :D

catacaustic
14 Nov 2007, 4:54 PM
I think I've got it. Small change to the "else" statement...
else {
// Clear everything to start with
if (this.view) {
this.reset ();
} // if ()

while (this.valueArray.length > 0) {
this.valueArray.pop ();
} // for ()
} // else That should do it. It's working great for me now with those changes.

andrei.neculau
14 Nov 2007, 11:46 PM
@catacaustic - it figures that it has to do with that, but there's one thing: in case of multiSelect, the value given to setValue should be an array (when going to v0.3 I deliberately took out the "," separator)

So.. basically, in your record, the field tags should be an array, and not string.

But your experience will probably take me to re-implement the separator. It seems logical to have it - at least optional. - Most probably this evening.

PS: thanks for your great input - all your post put me little by little in the right direction without looking at the source, which saves time

sdrew
15 Nov 2007, 10:01 PM
This sounds like great gadget, however it does not appear to work under IE7, the test page in the zip file displays the all controls overlapping each other and the buttons. Any ideas?

andrei.neculau
15 Nov 2007, 11:36 PM
I'm now travelling - I will get back to this thread in a couple of days - promise.

andrei.neculau
17 Nov 2007, 2:39 AM
Ok - I have now put online the latest version 0.4.

Cleaner code, small (big?!) improvements, etc.

@sdrew - testcase should be ok on IE7 as well now

pozirk
19 Nov 2007, 8:26 AM
Have a bug of displaying combo box in TabPanel.

So when I choose 1 or more(ver. 0.4)/more then one(ver. 0.3.8) items in combo, then change the tab and then return, combobox looks like on the image.

http://www.pozirk.com/temp/combo.jpg

P.S.: What about "select all" functionality in multi-select combo? :)

Thank you.

andrei.neculau
20 Nov 2007, 12:47 AM
I will investigate. Be sure of that. It's weird that the situation changed between versions..

Can you confirm that the same thing doesn't happen if you use the usual Ext.form.ComboBox ?

Do you have a link to a testcase? - that would speed things up as I don't have that much time available

DieHard_MIB
20 Nov 2007, 1:32 AM
I noticed a bug in MultiSelect - when you try to clear field via reset(), or clearValue(), or clearTrigger button before pressing the dropdown list button the error "this.view has no properties" occurs. Looking at code I've found that this.view is assigned in initList(), so this.view is null till the dropdown list is shown. Maybe you should add check this.view == null in reset() and clearValue()?

apaa
20 Nov 2007, 1:40 AM
Does it support 'minChars'?

When chars<miniChars,it still queries data.

pozirk
20 Nov 2007, 2:15 AM
Ext.form.ComboBox works fine.

One more thing, now, when deselect an item in multi-combo, there is nothing in editbox. Is it ok?

andrei.neculau
20 Nov 2007, 6:14 AM
Pff - I have to say that this time I'm caught off guard.

@pozirk - I cannot reproduce your weird behavior in Firefox2 or IE7, by accessing your testcase. Are you using another browser? I'm open for discussion - please provide a specific step1, step2, etc. in order to reproduce the weird situation.

@diehard_mib - well, in 0.4 there is actually a check on clearValue and reset (if this.view then this.view.clearSelections

@apaa - yes, there is a minChars config property, as it inherits that from Ext.form.ComboBox - please bare in mind that it is 0 if the store is local, as it is described in the ComboBox help page

I will soon update to 0.4.1 with a small fix, and also upgrade the live demo

DieHard_MIB
20 Nov 2007, 8:07 AM
Thanks. Now all is fine.

pozirk
20 Nov 2007, 8:15 AM
1. Open window
2. Select Tab1
3. Select something in multi-combo
4. Select Tab2
5. Select Tab1 again
6. Here is the bug

Tested in Mozilla 2.0.9, IE6, Opera 9.23.

DieHard_MIB
20 Nov 2007, 8:22 AM
I also advice you to add check of 'v == null' in setValue() method, cause it triggers error while trying v.split() with 'v = null' passed.

andrei.neculau
20 Nov 2007, 8:34 AM
hmm - true. It happens when the list is expanded and you select the second tab, and back.

because of my location and terminal, i have a reqiest in order to process the bug quicker:please put ext-debug-all.js instead of ext-all.js - thanks

@diehard_mib : thanks. Done. I will wait to see how this width/tab issue solves out and then publish an update

mishanian
20 Nov 2007, 1:15 PM
Hi Andrie,
Thanks for all your effort and nice job that you done!
Just a quick question:
Does your program can generate a "Multi Combo Box" that has "Autotext" as well.
I mean I want a Combobox with both facility of autosuggest and Multiselect.
If your program does not have this facility, do you have any plan to do that?
Please advice
Thanks,
Mehran

pozirk
21 Nov 2007, 1:26 AM
hmm - true. It happens when the list is expanded and you select the second tab, and back.

because of my location and terminal, i have a reqiest in order to process the bug quicker:please put ext-debug-all.js instead of ext-all.js - thanks


done.

jeff.levine
21 Nov 2007, 6:46 AM
Hi there,

Great work on this! I was able to get it up and running in my Editor Grid with just one small problem. If the initial values for the field in my grid were multiple selections, then the very first time I open the multiselect box, the selections aren't selected. I traced this to the case where setValue is called before onLoad (as is the case in my code in the editor on the first open). If the value is an array like [ 4, 1 ], then in onLoad the selectByValue is called with [ "4, 1" ] instead of [ 4, 1 ].

I changed this line in onLoad and all was well:
this.selectByValue(this.value, true);
to
this.selectByValue(this.valueArray, true);

Hope this helps!

mishanian
21 Nov 2007, 9:54 AM
Hi,
Does your program can generate a "Multi Combo Box" that has "Autotext" as well.
I mean I want a Combobox with both facility of autosuggest and Multiselect.
If your program does not have this facility, do you have any plan to do that?

andrei.neculau
21 Nov 2007, 12:35 PM
@mishanian - you don't need to publish the same thing twice. No, you cannot have editable (and implicitly typeAhead) when you use this component with multiSelect:true. The thing is like this: how should this work? imagine you have a country list and you selected already United States and Germany. Then you type "Fra"... what should happen now?... you should definitely have France available... but what happens with the other two?.. should they be also in the list?.. so... typeAhead should work more like... filter the non-selected items and show them in addition to the selected ones?!

2nd thing - imagine you have the field with United States selected.. so you see the text "United States" in the field. When you start typing in the field, what should happen? Should it overwrite the text and start filtering?.. Should it leave the text alone, and just expand the list, and filter it based on the text?

I would really be happy to see some comments on this, people.

@jeff.levine - I will carefully look into this and similar events. A real thanks!

@pozirk - Thanks. I will look into it right now! and come back with the results

wanclark
22 Nov 2007, 12:26 AM
Hi, I have just tested the latest version in editgrid, but got error: "v have no property". (noted: the version before 12/11/07, no problems). -- Settled by PaloAlto's version.
One more, do u have any ideas about when double clicked grid cell, highlight the exist items (history) on selection menu?

mishanian
22 Nov 2007, 8:10 AM
@mishanian - you don't need to publish the same thing twice. No, you cannot have editable (and implicitly typeAhead) when you use this component with multiSelect:true. The thing is like this: how should this work? imagine you have a country list and you selected already United States and Germany. Then you type "Fra"... what should happen now?... you should definitely have France available... but what happens with the other two?.. should they be also in the list?.. so... typeAhead should work more like... filter the non-selected items and show them in addition to the selected ones?!

2nd thing - imagine you have the field with United States selected.. so you see the text "United States" in the field. When you start typing in the field, what should happen? Should it overwrite the text and start filtering?.. Should it leave the text alone, and just expand the list, and filter it based on the text?


Sorry Andrei,
I really like your excellent program. Maybe we can have 2 different text box: 1) for search and 2) for showing the selected countries and 3) ofcourse something like add button when your search selected, selection add to "Selected Items"

I appreciate if you can help me in this issue,
Mehran

evilized
26 Nov 2007, 2:03 PM
hi andrie, have u a nice ext... :)

but i've a problem with this like in IE7... see the screenshots for a example...

i dont know why it is like working wrong :(

can anybody helpme please?? thx u

my code is the follow:


new Ext.ux.Andrie.Select({
fieldLabel:'Grupos de destino',
typeAhead: true,
editable:false,
triggerAction: 'all',
forceSelection:true,
name:'g_ids',
displayField:'g_name',
valueField:'g_id',
emptyText:'Seleccione el grupo de destino',
hiddenName:'g_ids',
store: new Ext.data.JsonStore({
url: 'resources/backend/grupos.php?do=grid',
root: 'rows',
fields: ['g_id', 'g_name']
}),
lazyRender:true,
multiSelect:true,
minLength:1
})

PaloAlto
29 Nov 2007, 10:57 AM
Andrei,

Thanks for sharing this class; It is well suited for use in conjunction with your pPageSize plug-in. However, it was producing errors for me, so I fixed it and am sharing it with you~ Andrie- hopefully you don't mind too much that I've versioned it as 0.4.2.

Keep up the nice work!

Best Regards,
Jay


file: Select.js


/**
*
* @author Andrei Neculau <andrei.neculau@gmail.com>
* http://andreineculau.wordpress.com
*
* @class Ext.ux.Andrie.Select
* A combobox control with support for multiSelect.
*
* @extends Ext.form.ComboBox
*
* @constructor
* Create a new Select.
*
* @param {Object} config Configuration options
*
* @version 0.4.2
*
*/

/**
*
* @author Jay Taylor <jtaylor@veracitycom.net>
* Veracity Communications <http://veracitycom.net>
*
* @date 2007-11-29
*
* @note changed line 546, v.split(...) to String(v).split(...) because if/when
* v is an integer (or anything but a string), there may not be a split
* method availabe.
*
*/

Ext.apply(Ext.DataView.prototype, {
deselect:function(node, suppressEvent){
if(this.isSelected(node)){
var node = this.getNode(node);
this.selected.removeElement(node);
if(this.last == node.viewIndex){
this.last = false;
}
Ext.fly(node).removeClass(this.selectedClass);
if(!suppressEvent){
this.fireEvent('selectionchange', this, this.selected.elements);
}
}
}
});

Ext.namespace('Ext.ux.Andrie');

Ext.ux.Andrie.Select = function(config){
if (config.transform && typeof config.multiSelect == 'undefined'){
var o = Ext.getDom(config.transform);
config.multiSelect = (Ext.isIE ? o.getAttributeNode('multiple').specified : o.hasAttribute('multiple'));
}
config.hideTrigger2 = config.hideTrigger2||config.hideTrigger;
Ext.ux.Andrie.Select.superclass.constructor.call(this, config);
}

Ext.extend(Ext.ux.Andrie.Select, Ext.form.ComboBox, {
/**
* @cfg {Boolean} multiSelect Multiple selection is allowed (defaults to false)
*/
multiSelect:false,
/**
* @cfg {Integer} minLength Minimum number of required items to be selected
*/
minLength:0,
/**
* @cfg {String} minLengthText Validation message displayed when minLength is not met.
*/
minLengthText:'Minimum {0} items required',
/**
* @cfg {Integer} maxLength Maximum number of allowed items to be selected
*/
maxLength:Number.MAX_VALUE,
/**
* @cfg {String} maxLengthText Validation message displayed when maxLength is not met.
*/
maxLengthText:'Maximum {0} items allowed',
/**
* @cfg {Boolean} clearTrigger Show the clear button (defaults to true)
*/
clearTrigger:true,
/**
* @cfg {Boolean} history Add selected value to the top of the list (defaults to false)
*/
history:false,
/**
* @cfg {Integer} historyMaxLength Number of entered values to remember. 0 means remember all (defaults to 0)
*/
historyMaxLength:0,
/**
* @cfg {String} separator Separator to use for the values passed to setValue (defaults to comma)
*/
separator:',',
/**
* @cfg {String} displaySeparator Separator to use for displaying the values (defaults to comma)
*/
displaySeparator:',',

// private
valueArray:[],

// private
rawValueArray:[],

initComponent:function(){
//from twintrigger
this.triggerConfig = {
tag:'span', cls:'x-form-twin-triggers', cn:[
{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger1Class},
{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger2Class}
]
};

Ext.ux.Andrie.Select.superclass.initComponent.call(this);
if (this.multiSelect){
this.typeAhead = false;
this.editable = false;
//this.lastQuery = this.allQuery;
this.triggerAction = 'all';
this.selectOnFocus = false;
}
if (this.history){
this.forceSelection = false;
}
if (this.value){
this.setValue(this.value);
}
},

hideTrigger1:true,

getTrigger:Ext.form.TwinTriggerField.prototype.getTrigger,

initTrigger:Ext.form.TwinTriggerField.prototype.initTrigger,

trigger1Class:'x-form-clear-trigger',
trigger2Class:'x-form-arrow-trigger',

onTrigger2Click:function(){
this.onTriggerClick();
},

onTrigger1Click:function(){
this.clearValue();
},

initList:function(){
if(!this.list){
var cls = 'x-combo-list';

this.list = new Ext.Layer({
shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
});

var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
this.list.setWidth(lw);
this.list.swallowEvent('mousewheel');
this.assetHeight = 0;

if(this.title){
this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
this.assetHeight += this.header.getHeight();
}

this.innerList = this.list.createChild({cls:cls+'-inner'});
this.innerList.on('mouseover', this.onViewOver, this);
this.innerList.on('mousemove', this.onViewMove, this);
this.innerList.setWidth(lw - this.list.getFrameWidth('lr'))

if(this.pageSize){
this.footer = this.list.createChild({cls:cls+'-ft'});
this.pageTb = new Ext.PagingToolbar({
store:this.store,
pageSize: this.pageSize,
renderTo:this.footer
});
this.assetHeight += this.footer.getHeight();
}

if(!this.tpl){
this.tpl = '<tpl for="."><div class="'+cls+'-item">{' + this.displayField + '}</div></tpl>';
}

/**
* The {@link Ext.DataView DataView} used to display the ComboBox's options.
* @type Ext.DataView
*/
this.view = new Ext.DataView({
applyTo: this.innerList,
tpl: this.tpl,
singleSelect: true,

// ANDRIE
multiSelect: this.multiSelect,
simpleSelect: true,
overClass:cls + '-cursor',
// END

selectedClass: this.selectedClass,
itemSelector: this.itemSelector || '.' + cls + '-item'
});

this.view.on('click', this.onViewClick, this);
// ANDRIE
this.view.on('beforeClick', this.onViewBeforeClick, this);
// END

this.bindStore(this.store, true);

// ANDRIE
if (this.valueArray.length){
this.selectByValue(this.valueArray);
}
// END

if(this.resizable){
this.resizer = new Ext.Resizable(this.list, {
pinned:true, handles:'se'
});
this.resizer.on('resize', function(r, w, h){
this.maxHeight = h-this.handleHeight-this.list.getFrameWidth('tb')-this.assetHeight;
this.listWidth = w;
this.innerList.setWidth(w - this.list.getFrameWidth('lr'));
this.restrictHeight();
}, this);
this[this.pageSize?'footer':'innerList'].setStyle('margin-bottom', this.handleHeight+'px');
}
}
},

// private
initEvents:function(){
Ext.form.ComboBox.superclass.initEvents.call(this);

this.keyNav = new Ext.KeyNav(this.el, {
"up" : function(e){
this.inKeyMode = true;
this.hoverPrev();
},

"down" : function(e){
if(!this.isExpanded()){
this.onTriggerClick();
}else{
this.inKeyMode = true;
this.hoverNext();
}
},

"enter" : function(e){
if (this.isExpanded()){
this.inKeyMode = true;
var hoveredIndex = this.view.indexOf(this.view.lastItem);
this.onViewBeforeClick(this.view, hoveredIndex, this.view.getNode(hoveredIndex), e);
this.onViewClick(this.view, hoveredIndex, this.view.getNode(hoveredIndex), e);
}else{
this.onSingleBlur();
}
return true;
},

"esc" : function(e){
this.collapse();
},

"tab" : function(e){
this.collapse();
return true;
},

"home" : function(e){
this.hoverFirst();
return false;
},

"end" : function(e){
this.hoverLast();
return false;
},

scope : this,

doRelay : function(foo, bar, hname){
if(hname == 'down' || this.scope.isExpanded()){
return Ext.KeyNav.prototype.doRelay.apply(this, arguments);
}
// ANDRIE
if(hname == 'enter' || this.scope.isExpanded()){
return Ext.KeyNav.prototype.doRelay.apply(this, arguments);
}
// END
return true;
},

forceKeyDown: true
});
this.queryDelay = Math.max(this.queryDelay || 10,
this.mode == 'local' ? 10 : 250);
this.dqTask = new Ext.util.DelayedTask(this.initQuery, this);
if(this.typeAhead){
this.taTask = new Ext.util.DelayedTask(this.onTypeAhead, this);
}
if(this.editable !== false){
this.el.on("keyup", this.onKeyUp, this);
}
// ANDRIE
if(!this.multiSelect){
if(this.forceSelection){
this.on('blur', this.doForce, this);
}
this.on('focus', this.onSingleFocus, this);
this.on('blur', this.onSingleBlur, this);
}
this.on('change', this.onChange, this);
// END
},

// ability to delete value with keyboard
doForce:function(){
if(this.el.dom.value.length > 0){
if (this.el.dom.value == this.emptyText){
this.clearValue();
}
else if (!this.multiSelect){
this.el.dom.value =
this.lastSelectionText === undefined?'':this.lastSelectionText;
this.applyEmptyText();
}
}
},


/* listeners */
// private
onLoad:function(){
if(!this.hasFocus){
return;
}
if(this.store.getCount() > 0){
this.expand();
this.restrictHeight();
if(this.lastQuery == this.allQuery){
if(this.editable){
this.el.dom.select();
}
// ANDRIE
this.selectByValue(this.value, true);
/*if(!this.selectByValue(this.value, true)){
this.select(0, true);
}*/
// END
}else{
this.selectNext();
if(this.typeAhead && this.lastKey != Ext.EventObject.BACKSPACE && this.lastKey != Ext.EventObject.DELETE){
this.taTask.delay(this.typeAheadDelay);
}
}
}else{
this.onEmptyResults();
}
//this.el.focus();
},

// private
onSelect:function(record, index){
if(this.fireEvent('beforeselect', this, record, index) !== false){
this.addValue(record.data[this.valueField || this.displayField]);
this.fireEvent('select', this, record, index);
if (!this.multiSelect){
this.collapse();
}
}
},

// private
onSingleFocus:function(){
this.oldValue = this.getRawValue();
},

// private
onSingleBlur:function(){
var r = this.findRecord(this.displayField, this.getRawValue());
if (r){
this.select(this.store.indexOf(r));
return;
}
if (String(this.oldValue) != String(this.getRawValue())){
this.setValue(this.getRawValue());
this.fireEvent('change', this, this.oldValue, this.getRawValue());
}
this.oldValue = String(this.getRawValue());
},

// private
onChange:function(){
if (!this.clearTrigger){
return;
}
if (this.getValue() != ''){
this.triggers[0].show();
}else{
this.triggers[0].hide();
}
},



/* list/view functions AND listeners */
collapse:function(){
this.hoverOut();
Ext.ux.Andrie.Select.superclass.collapse.call(this);
},

expand:function(){
Ext.ux.Andrie.Select.superclass.expand.call(this);
this.hoverFirst();
},

// private
onViewOver:function(e, t){
if(this.inKeyMode){ // prevent key nav and mouse over conflicts
return;
}
// ANDRIE
/*var item = this.view.findItemFromChild(t);
if(item){
var index = this.view.indexOf(item);
this.select(index, false);
}*/
// END
},

// private
onViewBeforeClick:function(vw, index, node, e){
this.preClickSelections = this.view.getSelectedIndexes();
},

// private
onViewClick:function(vw, index, node, e){
if (typeof index != 'undefined'){
var arrayIndex = this.preClickSelections.indexOf(index);
if (arrayIndex != -1 && this.multiSelect){
this.removeValue(this.store.getAt(index).data[this.valueField || this.displayField]);
if (this.inKeyMode){
this.view.deselect(index, true);
}
this.hover(index, true);
}else{
var r = this.store.getAt(index);
if (r){
if (this.inKeyMode){
this.view.select(index, true);
}
this.onSelect(r, index);
this.hover(index, true);
}
}
}

// from the old doFocus argument; don't really know its use
if(vw !== false){
this.el.focus();
}
},



/* value functions */
/**
* Add a value if this is a multi select
* @param {String} value The value to match
*/
addValue:function(v){
if (!this.multiSelect){
this.setValue(v);
return;
}
if (v instanceof Array){
v = v[0];
}
v = String(v);
if (this.valueArray.indexOf(v) == -1){
var text = v;
var r = this.findRecord(this.valueField || displayField, v);
if(r){
text = r.data[this.displayField];
if (this.view){
this.select(this.store.indexOf(r));
}
}else if(this.forceSelection){
return;
}
var result = Ext.apply([], this.valueArray);
result.push(v);
var resultRaw = Ext.apply([], this.rawValueArray);
resultRaw.push(text);
v = result.join(this.separator || ',');
text = resultRaw.join(this.displaySeparator || this.separator || ',');
this.commonChangeValue(v, text, result, resultRaw);
}
},

/**
* Remove a value
* @param {String} value The value to match
*/
removeValue:function(v){
if (v instanceof Array){
v = v[0];
}
v = String(v);
if (this.valueArray.indexOf(v) != -1){
var text = v;
var r = this.findRecord(this.valueField || displayField, v);
if(r){
text = r.data[this.displayField];
if (this.view){
this.deselect(this.store.indexOf(r));
}
}else if(this.forceSelection){
return;
}
var result = Ext.apply([], this.valueArray);
result.remove(v);
var resultRaw = Ext.apply([], this.rawValueArray);
resultRaw.remove(text);
v = result.join(this.separator || ',');
text = resultRaw.join(this.displaySeparator || this.separator || ',');
this.commonChangeValue(v, text, result, resultRaw);
}
},

/**
* Sets the specified value for the field. The value can be an Array or a String (optionally with separating commas)
* If the value finds a match, the corresponding record text will be displayed in the field.
* @param {Mixed} value The value to match
*/
setValue:function(v){
var result = [],
resultRaw = [];
if (!(v instanceof Array)){
if (this.separator && this.separator !== true){
v = String(v).split(String(this.separator));
}else{
v = [v];
}
}
else if (!this.multiSelect){
v = v.slice(0,1);
}
for (var i=0, len=v.length; i<len; i++){
var value = v[i];
var text = value;
if(this.valueField){
var r = this.findRecord(this.valueField || this.displayField, value);
if(r){
text = r.data[this.displayField];
}else if(this.forceSelection){
continue;
}
}
result.push(value);
resultRaw.push(text);
}
v = result.join(this.separator || ',');
text = resultRaw.join(this.displaySeparator || this.separator || ',');

this.commonChangeValue(v, text, result, resultRaw);

if (this.history && !this.multiSelect && this.mode == 'local'){
this.addHistory(this.valueField?this.getValue():this.getRawValue());
}
if (this.view){
this.view.clearSelections();
this.selectByValue(this.valueArray);
}
},

// private
commonChangeValue:function(v, text, result, resultRaw){
this.lastSelectionText = text;
this.valueArray = result;
this.rawValueArray = resultRaw;
if(this.hiddenField){
this.hiddenField.value = v;
}
Ext.form.ComboBox.superclass.setValue.call(this, text);
this.value = v;

if (this.oldValueArray != this.valueArray){
this.fireEvent('change', this, this.oldValueArray, this.valueArray);
}
this.oldValueArray = Ext.apply([], this.valueArray);
},

validateValue:function(value){
if(!Ext.ux.Andrie.Select.superclass.validateValue.call(this, value)){
return false;
}
if (this.valueArray.length < this.minLength){
this.markInvalid(String.format(this.minLengthText, this.minLength));
return false;
}
if (this.valueArray.length > this.maxLength){
this.markInvalid(String.format(this.maxLengthText, this.maxLength));
return false;
}
return true;
},

clearValue:function(){
this.commonChangeValue('', '', [], []);
if (this.view){
this.view.clearSelections();
}
Ext.ux.Andrie.Select.superclass.clearValue.call(this);
},

reset:function(){
if (this.view){
this.view.clearSelections();
}
Ext.ux.Andrie.Select.superclass.reset.call(this);
},

getValue : function(asArray){
if (asArray){
return typeof this.valueArray != 'undefined' ? this.valueArray : [];
}
return Ext.ux.Andrie.Select.superclass.getValue.call(this);
},

getRawValue:function(asArray){
if (asArray){
return typeof this.rawValueArray != 'undefined' ? this.rawValueArray : [];
}
return Ext.ux.Andrie.Select.superclass.getRawValue.call(this);
},



/* selection functions */
select:function(index, scrollIntoView){
this.selectedIndex = index;
if (!this.view){
return;
}
this.view.select(index, this.multiSelect);
if(scrollIntoView !== false){
var el = this.view.getNode(index);
if(el){
this.innerList.scrollChildIntoView(el, false);
}
}
},

deselect:function(index, scrollIntoView){
this.selectedIndex = index;
this.view.deselect(index, this.multiSelect);
if(scrollIntoView !== false){
var el = this.view.getNode(index);
if(el){
this.innerList.scrollChildIntoView(el, false);
}
}
},

selectByValue:function(v, scrollIntoView){
this.hoverOut();
if(v !== undefined && v !== null){
if (!(v instanceof Array)){
v = [v];
}
var result = [];
for (var i=0, len=v.length; i<len; i++){
var value = v[i];
var r = this.findRecord(this.valueField || this.displayField, value);
if(r){
this.select(this.store.indexOf(r), scrollIntoView);
result.push(value);
}
}
return result.join(',');
}
return false;
},

// private
selectFirst:function(){
var ct = this.store.getCount();
if(ct > 0){
this.select(0);
}
},

// private
selectLast:function(){
var ct = this.store.getCount();
if(ct > 0){
this.select(ct);
}
},



/* hover functions */
/**
* Hover an item in the dropdown list by its numeric index in the list.
* @param {Number} index The zero-based index of the list item to select
* @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
* hovered item if it is not currently in view (defaults to true)
*/
hover:function(index, scrollIntoView){
if (!this.view){
return;
}
this.hoverOut();
var node = this.view.getNode(index);
this.view.lastItem = node;
Ext.fly(node).addClass(this.view.overClass);
if(scrollIntoView !== false){
var el = this.view.getNode(index);
if(el){
this.innerList.scrollChildIntoView(el, false);
}
}
},

hoverOut:function(){
if (!this.view){
return;
}
if (this.view.lastItem){
Ext.fly(this.view.lastItem).removeClass(this.view.overClass);
delete this.view.lastItem;
}
},

// private
hoverNext:function(){
if (!this.view){
return;
}
var ct = this.store.getCount();
if(ct > 0){
if(!this.view.lastItem){
this.hover(0);
}else{
var hoveredIndex = this.view.indexOf(this.view.lastItem);
if(hoveredIndex < ct-1){
this.hover(hoveredIndex+1);
}
}
}
},

// private
hoverPrev:function(){
if (!this.view){
return;
}
var ct = this.store.getCount();
if(ct > 0){
if(!this.view.lastItem){
this.hover(0);
}else{
var hoveredIndex = this.view.indexOf(this.view.lastItem);
if(hoveredIndex != 0){
this.hover(hoveredIndex-1);
}
}
}
},

// private
hoverFirst:function(){
var ct = this.store.getCount();
if(ct > 0){
this.hover(0);
}
},

// private
hoverLast:function(){
var ct = this.store.getCount();
if(ct > 0){
this.hover(ct);
}
},



/* history functions */

addHistory:function(value){
if (!value.length){
return;
}
var r = this.findRecord(this.valueField || this.displayField, value);
if (r){
this.store.remove(r);
}else{
//var o = this.store.reader.readRecords([[value]]);
//r = o.records[0];
var o = {};
if (this.valueField){
o[this.valueField] = value;
}
o[this.displayField] = value;
r = new this.store.reader.recordType(o);
}
this.store.clearFilter();
this.store.insert(0, r);
this.pruneHistory();
},

// private
pruneHistory:function(){
if (this.historyMaxLength == 0){
return;
}
if (this.store.getCount()>this.historyMaxLength){
var overflow = this.store.getRange(this.historyMaxLength, this.store.getCount());
for (var i=0, len=overflow.length; i<len; i++){
this.store.remove(overflow[i]);
}
}
}
});
Ext.reg('select', Ext.ux.Andrie.Select);

Terry Young
4 Dec 2007, 7:30 PM
I don't know what PaloAlto fixed as he didn't say anything about what his problem was, and PaloAlto's line number does not seem to be correct. Anyway, here's another problem, specifically with Multi Select.

Steps to reproduce the problem

1) Reset the form which contains a Multi Select. Reusing your example, I simply called formSelect.getForm().reset();

2) Choose any option in the Multi Select

3) Notice the extra separator "," in the beginning of the resulting display value

It seems that after a reset(), the valueArray and rawValueArray becomes [""] instead of [].

I fixed it temporarily in your addValue() function, as follows, in BOLD:



/* value functions */
/**
* Add a value if this is a multi select
* @param {String} value The value to match
*/
addValue:function(v){
if (!this.multiSelect){
this.setValue(v);
return;
}
if (v instanceof Array){
v = v[0];
}
v = String(v);
if (this.valueArray.indexOf(v) == -1){
var text = v;
var r = this.findRecord(this.valueField || displayField, v);
if(r){
text = r.data[this.displayField];
if (this.view){
this.select(this.store.indexOf(r));
}
}else if(this.forceSelection){
return;
}
if (this.valueArray.length == 1 && this.valueArray[0] == '') {
this.valueArray = []; this.rawValueArray = [];
}
var result = Ext.apply([], this.valueArray);
result.push(v);
var resultRaw = Ext.apply([], this.rawValueArray);
resultRaw.push(text);
v = result.join(this.separator || ',');
text = resultRaw.join(this.displaySeparator || this.separator || ',');
this.commonChangeValue(v, text, result, resultRaw);
}
},


I haven't done extensive testing, and I'm not sure if this is a good fix, and I haven't gone to the point to test values on server-side either. I have this feeling that the fix should be done in reset() instead. Perhaps you could have a look?

PaloAlto
5 Dec 2007, 3:38 PM
I don't know what PaloAlto fixed as he didn't say anything about what his problem was, and PaloAlto's line number does not seem to be correct ...

I documented the changes I made in a comment at the top of the file, but I can see how it would be easy to gloss over. Here is my note, explicitly:



* @note changed line 484, v.split(...) to String(v).split(...) because if/when
* v is an integer (or anything but a string), there may not be a split
* method availabe.


I did have the wrong line number, so thank you for bringing this my attention.

Hopefully this clarifies the situation for you.

Regards,
Jay

cocorossello
2 Jan 2008, 9:40 AM
Hi Andrie,

Thx for sharing that!!

I actually have a problem. When i load a form using your widget in singlemode, the combo doesnt get rendered. It all works fine when i switch back to combobox.

I'm almost sure the problem is in the record.


//Record definition
Sala: Ext.data.Record.create([
{name: 'id' , type:'int'},
{name: 'nombre'},
{name: 'centro__nombre', mapping:'centro.nombre'},
{name: 'centro__id', mapping:'centro.id'}
]);

//select definition
{
xtype:'select',
store:Stores.get('Centro'),
fieldLabel:'Centro',
valueField:'id',
displayField:'descripcionCombo',
forceSelection:true,
triggerAction:'all',
mode:'local',
editable:true,
typeAhead: true,
hiddenName: 'centro__id' ,
name:'centro'
}


The item is actually selected (see screenshot 2), is just a rendering problem or whatever.
Debugging a little bit, i get to the set value function with valid values.

(line 570 +-)
this.commonChangeValue(v, text, result, resultRaw);


Here all vars have good values, but it doesn't get rendered. Without loading the form, everything works ok.

Tested on ie and firefox and with last version.

cocorossello
2 Jan 2008, 10:11 AM
Ok, i can confirm that the problem only happens when i create the form.

With the form rendered, if i reload or select a item or clear, works fine.

Maybe i should put a defer to make time to render the combobox?

vincentc
3 Jan 2008, 9:45 AM
Hi Andrie,

Thanks for your great job.

But actually, i have some small problems when selected items, in multiselect mode. Here is the code :


var ds_categories = new Ext.data.JsonStore({
id: 'category_id',
fields: ['category_id', 'name', 'color'],
data: categories, // an array of objects
sortInfo: {field: 'name', direction: 'ASC'}
});
new Ext.ux.Andrie.Select({
multiSelect: true,
fieldLabel: 'Category',
store: ds_categories,
mode: 'local',
displayField: 'name',
hiddenName: 'category_id',
valueField: 'category_id'
});


1. When you expand the select by clicking on the field (not on the trigger) and i press enter, i've got an error, cause no item selected i suppose :


A has no properties
[Break on this error] Ext.DataView=Ext.extend(Ext.BoxComponent,{selectedClass:"x-view-selected",emptyT...


2. After selections, when i click on the field to collapse, the values in the hidden field are not the hidden values of the items but the text. I suppose here that ther is a lack of the method 'collapseIf' :


collapseIf : function(e){
if(!e.within(this.wrap) && !e.within(this.list)){
this.collapse();
}
},


3. Idem to 2, when you press enter but i dont find something for the moment.


Hope you could help me and improve this extension.
Thank you

vincentc
4 Jan 2008, 1:09 AM
Hello,

I think i have found the problem for point 3 : in the "enter" event, onSingleBlur may be execute only for single select. So i have added a condition :


...
"enter" : function(e){
if (this.isExpanded()){
this.inKeyMode = true;
var hoveredIndex = this.view.indexOf(this.view.lastItem);
this.onViewBeforeClick(this.view, hoveredIndex, this.view.getNode(hoveredIndex), e);
this.onViewClick(this.view, hoveredIndex, this.view.getNode(hoveredIndex), e);
}else if(!this.multiSelect){
this.onSingleBlur();
}
return true;
},
...

fastwings
4 Jan 2008, 2:42 AM
hello i have try to do
select box thu
ux.Andrie.Select
i build some thing like this



var ds = new Ext.data.SimpleStore({
fields:['countryCode', 'countryName'],
data:[
['US', 'United States'],
['DE', 'Germany'],
['FR', 'France']
]
});

var config = {
store:ds,
valueField:'countryCode',
displayField:'countryName',
triggerAction:'all',
mode:'local'
};
var combo = new Ext.form.ComboBox(Ext.applyIf({
fieldLabel:'Field'
}, config));
...
...
var form = new Ext.form.FormPanel({
labelWidth: 75,
title: 'Register Client',
bodyStyle:'padding:15px',
height:400,
baseCls: 'x-plain',
frame:true,
labelWidth: 55,
url:'save-form.php',
width: 350,
labelPad: 10,
items: [{
xtype:'tabpanel',
activeTab: 0,
xtype:'fieldset',
defaults:{autoHeight:true, bodyStyle:'padding:10px'},
items:[{
title:'Personal Details',
layout:'form',
defaults: {width: 350},
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false
},{
fieldLabel: 'Last Name',
name: 'last',
allowBlank:false
},

{
fieldLabel: 'Company',
name: 'company'
} ,
combo
},{
title:'Personal Details',
layout:'form',

defaults: {width: 350},
defaultType: 'textfield',

items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false,
value: 'Jack'
},{
fieldLabel: 'Last Name',
name: 'last',
value: 'Slocum'
},{
fieldLabel: 'Company',
name: 'company',
value: 'Ext JS'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
},{
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}]
},
{
title:'Phone Numbers',
layout:'form',
defaults: {width: 350},
defaultType: 'textfield',

items: [{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}]
}]
}],

buttons: [{
text: 'Register'
}]
});

but its destroy all what i did
how i fix this thx in advence
plus i got more questiopn how i switch to debug mode???

6epcepk
5 Jan 2008, 1:08 PM
I'm also have a bug like cocorossello...
FF 2.0.8

Ronaldo
7 Jan 2008, 11:22 AM
Hi!

First of all, thanks for this excellent widget. For me, it was one of the last missing widgets (well, so far) for ext.
A minor issue though: I'd like to have it resized as my window / form are resized. I'm not sure if this is already included and I'm not configuring it right, or it just isn't implemented yet. Could you shine a light on this?

TIA
Ronald


var formPanel = new Ext.form.FormPanel({
autoWidth: true,
//autoHeight: true,
layout: 'anchor',
bodyStyle: 'padding:5px 5px 5px;',
defaultType: 'textfield',
items: [{
//autoWidth: true,
//autoHeight: true,
anchor: '100% 100%',
xtype: "itemselector",
name: "itemselector",
dataFields: ["id", "name"],
fromData: [[123, "One Hundred Twenty Three"], ["1", "One"], ["2", "Two"], ["3", "Three"], ["4", "Four"], ["5", "Five"], ["6", "Six"], ["7", "Seven"], ["8", "Eight"], ["9", "Nine"]],
toData: [["10", "Ten"]],
msWidth: 250,
msHeight: 250,
valueField: "id",
displayField: "name",
imagePath:'/DT/Ext/2.0/resources/css/multiselect/',
isFormField: false,
//switchToFrom:true,
toLegend: "Selected groups",
fromLegend: "Available groups",
toTBar: [{
text: "Clear",
handler: function(){
var i = formPanel.getForm().findField("itemselector");
i.reset.call(i);
}
}]
}]
});

this.win = new Ext.Window({
title: 'Example',
width: 600,
height: 450,
shim: false,
animCollapse: false,
constrainHeader: true,
minimizable: true,
maximizable: true,
layout: 'fit',
items: formPanel
});

cocinerox
8 Jan 2008, 4:35 PM
Hi Andrei,

Thank you for this great widget.

I noticed that in the last (v0.4.1) version one can use the 'click then SHIFT+click' method to visually multiselect more items simultaneously, which is so useful I think, but the internal array of selected values doesn't changes properly: it acts like without SHIFT. Any comments on this?

Thanks again, cocinerox

nanich
9 Jan 2008, 11:42 PM
This extension is very useful for my application. Thank you very much.

pozirk
10 Jan 2008, 7:53 AM
I have the same problems with combobox render. Is anyone can fix it?
Thank you.

Dumbledore
21 Jan 2008, 4:15 AM
i have a mistery rendering bug:


},{
layout: 'form',
bodyStyle : 'padding:0 5px 0',
border:false,
defaults: {
width: 200
},
items: [{
xtype:'textfield',
fieldLabel : LANG.FORMS_USERADMIN_LastName,
name : 'useradmin_lastname'
},
multiS = new Ext.ux.Andrie.Select(Ext.applyIf({
fieldLabel: LANG.FORMS_USERADMIN_profiles,
multiSelect: false,
minLength: 1
},{
store: new Ext.data.JsonStore({
url: '/server_response/register_getgroups.php',
root: '',
fields: ['id', 'group_name']
}),
hiddenName : 'useradmin_profiles',
valueField: 'id',
displayField: 'group_name',
triggerAction: 'all',
allowBlank : false,
mode: 'remote',
emptyText: LANG.UX_ANDRIESELECT_emptyText,
minLengthText : LANG.UX_ANDRIESELECT_minLengthText
})),
{
xtype : 'textfield',
fieldLabel : LANG.FORMS_USERADMIN_SecurityAnswer,
name : 'useradmin_sequrityanswer'
}]
}]

i have no field, but when i look in firebug the element style has a width:0 ????

Any ideas?

tecap
21 Jan 2008, 10:48 AM
Hello!
I use ComboBoxes with data from my database. How can I automatically adapt the items lists width to the longest data (without changing the input field width, fixed to 60px)?
http://extjs.com/forum/images/misc/progress.gif Thanks in advance for your help!

crxtech
22 Jan 2008, 8:48 AM
First off, thanks for the great multi select dd. Is there a way to do a tooltip for the clear (x) button. I know its pretty obvious what the button does, but some of my users aren't the brightest...

JohnStalcup
27 Jan 2008, 11:50 AM
pretty slick

ajmstyle
12 Feb 2008, 1:30 PM
Great widget! Got a question though. I noticed this submits the value that's within the text area. Is there a way for it to submit the valuesField's data and not the displayField as well?

dandfra
13 Feb 2008, 1:01 AM
Hi, I have a javascript error in IE with a remote store. I attached and example (with javascript code to simulate a ajax call) . Step to reproduce:

extract the attached zip file in the example directory of ext
open with IE6 the bug.htm file
open the displayed select and select labelRamota1 (the first element)
click on the label, and remove the last character to start typeAhead

I don't really understand the error (it seems to me that it should work, I don't really understand why IE doesn't work...)
I workarounded the problem chnging Select.js as follows. I don't think it's a proper solution, but it works....



expand:function(){
Ext.ux.Andrie.Select.superclass.expand.call(this);
//this.hoverFirst(); <-- commenting this line is my workaround
}

quockhanh82
13 Feb 2008, 9:18 AM
Hi, Andrei !
I want question : Do valueArray like :[value1,value2,...valuek] ? Because I want insert all value into database.

saJoshua
28 Feb 2008, 5:52 PM
Hi Andrei,

I have set a json store as the store of a combo. I'd like to filter this list as the form loads, but the filtering only works after the list is rendered (by expanding the combo).



myStore: new Ext.data.JsonStore({
fields: ['type', 'id', 'description'],
root: 'myStore'
})

new Ext.ux.Andrie.Select({
id : 'myCombo',
store : myStore,
lazyInit : false,
hiddenName : 'myCombo',
fieldLabel : 'List',
mode : 'local',
valueField : 'id',
displayField : 'description',
typeAhead : true,
triggerAction : 'all',
emptyText : 'Select Items...',
selectOnFocus : true,
allowBlank : true,
forceSelection : true
})

// onload of the form:
myStore.filter('type',1)


I need to be able to change a second list and then filter this list depending on which item is selected in the second list.

I think my options are to either swap the stores on the combo, or to filter a single store assigned to the combo. I have tried both without success. If I filter the list and check FireBug on the 'focus' event of the combo, it says there are 4 items, which is correct for the applied filter, but when I continue outside of the function and expand the combo's dropdown list, it shows the full unfiltered list of data for the store.

After the list has been expanded, and I filter the list, it shows the correct number of items, but there is going to be confusion the first time the list is expanded about the extra items being shown.

Can you maybe help with this?

Much appreciated,
Joshua

nanich
4 Mar 2008, 9:44 AM
I've a requirement of showing checkboxes before each and every combobox value. Please help me in achieving this.

Thanks in advance.

andrei.neculau
26 Mar 2008, 2:04 PM
March 26, 2008
This extension has been discontinued! A new extension with the same capabilities, but with cleaner and smarter code will be uploaded within the future days.

I'm sorry that I've been out, but this is life.
I will apologize in advance for not replying to the latest comments, but I will not reply in the near future either, since this extension is discontinued.

Thanks for the support, and I hope you'll like the new extension!

SxOrpheus
2 Apr 2008, 1:21 AM
Any idea about a release date for the new extension?

mjlecomte
30 Apr 2008, 6:37 PM
check www.extjs.eu for an extension like this, very nice and well supported.

0m3r
13 May 2008, 12:57 AM
thank

tobiu
6 Jun 2008, 6:45 AM
hi andrei,

still working on the multi-select or anyone else?
if so, will it be ready this month or later?


thx and kind regards, tobiu

george.antoniadis
24 Jun 2008, 9:56 AM
Has anyone tried to transform an existing multiple selection selectbox to an Andrie.Select?
The transformation and posting seems fine but only lists the first selected value and not all the selected values.

Any ideas?

I'll try posting an example later on.

mthad
6 Jul 2008, 5:06 PM
March 26, 2008
This extension has been discontinued! A new extension with the same capabilities, but with cleaner and smarter code will be uploaded within the future days.
---------------
* This extension is merely the new-comer after Ext.ux.form.Select for Ext 1.x (http://extjs.com/forum/showthread.php?t=13757)

Same features are available. To summarize: a ComboBox with multiple selection support.
Nothing much changed on the surface, other than switching the config property singleSelect to it's counter-property: multiSelect. The reason behind the change is to make it more logical when using Ext.DataView.

Since 0.3.6 - it also features history capabilities (the former HistoryComboBox)

Live DEMO is available here (http://www.andrei.neculau.home.ro/extjs2/ux.Andrie.Select/Select_test.htm). Testcase is included in the attached ZIP file.

As always - looking forward to reactions on this! :)

TO DO (not in the very near future)
------
- add key search (Ext 1.x - SelectBox)
- add grouping capability (Ext 1.x - GroupComboBox)

Post Scriptum

I sincerely apologize, but you won't be seeing "Mine is better because..." regarding this post (http://extjs.com/forum/showthread.php?t=16466). People can choose and make up their own mind. This is one reason why I switched to Ext.ux.Andrie namespace. I want to govern over Ext.ux.Select (sounds like community-work, consensus toward official release) no more than I want somebody else to use Ext.ux.Andrie namespace (personal work).
I apologize for a second time because there was a "nice" delay since I promised to support Ext 2.x and the current time - release time. To be honest, this switch has only taken one day - today -, so it could have been released a long time ago.
All in all, I'd like to thanks the Ext2 team - it was fairly easier to implement this on the new framework, than it was on Ext1.-
[GMT 14:33 Nov. 5] - Update to v0.3.4 (fixed clearValue, improved reset, new clear button/trigger)
[GMT 23:14 Nov. 5] - Update to v0.3.5 (improved clear trigger and transform capabilities)
[GMT 10:04 Nov. 6] - Update to v0.3.6 (added history capabilities) [GMT 13:40 Nov. 7] - Update to v0.3.7 (removed a faulty JS hack - It's important to go ahead with this update!!!)
[GMT 17:02 Nov. 12] - Update to v0.3.8 (improved setValue function)
[GMT 10:35 Nov. 17] - Update to v0.4 (improvements and fixes + cleaner code; full changelog on the demo page)
[GMT 14:19 Nov 20] - Update to v0.4.1 - LIVE DEMO IS NOT YET UPDATED TO USE THE LATEST VERSION! (Having problems with accessing the webhost)



Please post the code. Couldn't able to open the zip file.

dwtebriel
7 Jul 2008, 10:09 AM
I'm not sure if this was intentional or not, but I found a quick bug fix in v0.4.1 of this extension. If your selects have numeric values, this will probably be throwing split function not found errors. A quick way to fix this is to cast the numeric value as a String so that it will work. I just made a quick edit in the Select code and it started working. Here's a clip of my code starting on line 519:



519 setValue:function(v){
520 var result = [],
521 resultRaw = [];
522 if (!(v instanceof Array)){
523 if (this.separator && this.separator !== true){
524 v = String(v);
525 v = v.split(String(this.separator));
526...
Hope this doesn't break any intended functionality. However, so far all of my test cases are working still. Hope this helps.

Thanks Andrei for all the work you put in on this extension. This really added a lot of utility to Ext forms. Hope you keep up the project! :)

rtconner
10 Jul 2008, 12:19 PM
Is there a new version I should be using somewhere? Link please?

rubenmb
15 Jul 2008, 1:34 AM
problem whit the size of component:

Only it(he,she) shows a row in the element, though it(he,she) contains all the information. I cannot enlarge the size of the component
[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<html>

<head>
<title>SiNPlE - Tramitador || Instituto de Estad

rubenmb
15 Jul 2008, 1:39 AM
sorry code correct


fieldSeleccion = new Ext.form.FieldSet({
title : 'Variables Disponibles',
collapsible : true,
autoHeight : true,
//anchor : '95%',
allowBlank : false,
width : 735,
labelAlign: 'left',
hideBorders : false,
buttonAlign : 'center',
layout : 'form',
items:[{
bodyStyle : 'padding:0px 0px;',
border : false,
hideLabel : 'true',
xtype:"itemselector",
name:"itemselector",
bodyStyle : 'margin:20px;',
width : 700,
height : 400,
dataFields:["code", "desc"],
fromData:[[123,"One Hundred Twenty Three"],
["1", "One"], ["2", "Two"], ["3", "Three"], ["4", "Four"], ["5", "Five"],
["6", "Six"], ["7", "Seven"], ["8", "Eight"], ["9", "Nine"]],
toData:[["10", "Ten"]],
msWidth:250,
msHeight:200,
valueField:"code",
displayField:"desc",
imagePath:"./js/ext/MultiSelect",
switchToFrom:false,
toLegend:"Seleccion",
fromLegend:"Disponibles",
toTBar:[{
text:"Clear",
handler:function(){
var i=panelVariables.getForm().findField("itemselector");
i.reset.call(i);
}
}]

}]
});


panelVariables = new Ext.form.FormPanel({
//allowBlank : false,
//collapsible : true,
//headerAsText : true,
//renderTo : 'panel',
autoHeight : true,
layout : 'form',
frame:true,
bodyStyle : 'padding:0px 0px',
//labelAlign : 'left',
items : [fieldSeleccion]
});
panelVariables.render('panelVariables');

rubenmb
15 Jul 2008, 1:54 AM
http://echopic.com/s35the image http://echopic.com/s35/edit/61d394a3966f2c06cc76e14ac6a5cb90

rubenmb
15 Jul 2008, 2:05 AM
Sorry, the image:

http : //echopic.com/s35

rubenmb
17 Jul 2008, 10:34 PM
This it is only one problem that I have with the component multiselect, someone can help me?

joao_candido
5 Aug 2008, 4:15 AM
Hi Andrie.

I

joao_candido
5 Aug 2008, 12:20 PM
I

joao_candido
19 Aug 2008, 5:00 AM
Please, I

saJoshua
20 Aug 2008, 12:44 AM
Hi,

The problem must be with a different piece of your code. Attached is a mini project that uses the snippet you posted. No problem there.

Joshua

joao_candido
25 Aug 2008, 6:44 AM
I

AmitOlsys
18 Sep 2008, 9:46 PM
Dear All,
I want to add multiselect combo in editorgrid panel for editing purpose.

columns:[{
header:'Term'
,id:'Term'
,align:'center'
,dataIndex:'Term'
,width:75
,sortable:false
,editor: new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'Term',
lazyRender:true,
listClass: 'x-combo-list-small'
})
},{
header:'DataItem'
,dataIndex:'DataItem'
,width:70
,align:'center'
,sortable:false
,editor: new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'DataItem',
lazyRender:true,
listClass: 'x-combo-list-small'
})
}]I wanted to add multiselect combo in one column field of editorgrid panel as an editor:,
right now I am using only comboBox. iT works fine for me and on a single click of editor-grid columns the combo box with single select available. I wanted to convert that in to multiselect combo.
please let me know what process I will have to carry to perform this task.

Any help to this newbie is must appreciating.
Thanks and Regards
AmitOlsys

AmitOlsys
18 Sep 2008, 10:48 PM
Dear Andrei,
Great work, I am trying to get it from last 3 days..
But the problem now is that the multiselect combo is rendered properly but..I can still select only one value at a time. Is it necessary to include GroupingView.js file, because I excluded that for now.

Thanks
AmitOlsys


First of all be sure that you have the latest version!

Secondly, I don't know if I follow you on this.
I modified the grid example in examples/grid in order to use Ext.ux.Andrie.Select. It seems to be working ok. I'm attaching them now - you need to change the path to the Select component in the html file.

I admit that at the moment I'm busy with others, and I did not develop an application with the new Ext.ux.Andrie.Select for Ext2.0 , so you may be right that there is a bug - can anyone confirm this situation? any details?

As regards the sorting - sure. Sorting is available as it is for ComboBox. Just sort its store (selectComponent.store)!

Zyclops
22 Sep 2008, 10:10 PM
I was having issues with multiselect shrinking to about 5px wide if I called .reset on it when it was display: none;

When I commented out the show() and hide() it fixed the issue without side effects.. What exactly are show() and hide on the triggers supposed to do?


onChange:function(){
if (!this.clearTrigger){
return;
}
if (this.getValue() != ''){
// this.triggers[0].show();
}else{
// this.triggers[0].hide();
}
},

AmitOlsys
22 Sep 2008, 10:20 PM
Basically there are two triggers on right of multiselect combo. first one for clear the contents selected, and after clearing the contents this trigger is also being hide. and the second one trigger is for droping down the selection list.
the function you wrote was for the functionality of the first trigger thats why the 5px width is rendered.

Cheers
AmitOlsys

AmitOlsys
5 Oct 2008, 10:08 PM
Hi Andrie,
I am using your this extension to have multiselect combo box.But instead of populating multiselect combo from html code

<select name="light" id="light" style="display: none;">
<option value="Shade">Shade</option>
<option value="Mostly Shady">Mostly Shady</option>
<option value="Sun or Shade">Sun or Shade</option>

<option value="Mostly Sunny">Mostly Sunny</option>

<option value="Sunny">Sunny</option>
</select>


I am populating it from an xml file.But in that case its multiselect features are not working.Please let me know how can I create Multiselect Combo which has its options from an xml file store.

Cheers!
AMitOlsys

First of all be sure that you have the latest version!

Secondly, I don't know if I follow you on this.
I modified the grid example in examples/grid in order to use Ext.ux.Andrie.Select. It seems to be working ok. I'm attaching them now - you need to change the path to the Select component in the html file.

I admit that at the moment I'm busy with others, and I did not develop an application with the new Ext.ux.Andrie.Select for Ext2.0 , so you may be right that there is a bug - can anyone confirm this situation? any details?

As regards the sorting - sure. Sorting is available as it is for ComboBox. Just sort its store (selectComponent.store)!

fangzhouxing
15 Dec 2008, 6:18 AM
Hi Andrie,if this extension can be editable with multiselect features, it may be more perfect!

thoreking
24 Mar 2009, 4:33 AM
Hi,

nice extension !..

As I use custom trigger class in my combobox, it would be nice to change the arrow trigger def to allow that (changes in red) in Select.js:

initComponent:function(){
//from twintrigger
this.triggerConfig = {
tag:'span', cls:'x-form-twin-triggers', cn:[
{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger1Class},
{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.triggerClass}
]
};
Ext.ux.Andrie.Select.superclass.initComponent.call(this);
if (this.multiSelect){
this.typeAhead = false;
this.editable = false;
//this.lastQuery = this.allQuery;
this.triggerAction = 'all';
this.selectOnFocus = false;
}
if (this.history){
this.forceSelection = false;
}
if (this.value){
this.setValue(this.value);
}
},

hideTrigger1:true,

getTrigger:Ext.form.TwinTriggerField.prototype.getTrigger,

initTrigger:Ext.form.TwinTriggerField.prototype.initTrigger,

trigger1Class:'x-form-clear-trigger',
//trigger2Class:'x-form-add-trigger',
;)

Rajnishc
21 May 2009, 1:43 AM
March 26, 2008
This extension has been discontinued! A new extension with the same capabilities, but with cleaner and smarter code will be uploaded within the future days.
---------------
* This extension is merely the new-comer after Ext.ux.form.Select for Ext 1.x (http://extjs.com/forum/showthread.php?t=13757)

Same features are available. To summarize: a ComboBox with multiple selection support.
Nothing much changed on the surface, other than switching the config property singleSelect to it's counter-property: multiSelect. The reason behind the change is to make it more logical when using Ext.DataView.

Since 0.3.6 - it also features history capabilities (the former HistoryComboBox)

Live DEMO is available here (http://www.andrei.neculau.home.ro/extjs2/ux.Andrie.Select/Select_test.htm). Testcase is included in the attached ZIP file.

As always - looking forward to reactions on this! :)

TO DO (not in the very near future)
------
- add key search (Ext 1.x - SelectBox)
- add grouping capability (Ext 1.x - GroupComboBox)

Post Scriptum

I sincerely apologize, but you won't be seeing "Mine is better because..." regarding this post (http://extjs.com/forum/showthread.php?t=16466). People can choose and make up their own mind. This is one reason why I switched to Ext.ux.Andrie namespace. I want to govern over Ext.ux.Select (sounds like community-work, consensus toward official release) no more than I want somebody else to use Ext.ux.Andrie namespace (personal work).
I apologize for a second time because there was a "nice" delay since I promised to support Ext 2.x and the current time - release time. To be honest, this switch has only taken one day - today -, so it could have been released a long time ago.
All in all, I'd like to thanks the Ext2 team - it was fairly easier to implement this on the new framework, than it was on Ext1.-
[GMT 14:33 Nov. 5] - Update to v0.3.4 (fixed clearValue, improved reset, new clear button/trigger)
[GMT 23:14 Nov. 5] - Update to v0.3.5 (improved clear trigger and transform capabilities)
[GMT 10:04 Nov. 6] - Update to v0.3.6 (added history capabilities) [GMT 13:40 Nov. 7] - Update to v0.3.7 (removed a faulty JS hack - It's important to go ahead with this update!!!)
[GMT 17:02 Nov. 12] - Update to v0.3.8 (improved setValue function)
[GMT 10:35 Nov. 17] - Update to v0.4 (improvements and fixes + cleaner code; full changelog on the demo page)
[GMT 14:19 Nov 20] - Update to v0.4.1 - LIVE DEMO IS NOT YET UPDATED TO USE THE LATEST VERSION! (Having problems with accessing the webhost)


Provided zip for multiselection in combo box is corrupted. Thanks for providing the new one.

sircyaj
8 Jul 2009, 1:38 AM
Hi Andrie,

I have been using your extension for quite sometime and I just bumped into this issue as mentioned by pozirk. Is there any progress?

Thanks!
Jay

vee.ant
15 Jul 2009, 1:58 AM
anyone, i've try this extension, but i get some problem
i use it in a form, and in first reload the combo display the right value
then when i save it and choose again, teh value show commas before the value
and it will be normal after i click the 'x' button on the combo field

is anyone can help me with this??

its like this:


<first selection>
display:'doctor','lawyer'

--submit--
<after the first>
display:,'doctor,'lawyer'

bernd01
3 Aug 2009, 2:14 PM
Hi!

Does anybody use the Multiselect with Ext 3.0.0?

After updating from 2.2 to 3.0.0 the ComboBox returns text instead of the value after changing the multiselect items.

before changing the values

getValue()returns
["11", "25"]
after changing the values the fnc returns the translated values
["Austria", "Germany", "Switzerland"]

I guess something has changed in the ComboBox from 2.2 to 3.0.0.

Can anybody help?

Thanks a lot,
Bernd

bernd01
4 Aug 2009, 2:06 AM
After a lot of debugging I found out that the beforeBlur function of the comboBox was the source of the error.

This fixes my problem:

Ext.override(Ext.form.ComboBox, {
beforeBlur : function(){
var val = this.getRawValue();
if(this.forceSelection){
if(val.length > 0 && val != this.emptyText){
this.el.dom.value = Ext.isDefined(this.lastSelectionText) ? this.lastSelectionText : '';
this.applyEmptyText();
}else{
this.clearValue();
}
}else{
var rec = this.findRecord(this.displayField, val);
if(rec){
val = rec.get(this.valueField || this.displayField);
}
//this.setValue(val); //BY BERND
}
},
});However, I don't have any idea whart side effects that could have.

Thanks,
Bernd

ealpha
11 Aug 2009, 4:45 AM
Hi!

Does anybody use the Multiselect with Ext 3.0.0?

After updating from 2.2 to 3.0.0 the ComboBox returns text instead of the value after changing the multiselect items.

before changing the values

getValue()returns
["11", "25"]
after changing the values the fnc returns the translated values
["Austria", "Germany", "Switzerland"]

I guess something has changed in the ComboBox from 2.2 to 3.0.0.

Can anybody help?

Thanks a lot,
Bernd


2.3.0 has this problem too.

JamesC
17 Aug 2009, 7:06 AM
@bernd1, instead of overriding the whole of combobox i suggest the following addition to the multi select:



beforeBlur : Ext.emptyFn,


This way you aren't modifying any underlying ext-3 code!

fangzhouxing
25 Aug 2009, 10:55 PM
@ JamesC, thank you, the problem in 2.3.0 is also solved!

fugo
14 Sep 2009, 3:39 AM
Does anybody know how i can use the Multi Select as an Editor in Ext.ux.grid.RowEditor or another Extension that works in that case?

If i try to use it i always get this error:
Error: v is undefined
Source File: (removed)/Select.js
Line: 524

fugo
15 Sep 2009, 3:53 AM
I've modified the setValue function to check whether v exists or not. The ComboBox gets rendered now, but i think i have the same Problem as bernd01.

After i finished a Selection the Values are correctly displayed, but if i want to change them the old values are still in the box and none of them are marked as already selected, so i can select them again.

I already added beforeBlur : Ext.emptyFn to the ComboBox. Must something else from bernd01's code be added?

Greets

sonixbp
23 Sep 2009, 12:54 PM
I notice that this widget does not utilize the Deselect event. I've got cascading AJAX that is supposed to go to the back end and update the store's for all successive boxes when a user selects/deselects a box. the 'change' event will not work for this situation.

Any ideas?

moutonad
25 Nov 2009, 1:14 PM
Great sample. Thanks Andrie. I did not read all the posts but I did find an issue. You have:
this.fireEvent('change', this, this.oldValueArray, this.valueArray);
this.fireEvent('change', this, this.oldValue, this.getRawValue());

In itself, that is fine but it does not match the api for the combobox. It should be:
this.fireEvent('change', this, this.valueArray, this.oldValueArray);
this.fireEvent('change', this, this.getRawValue(), this.oldValue);

For my purpose, I also had to comment out:
this.valueArray = resultRaw; (line ~502)

That seemed to replace a set value when moving to other combo boxes. I am using 7 of your multi select combo boxes on one page. I do have an issue that I have work around but could not fix the code. I have listeners ('change') in each combo box. The newValue and oldValues work fine. There is a miss fire that messes it all up. If I make a selection from one combo box, all is fine. When I go to click on a different box, the onchange is fired on the first combo box twice. The first fires is ok. The second on the first combo box replaces the newValue with a string of results instead of an array of results. So the string is a comma separated from of the array. I could not figure out a fix for that so instead of using the newValue and oldValue in:

'change': function (combo, newValue, oldValue)

I am using the this.valueArray, this.oldValueArray as the work around. Did anyone encounter that issue? Thanks.

infest
21 Jan 2010, 1:33 AM
Hi all I have a problem with this widget. When i use a multiselect combobox and when i select a value in combo
first value is automatically show but not checked
for example when i choose M (also first element is M ) then combo's display is M;M
for example when i choose D (just only checked D ) then combo's display is M;D.

Thanx

rahulmehta
13 Jun 2010, 11:27 PM
hii andrei,

i have used ur mulitselect in my form , but on post m getting display field in comma seperated but i want the value field what can i do for this :) please suggest ..

thanks

rahul

thrillhouse
13 Jul 2010, 9:57 PM
I encountered the following problem after upgrading to ExtJs 2.3. It's a pretty unique scenario but I thought I'd post it here just in case someone might make use of it.

I have a form containing some AndrieSelect components. Parts of the form are initially hidden. The form has a reset button. When the reset button is clicked, the widths of the AndrieSelect components are mangled by the onChange method attempting to hide the trigger (which is of course also hidden). Thus, when the form is made visible, the widths of each AndrieSelect are completely messed up (10 - 20px wide).

To fix this I wrote a very simple override which tests the visibility of the trigger before trying to hide it:



onChange: function() {
if (!this.clearTrigger) {
return;
}
if (this.getValue() !== '') {
this.triggers[0].show();
} else {
//check to see if triggers[0] is visible before hiding, only hide it
//if it's visible first
if (this.triggers[0].isVisible()) {
this.triggers[0].hide();
}
}
}

semiaddict
23 Jul 2010, 4:25 AM
Here's is a patch that adds a config option called "multipleHiddenFields" which if set to true will split the hidden field into multiple hidden fields (one for each value) with the same name, to match the data sent using a regular HTML Select input.



--- Ext.ux.Andrie.Select.js.orig Fri Jul 23 14:12:47 2010
+++ Ext.ux.Andrie.Select.js Fri Jul 23 14:18:54 2010
@@ -76,6 +76,10 @@
* @cfg {String} displaySeparator Separator to use for displaying the values (defaults to comma)
*/
displaySeparator:',',
+ /**
+ * @cfg {Boolean} multipleHiddenFields Split different values into multiple hidden fields to match the regular HTML Select input value sent (defaults to false)
+ */
+ multipleHiddenFields:false,

// private
valueArray:[],
@@ -107,6 +111,16 @@
this.setValue(this.value);
}
},
+
+ // private
+ onRender : function(ct, position){
+ Ext.ux.Andrie.Select.superclass.onRender.call(this, ct, position);
+
+ if(this.multipleHiddenFields){
+ this.hiddenFields = [];
+ Ext.get(this.hiddenField).remove();
+ }
+ },

hideTrigger1:true,

@@ -562,7 +583,21 @@
this.lastSelectionText = text;
this.valueArray = result;
this.rawValueArray = resultRaw;
- if(this.hiddenField){
+
+ if(this.multipleHiddenFields){
+ var hiddenField;
+
+ for (var i=0; i<this.hiddenFields.length; i++) {
+ Ext.get(this.hiddenFields[i]).remove();
+ }
+ this.hiddenFields = [];
+
+ for (var i=0; i<this.valueArray.length; i++) {
+ hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName, value: this.valueArray[i]}, 'before', true);
+ this.hiddenFields.push(hiddenField);
+ }
+ }
+ else if(this.hiddenField){
this.hiddenField.value = v;
}
Ext.form.ComboBox.superclass.setValue.call(this, text);

Sunilfromindia
9 Nov 2010, 11:38 PM
items : {
xtype : 'fieldset',
title : 'Target Filter',
items : [
new Ext.ux.Andrie.Select( {
id : 'qTBucket',
fieldLabel : 'Opty Size Bucket',
xtype : 'combo',
typeAhead : true,
triggerAction : 'all',
width : 140,
editable: true,
visible:true,
mode : 'local',
displayField: 'value',
multiSelect:true,
valueField : 'value',
lazyInit : true,
store : optySizeBucketStore,
listClass : 'x-combo-list-small'})
,




March 26, 2008
This extension has been discontinued! A new extension with the same capabilities, but with cleaner and smarter code will be uploaded within the future days.
---------------
* This extension is merely the new-comer after Ext.ux.form.Select for Ext 1.x (http://extjs.com/forum/showthread.php?t=13757)

Same features are available. To summarize: a ComboBox with multiple selection support.
Nothing much changed on the surface, other than switching the config property singleSelect to it's counter-property: multiSelect. The reason behind the change is to make it more logical when using Ext.DataView.

Since 0.3.6 - it also features history capabilities (the former HistoryComboBox)

Live DEMO is available here (http://www.andrei.neculau.home.ro/extjs2/ux.Andrie.Select/Select_test.htm). Testcase is included in the attached ZIP file.

As always - looking forward to reactions on this! :)

TO DO (not in the very near future)
------
- add key search (Ext 1.x - SelectBox)
- add grouping capability (Ext 1.x - GroupComboBox)


Post Scriptum

I sincerely apologize, but you won't be seeing "Mine is better because..." regarding this post (http://extjs.com/forum/showthread.php?t=16466). People can choose and make up their own mind. This is one reason why I switched to Ext.ux.Andrie namespace. I want to govern over Ext.ux.Select (sounds like community-work, consensus toward official release) no more than I want somebody else to use Ext.ux.Andrie namespace (personal work).
I apologize for a second time because there was a "nice" delay since I promised to support Ext 2.x and the current time - release time. To be honest, this switch has only taken one day - today -, so it could have been released a long time ago.
All in all, I'd like to thanks the Ext2 team - it was fairly easier to implement this on the new framework, than it was on Ext1.
-
[GMT 14:33 Nov. 5] - Update to v0.3.4 (fixed clearValue, improved reset, new clear button/trigger)
[GMT 23:14 Nov. 5] - Update to v0.3.5 (improved clear trigger and transform capabilities)
[GMT 10:04 Nov. 6] - Update to v0.3.6 (added history capabilities) [GMT 13:40 Nov. 7] - Update to v0.3.7 (removed a faulty JS hack - It's important to go ahead with this update!!!)
[GMT 17:02 Nov. 12] - Update to v0.3.8 (improved setValue function)
[GMT 10:35 Nov. 17] - Update to v0.4 (improvements and fixes + cleaner code; full changelog on the demo page)
[GMT 14:19 Nov 20] - Update to v0.4.1 - LIVE DEMO IS NOT YET UPDATED TO USE THE LATEST VERSION! (Having problems with accessing the webhost)

breeni
16 Nov 2010, 2:01 AM
I've been battling with this plugin for about a day now and felt compelled to contribute. This plugin does not behave as I had expected. Even the demos seem to produce unpredictable results.

I know this plugin appears to be marked discontinued and this post is quite old but I feel the need to explain my findings.

Using the demo page (http://www.andrei.neculau.home.ro/extjs2/ux.Andrie.Select/Select_test.htm) "multiselect from markup" as an example:


Select two values
See the country codes in the value box
Blur the field
See the country codes converted into the value representation
Select more values
See the country codes appended to the value
See the country codes duplicate into the value field
Repeat

Hope this helps anybody else struggling to get sane results from this plugin. This plugin does look exactly the way I wanted but unfortunately does not function well.

A plugin that I finally got to work the way I wanted (multiple select) is http://lovcombo.extjs.eu/.

anilbhat21
19 Sep 2012, 4:47 AM
I've used this plugin for multiselect combo in extjs 3.4.
Steps to follow:
1) include the plugin in your directory (js and css files)
2) you may need to comment out some lines as following in Select.js file of the plugin:
Ext.ux.Andrie.Select = function(config){
//following lines commented out intentionally to avoid some unexpected errors
/*if (config.transform && typeof config.multiSelect == 'undefined'){
var o = Ext.getDom(config.transform);
config.multiSelect = (Ext.isIE ? o.getAttributeNode('multiple').specified : o.hasAttribute('multiple'));
}
config.hideTrigger2 = config.hideTrigger2||config.hideTrigger;*/
Ext.ux.Andrie.Select.superclass.constructor.call(this, config);
}
3) use something like this:
this.cmbo = new Ext.ux.Andrie.Select({
id: 'OfficeCombo',
xtype: 'combo',
emptyText: 'Select All',
autoScroll: true,
store: enggOfficeStore,
displayField: 'FullName',
multiSelect: true,
valueField: 'ShortName',
mode: 'local',
listeners:{
select: function(record, index) {
alert(record.getValue());
//................
}
}
});
4) In the panel, you can use something like this
this.pnlEnggScreen = new Ext.Panel({
layout: 'column',
items: [this.cmbo]
})