PDA

View Full Version : Ext.ux.form.field.BoxSelect - Intuitive Multi-Select ComboBox



kveeiv
25 May 2011, 11:58 AM
BoxSelect for ExtJS 4.1 - Inspired by the infamous SuperBoxSelect for ExtJS 3 and BoxSelect for ExtJS 2

Latest Release: v2.0.3
View examples page: http://kveeiv.github.com/extjs-boxselect/examples/boxselect.html
Download current release (2.0.3): https://github.com/downloads/kveeiv/extjs-boxselect/extjs-boxselect-2.0.3.zip

BoxSelect is a ComboBox extended for more intuitive multiSelect capabilities. Features include:

Now supports ExtJS 4.1! Unfortunately due to changes in the framework rendering and layout, previous versions are not supported.
Individually removable labelled items for each selected value
Customizable item templates, in addition to ComboBox's support of customizable drop list templates
Keyboard-based selection and navigation of selected values (left/right, shift, ctrl-a, backspace, delete)
On-demand loading of values from remote stores when an unknown value is set and queryMode = 'remote' and forceSelection = true
Creation of new value records for forceSelection false
Configurable pinning of combo pick list for multiSelect = true
Configurable rendering of labelled items (auto-sized or stacked)
As BoxSelect extends ComboBox, most (if not all) of the functionality and configuration options of ComboBox should work as expected
Lots more!
Any contributions of testing, improvements or other constructive feedback are greatly appreciated. I intend to actively maintain the development of this extension through the life of ExtJS 4, and will be able to best do so with the support of the community. Many thanks go out to everyone that has contributed already, and to those that will do so in the future.

Now on github!
Main github project page: https://github.com/kveeiv/extjs-boxselect
To directly collaborate, please fork from the master branch and send pull requests when your proposal is ready. See the github help pages (http://help.github.com/) for more information. Contributions are also accepted through this thread or through private message here on these forums.

[Changelog for 2.0.3]
v2.0.3 - 24 Jul 2012
Bug Fixes:
* Resolved field layout issues in complex container layouts
* Resolved destruction order to prevent javascript errors from sometimes occurring
Documentation
* Added button control to examples to show component configurations inline


[Previous Updates]
For a complete historical list of changes for all versions, please see CHANGELOG.txt in the download package.

zombeerose
26 May 2011, 12:36 PM
Problems I've encountered thus far:

* If the emptyText is longer than about 20 chars, it gets cut off.
* The emptyText is still displayed even once items are selected.
* Clicking on the X to remove an item generates this error:

store.snapshot is undefined
http://.../Ext.ux.BoxSelect.js
Line 326

kveeiv
27 May 2011, 10:44 AM
Thanks zombeerose. I've uploaded a new version with a fix for the following:



* Clicking on the X to remove an item generates this error:


I am headed out for the long weekend, but will address the other issues you mentioned related to emptyText (and sizing of the user input field inside the list container in general) next week.

JorisA
28 May 2011, 2:05 AM
Awesome job! Will definitely try and see if I run into bugs!

kveeiv
1 Jun 2011, 10:19 AM
* If the emptyText is longer than about 20 chars, it gets cut off.
* The emptyText is still displayed even once items are selected.


I've uploaded a new version to the main post (0.3) which fixes a variety of issues related to emptyText and also the sizing of the input field within the list element. Thanks for the reports!

zombeerose
3 Jun 2011, 9:49 AM
Thanks for the updates.

salarmehr
5 Jun 2011, 5:21 AM
How can I remove an item from drop-down menu when user select that items?
(as SuperBox do).
Thanks

JorisA
5 Jun 2011, 6:27 AM
I made some modifications to the CSS, only checked with chrome though, if you like it feel free to include them in "the official" release.

Zip: 26436

Before: (26434)
http://www.sencha.com/forum/attachment.php?attachmentid=26437&d=1307283779

After: (26435)
http://www.sencha.com/forum/attachment.php?attachmentid=26435&d=1307283778

kveeiv
6 Jun 2011, 4:41 AM
I made some modifications to the CSS, only checked with chrome though, if you like it feel free to include them in "the official" release.

Thanks for the contribution, but the links for the attachments you posted don't seem to be working. Can you check them and repost?

JorisA
6 Jun 2011, 6:07 AM
damm you attachments!

retry!

zombeerose
6 Jun 2011, 3:17 PM
* On a remote queryMode combo, if you load the store for the field and then call setValue on the field, the correct item appears in the input box. However, the first time a user expands the list, the combo reloads the store and any selected values are cleared. Can this be changed?

* Are their any resize events that should be fired to notify the owner container that the field height has changed? The problem is that if more items are selected than can fit onto a single line, the text field expands vertically beyond the current height of the container. Maybe something like how the grow ability of textarea fields work.

* Feature request - add the ability to 'select' one/many of the items in the text box - similar to selecting a row in a grid. Beyond other things, this could allow for deleting multiple items. A standard selection model could be used.

Thanks :)

salarmehr
6 Jun 2011, 6:40 PM
1- Where is documentation? :-?
2- It's seems that this wigdet have problem with Persian alphabet, any solution? :(
Thanks

JorisA
7 Jun 2011, 12:08 AM
1- Where is documentation? :-?
2- It's seems that this wigdet have problem with Persian alphabet, any solution? :(
Thanks

1- feel free to write it (and if you bothered to look, its documented somewhat inline)
2 - seems your the one with the Persion alphabet, wat did you try to solve it so far?

zombeerose
7 Jun 2011, 12:07 PM
The 'change' event does not appear to always fire when selected items are removed from the field. Have you experienced this problem?

kveeiv
8 Jun 2011, 7:10 AM
Thank you all for all the testing, feedback and contributions. I have posted a new version to the main post (0.4) which includes:


Styling updates for multi-selected item removal controls to match tab removal controls and improve rendering performance (Thanks to JorisA for his contribution which these were based on)
Support for queryMode="remote"
Addition of 'autosize' event to indicate change in height of field like textarea
Fixes to value tracking for 'change' event to properly fire
Minor documentation updates and refactoring


As always, any contributions of testing, improvements or other constructive feedback are greatly appreciated.

salarmehr
11 Jun 2011, 7:12 PM
1-in supuerSelectBox when you select an item it will move to selected area(=it will remove from initial place, Is it configurable in boxSelect?
2- settin multiselect config to false not work? (it must convert an boxselect to a regular combo).
3- Please add clear all button, like superselectbox
I hope your boxselect became as stable and beauty as superselect box
Thanks a lot for sharing.

derditze
15 Jun 2011, 9:13 AM
Hi kveeiv, thanks for sharing!

Being new to ExtJS I slowly work my way through the doc & source code.
Could somebody provide sample file that shows a configuration. I tried with the following configuration (4.02) and only get a small blue line.



var form4 = new Ext.form.FormPanel({
id:'f4Form',
renderTo: 'f4',
autoHeight: true,
width: 700,
items: [{
allowBlank:false,
msgTarget: 'title',
id:'selector4',
fieldLabel: 'Label',
name: 'states2',
anchor:'100%',
store: states2,
mode: 'local',
displayField: 'state',
displayFieldTpl: '{state} ({abbr})',
valueField: 'abbr',
navigateItemsWithTab: false
}
]
});

PS:
Everything worked well with the exactly same configuration with SuperSelectBox (I removed the xtype)
As a lib I include "ext-all.js", the SuperSelect had a link to a "base.js" file.

kveeiv
16 Jun 2011, 5:37 AM
Thank you all for all the testing, feedback and contributions. I have posted a new version to the main post (0.5) which includes:


Added support for multiSelect: false, to enforce single value selection
Added support for typeAhead: true when multiSelect: true, which is not available in ComboBox
Improved automatic field-resizing
Ensured compatibility with 4.0.2a
Ensured compatibility with Ext.ux.form.field.ClearButton (http://www.sencha.com/forum/showthread.php?132775-Ext.ux.form.field.ClearButton-Small-clear-button-icon-over-field)
Minor documentation updates and refactoring


As always, any contributions of testing, improvements or other constructive feedback are greatly appreciated.

kveeiv
16 Jun 2011, 5:51 AM
1-in supuerSelectBox when you select an item it will move to selected area(=it will remove from initial place, Is it configurable in boxSelect?
2- settin multiselect config to false not work? (it must convert an boxselect to a regular combo).
3- Please add clear all button, like superselectbox
I hope your boxselect became as stable and beauty as superselect box
Thanks a lot for sharing.

1- This is not supported by BoxSelect, but is something I'll consider for future versions.
2- A new version (0.5) has been posted to the main post which adds support for multiSelect: false
3- Please see the user extension Ext.ux.form.field.ClearButton (http://www.sencha.com/forum/showthread.php?132775-Ext.ux.form.field.ClearButton-Small-clear-button-icon-over-field), which works with the newest version of BoxSelect.


Could somebody provide sample file that shows a configuration. I tried with the following configuration (4.02) and only get a small blue line.


You removed the superselectbox xtype, but needed to instead replace it with the boxselect xtype. The "navigateItemsWithTab" functionality is not supported by this BoxSelect component. This component is compatible with the ComboBox configuration options and as of the current version (0.5) does not add any of its own, so please see the documentation for that class for other changes between Ext 3 and Ext 4. Notably, you have "mode: 'local'" which is now "queryMode: 'local'". For other example configurations, you can open up examples/form/combos (.html and .js) and replace the Ext.form.field.ComboBox references with references to Ext.ux.form.field.BoxSelect (and include the necessary js and css files).

Please refer to this thread (http://www.sencha.com/forum/showthread.php?124015-Ext-3-to-4-Migration) for other general Ext 3 -> Ext 4 migration questions you may have.

salarmehr
16 Jun 2011, 6:22 AM
θhe new version is compatible with persian

JorisA
18 Jun 2011, 9:47 AM
Awesome!

mediacept
18 Jun 2011, 10:11 AM
Congratulation. Well done. I used it in my app and waiting for next releases. Good continuation.

derditze
21 Jun 2011, 2:51 AM
Is this a (minor) bug .. or just me having overlooked something?:
The message only shows up when I 'mouse-over' the field, otherwise no message is shown.

Tx. again for your outstanding contribution!

Best regards
Klaus

derditze
21 Jun 2011, 3:22 AM
Ext.onReady(function(){

Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';

...

});

kunalshah6363
27 Jun 2011, 4:35 AM
BoxSelect 5.0 is not working properly with my application. 1st value is selected but when i pressed 4 characters (minChars) boxselect control is hanged. Please refer the attachment.

When i debug through chrome, i got the following errer.
Uncaught TypeError: Cannot call method 'addCls' of null.

Please help me to solve this.

Thanks,
Kunal

mahesh21688
27 Jun 2011, 5:20 AM
Hi,

I am also facing the same problem as kunalshah6363 mentioned.

Kindly suggest me how to overcome this as I tried lot but not succeeded


Regards,
Mahesh

kveeiv
27 Jun 2011, 7:53 AM
Ext.form.Field.prototype.msgTarget = 'side';


The next version (which I'll put out sometime this week) will have a fix to the field validation that makes the red-swirly marks properly appear. It looks like the code you've included there is for a previous version of ExtJS. I think you'll want to make that override on Ext.form.Labelable (http://docs.sencha.com/ext-js/4-0/#/api/Ext.form.Labelable). Besides the missing styling, my tests show the actual error message display working as expected with the current release. Please see this thread (http://www.sencha.com/forum/showthread.php?124015-Ext-3-to-4-Migration) for other general ExtJS migration information.




When i debug through chrome, i got the following errer.
Uncaught TypeError: Cannot call method 'addCls' of null.


I am unable to replicate this in my own configurations, can either of you provide a bug report (http://www.sencha.com/forum/showthread.php?138165-How-to-report-a-bug) to help narrow this issue down?

mahesh21688
27 Jun 2011, 10:47 AM
Thanks for the reply,

I am not sure whether its bug or not. But what I had done is, I have downloaded files provided by you and put along with extJs4 files. and then below in my html code..


<head>
<link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css" />

<link rel="stylesheet" type="text/css" href="lib/extjs/ezdi/BoxSelect.css" media="screen" />

<script type="text/javascript" src="lib/extjs/ext-all.js"></script>
<script type="text/javascript" src="lib/extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="lib/extjs/ezdi/ezdigrid.js"></script>
<script type="text/javascript" src="lib/extjs/ezdi/BoxSelect.js"></script>

<script type="text/javascript">


Ext.onReady(function(){
Ext.QuickTips.init();
Ext.BLANK_IMAGE_URL = 'lib/extjs/examples/sandbox/images/s.gif';

var myViewport = new Ext.Viewport({
layout: 'border',
border: false,
renderTo: Ext.getBody(),
items: [{
xtype:'boxselect',
fieldLabel: 'keyWords',
id:'boxselect',
store: ds,
valueField:'name',
displayField:'name',
}]
})
})
</script>
</head>


As I try to solved it I came to know that error will occur when we try to entry the second or further elements by typing.

Also the error is occuring at line no 329 of your BoxSelect.js file(The error is same as kunalshah6363 mentioned)..

Code snippents is given below where error occurs

if (picker) {
// From the value, find the Models that are in the store's current data
selection = [];
ExtArray.forEach(me.valueModels.concat(me.filteredSelections) || [], function(value) {
if (value && value.isModel && (picker.store.findExact(valueField, value.get(valueField)) !== -1)) {
selection.push(value);
}
});

// Update the selection to match
me.ignoreSelection++;
selModel = picker.getSelectionModel();
selModel.deselectAll();
if (selection.length) {
selModel.select(selection); //HERE ERROR OCCURS
}
me.ignoreSelection--;
}

purnama
28 Jun 2011, 2:51 AM
Hi first. your code is awesome. Thank you very much.

I have a question. how can i make a pre selection or initial value for the multiple select?

i set the store id in the valueField and set an initial value like

value: '4, 7'

but it doing nothing. the boxselect not showing anything.

Thanks.

regards,
Arthur

kveeiv
28 Jun 2011, 5:28 AM
Thanks for the reply,

I am not sure whether its bug or not. But what I had done is, I have downloaded files provided by you and put along with extJs4 files. and then below in my html code..

<!-- snip //-->

As I try to solved it I came to know that error will occur when we try to entry the second or further elements by typing.

Also the error is occuring at line no 329 of your BoxSelect.js file(The error is same as kunalshah6363 mentioned)..


Thank you for your detailed report. There are a few things that make your code sample not runnable for me. Your store configuration is missing, but your layout for your viewport is also invalid (border without a center region). I used the example store in examples/form/combos.js and tried to replicate your error, but was still unable. Is the error stopping at that line, or does it go down in to the ExtJS framework? Can you modify the examples/form/combos.js to replicate your error?


how can i make a pre selection or initial value for the multiple select?


Thanks for the bug report. Currently you can pre-select by passing in an array for the initial value, e.g. value: ['4', '7']. The next version will provide support for passing the value in as a string, using the combobox's delimiter (http://docs.sencha.com/ext-js/4-0/#/api/Ext.form.field.ComboBox-cfg-delimiter) string as the separator. With this change, your value of '4, 7' would work as expected. I am hoping to be able to track down and solve the issue that mahesh21688 is reporting before I push this change out, but will push the latest fixes out this week even if I am unable to do that.

mahesh21688
29 Jun 2011, 1:17 AM
Thanks for your help,

The mistake that you point out for layout is just bcoz I shown you the main part of code

with static store u mentioned to use is working fine, and I feel the BoxSelect is awesome. But still I am having problem in BoxSelect when using the data from URL in my store. Below is code for my store.

Ext.define("Post1", {
extend: 'Ext.data.Model',
fields: [
{name: 'name', mapping: 'name'}
]
});

var ds = Ext.create('Ext.data.Store', {
model: 'Post1',
proxy: {
type: 'ajax',
url : '/myURL/keywordDataServlet',
method:'POST',
reader: {
type: 'json',
root: 'rows'
}
}
});

As kunalshah6363 mentioned that first time data perfectly load into BoxSelect as shown in his image. But while selecting second value by typing it gives the earlier mentioned error.

Thanks,
Mahesh

foxmarco
29 Jun 2011, 5:53 AM
It would be fantastic if someone could add the action 'add all' to select all items with one click. Plz i'm not able to do this..

Thanks

abraxxa
4 Jul 2011, 7:11 AM
*subscribe*
Thanks, I'll give it a try once I find time to port our app to ExtJS 4 which requires some UX to be ported first.

navvn
13 Jul 2011, 12:50 AM
Is it possible to make this component to work as email suggest?
There will be values from store but lets say you can also write a custom value and after ENTER or ',' it will automaticly be a box?

kveeiv
20 Jul 2011, 8:22 AM
1.0 has been released and the first post (http://www.sencha.com/forum/showthread.php?134751-Ext.ux.form.field.BoxSelect-Intuitive-Multi-Select-ComboBox) has been updated. Please see that post for a more complete list of updates. Many thanks go out to the many testing and coding contributions that have been made so far for this extension, with special thanks to kleins for his alternative implementation (http://www.sencha.com/forum/showthread.php?139170-BoxSelect-for-Ext-4-another-implementation) and his willingness to collaborate and merge together the features from both of these extensions.

To respond directly to earlier feedback from this thread:


* On a remote queryMode combo, if you load the store for the field and then call setValue on the field, the correct item appears in the input box. However, the first time a user expands the list, the combo reloads the store and any selected values are cleared. Can this be changed?

Value management for remote queryModes should now be (hopefully) seamless. Thanks go out to kleins (http://www.sencha.com/forum/showthread.php?139170-BoxSelect-for-Ext-4-another-implementation) for his contributions and willingness to collaborate in merging our implementations together.


* Feature request - add the ability to 'select' one/many of the items in the text box - similar to selecting a row in a grid. Beyond other things, this could allow for deleting multiple items. A standard selection model could be used.

This is now possible through either shift-clicking, or using shift+left/right with the new keyboard navigation to select the items. Ctrl-A also now works for selecting all of the items, and backspace/delete will remove all of the selected items.


Is this a (minor) bug .. or just me having overlooked something?:
The message only shows up when I 'mouse-over' the field, otherwise no message is shown.

Rendering of field validation messages should now work properly.


how can i make a pre selection or initial value for the multiple select

Values can now be set (through both the config.value configuration as well as setValue) by passing a single value, a string of values that will be split by delimiter, an array of values or an array of records. For queryMode remote stores with forceSelection true, if an unknown value is passed a load() call will be issued to the store to attempt to load these records. Please see the initial post and the linked examples page for more information.


As kunalshah6363 mentioned that first time data perfectly load into BoxSelect as shown in his image. But while selecting second value by typing it gives the earlier mentioned error.

I believe the underlying cause of the error you encountered is this bug (http://www.sencha.com/forum/showthread.php?131139-B3-ComboBox-Ext.AbstractDataView-error-on-bindStore). I believe the improved value management for queryMode 'remote' BoxSelect configurations will successfully avoid this framework error now though, as it should avoid the scenarios where that bug would show.


Is it possible to make this component to work as email suggest?
There will be values from store but lets say you can also write a custom value and after ENTER or ',' it will automaticly be a box?

Excellent suggestion, and finally a use-case for forceSelection: false with multiSelect's that makes easy sense to me. This functionality has been added in 1.0. Please see the initial post and the linked examples page for more information.

zombeerose
20 Jul 2011, 12:33 PM
Awesome update! Thanks for the continued work on this.

One more request - can you fire events when adding/removing items to the combo? It would be nice if the record involved was included as a param.

Thx

softwareguy
23 Jul 2011, 6:53 AM
Wow, just Wow!

grgur
25 Jul 2011, 3:39 AM
kicks ass

navvn
25 Jul 2011, 11:35 PM
superb but on more suggestion :)

lets say someone is clicking on a boxselect field, typing an email address and doesnt confirm it by enter. Than he move to the second field (by mouse click or TAB). Is it possible to make a written value a box after you move to another field?

Also how to add an value to boxselect?
setValue
or
setRawValue
doesnt work in suggest example

zacware
26 Jul 2011, 11:17 AM
This is wonderful. Great job. Thanks very much!

zombeerose
1 Aug 2011, 9:44 AM
Can you add requires configs for dynamic loading (Ext.Loader)?

At first glance,


requires: ['Ext.selection.Model','Ext.data.Store']

zombeerose
1 Aug 2011, 9:58 AM
Heads up - BoxSelect is not working with Ext 4.0.5

"me.triggerWrap is null"

wki01
2 Aug 2011, 12:06 AM
Confirmed. It does not work with 4.05.

Also a bug:
If readOnly should not be able to delete values​​.

thanks

under_dog
2 Aug 2011, 10:18 AM
Thanks a ton kleins and kveeiv for a wonderful implementation of Boxselect...

In my project I required Boxselect to contains atleast 50k values from store and it should also give suggestion on user's key press(as it happens in facebook),so I modified kleins's boxselect code as per my requirement.
I am posting my version of boxselect in case anyone has the same requirement as I have...I will also post a new version of boxselect which will be faster than this one in next few days.....
P.S: I am a fresher and working on ExtJs only from last 15 days , I will definitely welcome any suggestion to improve my code...

kveeiv
3 Aug 2011, 4:50 AM
1.1 has been released and the first post (http://www.sencha.com/forum/showthread.php?134751-Ext.ux.form.field.BoxSelect-Intuitive-Multi-Select-ComboBox) has been updated. Please see that post for a more complete list of updates. Many thanks go out to the many testing and coding contributions that have been made so far for this extension.


One more request - can you fire events when adding/removing items to the combo? It would be nice if the record involved was included as a param.

The standard 'change' and 'select' events that are fired by a combobox can be observed. I have modified some of the value tracking so that the change events now pass the values as defined by the valueField, and the select event passes the current values as records. These happen for any change of the field value - rather than ComboBox's behavior of select being fired only on "list selection". I've added an example to the examples page for the event handling and also programmatic value management.


lets say someone is clicking on a boxselect field, typing an email address and doesnt confirm it by enter. Than he move to the second field (by mouse click or TAB). Is it possible to make a written value a box after you move to another field?

This has been added as functionality with the createNewOnBlur config option. Please note the interaction of this configuration option with the autoSelect and selectOnTab options of the base ComboBox control.



Also how to add an value to boxselect?


addValue and removeValue have been added for discrete programmatic management of the field value. These functions take the same mixed value representation as setValue, please see the examples page for a complete description of those.


Can you add requires configs for dynamic loading (Ext.Loader)?

At first glance,


requires: ['Ext.selection.Model','Ext.data.Store']


Done. I'm not sure how these interact with the requires definitions of the parent classes, but if it automatically pulls those in then I think this is the extent of those. If you find any others, please let me know.


Heads up - BoxSelect is not working with Ext 4.0.5

Fixed. Ext.form.field.Trigger had modified its field template to track the trigger by id, this change had to be made to the boxselect field template as well. This is still backwards compatible with 4.0.2a for those using the public release.


If readOnly should not be able to delete values​​.

Fixed, also fixed for disabled state.


In my project I required Boxselect to contains atleast 50k values from store and it should also give suggestion on user's key press(as it happens in facebook),so I modified kleins's boxselect code as per my requirement.

One of my use cases is a list of potentially hundreds of thousands of items which also uses the typeAhead configuration to provide the suggestion type of functionality. I see that you were using the other implementation, have you tried this one to accomplish your goals? This one is also faster than the other one when you are dealing with unusually large sets of data/selections, though any contributions towards improving this further are greatly welcomed.

NatVik
3 Aug 2011, 11:32 PM
hi, please help me, i want to set values before box will be render(queryMode: remote). When i use setValue(1), it works but not
stably in firefox(good in explorer). And when i use setValue(1, 2), or setValue('1, 2') or init value: '1, 2' it does not work. My code:
Ext.create('Ext.ux.form.field.BoxSelect', {
id : comboId,
renderTo : renderTo,
multiSelect : true,
displayField : 'name',
valueField : 'id',
//value: '1, 2',
width : 300,
store : new Ext.data.JsonStore({
remoteFilter : true,
model : 'dictionaryModel',
proxy : {
type : 'ajax',
url : url,
method : 'GET',
defaultHeaders : {
'Accept' : 'application/json'
},
reader : new Ext.data.JsonReader({
type : 'json',
root : 'dictionaryRoot'
})
}
}),
minChars : 2,
listeners : {
render : function() {
this.store.load({
params: { query: '' }});
this.setValue('1, 2');
},

zacware
11 Aug 2011, 8:07 PM
This is an excellent plugin. Thanks so much for making it. You should setup a donate paypal link on github for the project.

I noticed 2 issues that may or may not be bugs

#1 When typing in a state in the examples, like "Conn" for conneticut, and then hitting return, Conneticut is entered into the field but then the text "Conn" is still after it. If a match is found and the return key is pressed, the typed text showed go away (?)

#2 I tried using a store with a proxy to get data remotely and I load that using the .load() command on the store when I first create my form that the box select field is in. But if I try to use local query mode when I try to select an item from the list nothing shows up in the field after I click on a selection. If I switch to remote I am sent a query string on the server side which I can use to filter the list but I would prefer to let the store search the store that is already loaded rather than having to go to the server.

Smalltalker
13 Aug 2011, 12:40 PM
There is a strange behavior in the control.

When you select an item, the top of the control moves up

This has happened to someone else?

I attach a video (.zip)

27474

thanks

Claudio

yuuzai
14 Aug 2011, 6:27 PM
This is is a nice plugin and thanks for developing and maintaining it. I do have a request though. Prolly you could support a dual-trigger wherein the other button selects/deselects all elements.

raz0r1
17 Aug 2011, 2:00 AM
"Bug":
Please Change Line 1066 to

me.fireEvent('autosize', me, newHeight);
so it fits ComboBox events a little more.

thanks.

elilindner
28 Aug 2011, 4:43 PM
Very nice plugin.

Not sure if you can do this out of the box, but instead of returning a number of POST variables, I have created a small override to submit an array of values instead.



Ext.override(Ext.ux.form.field.BoxSelect, {
getSubmitData: function() { var val = {}; val[this.name] = Ext.JSON.encode(this.getSubmitValue()); return val; }
});

ngd
31 Aug 2011, 1:46 AM
I would like the combo-box's height to remain unchanged as I have a space constraint. How do I do that?

I tried a few css settings but a) doesn't work in all browsers and b) cursor doesn't move back to the first option.

Any help will be be appreciated. Thanks again for some wonderful work.

tommytob
31 Aug 2011, 6:16 AM
I must say it's a great plugin,

but I have the same problem as smalltalker and ngd

the panel/fieldset/... where the boxselect is into will not change the heigth

greetz thomas

commanche
6 Sep 2011, 5:46 AM
It's a nice extension, thanks for sharing it.

However, there is a small problem when using it in "autocomplete" mode. If the user clicks at the input field to enter some text to be found, the trigger action is fired and the query tries to fetch all the records which is not desired. The query should be fired after certain number of letters (minChars) has been entered.

I'd suggest adding a config option like triggerOnClick: true/false like this:



triggerOnClick: false,

// skip

onItemListClick : function(evt, el, o) {
var me = this, itemEl = evt.getTarget('.x-boxselect-item'), closeEl = itemEl ? evt
.getTarget('.x-boxselect-item-close') : false;


if (me.readOnly || me.disabled) {
return;
}


if (itemEl) {
if (closeEl) {
me.removeByListItemNode(itemEl);
} else {
me.toggleSelectionByListItemNode(itemEl, evt.shiftKey);
}
me.inputEl.focus();
} else {
if (this.triggerOnClick) {
me.onTriggerClick();
}
}
},

kveeiv
7 Sep 2011, 4:56 AM
I appreciate everyone's patience and wanted to just post a quick message to say that this extension is still being maintained and the contributions that have been made as well as some other bug fixes will be included in an update that will be coming in the next week. Thanks for everyone's support!

tommytob
7 Sep 2011, 5:56 AM
I have the solution. You must not use the hbox but a column layout.

sankarbaluz
10 Sep 2011, 9:14 PM
Hi,
Thanks for your great plugin.Could I understand that how we are giving "displayFieldTpl"?I am getting only the "displayField" in my combo.Please help me out from this.I given something like:


displayFieldTpl: '{ctrType} ({delFlg})'

Regards,
Sankar

zombeerose
12 Sep 2011, 11:16 AM
Two bugs when using emptyText config...

1) Empty text is not displayed at all:


Ext.define('State', {
extend: 'Ext.data.Model',
fields: [
{type: 'string', name: 'abbr'},
{type: 'string', name: 'name'},
{type: 'string', name: 'slogan'}
]
});


var states = [
{"abbr":"AL","name":"Alabama","slogan":"The Heart of Dixie"},
{"abbr":"AK","name":"Alaska","slogan":"The Land of the Midnight Sun"},
{"abbr":"AZ","name":"Arizona","slogan":"The Grand Canyon State"}
];


var statesStore = Ext.create('Ext.data.Store', {
model: 'State',
data: states
});


var singleSelect = Ext.create('Ext.ux.form.field.BoxSelect', {
emptyText: 'States',
fieldLabel: 'Select a state',
renderTo: Ext.getBody(),
displayField: 'name',
width: 500,
labelWidth: 130,
store: statesStore,
queryMode: 'local',
valueField: 'abbr'
});


2) Error "me.value is null" when setting multiSelect to false.


Ext.define('State', {
extend: 'Ext.data.Model',
fields: [
{type: 'string', name: 'abbr'},
{type: 'string', name: 'name'},
{type: 'string', name: 'slogan'}
]
});


var states = [
{"abbr":"AL","name":"Alabama","slogan":"The Heart of Dixie"},
{"abbr":"AK","name":"Alaska","slogan":"The Land of the Midnight Sun"},
{"abbr":"AZ","name":"Arizona","slogan":"The Grand Canyon State"}
];


var statesStore = Ext.create('Ext.data.Store', {
model: 'State',
data: states
});


var singleSelect = Ext.create('Ext.ux.form.field.BoxSelect', {
emptyText: 'States',
multiSelect: false,
fieldLabel: 'Select a state',
renderTo: Ext.getBody(),
displayField: 'name',
width: 500,
labelWidth: 130,
store: statesStore,
queryMode: 'local',
valueField: 'abbr'
});


Running version 1.1

notjoshing
13 Sep 2011, 11:23 AM
For lists with tens or even hundreds of items this works well. I've found it tends to bog down on larger lists, though. It may be a good idea to buffer the picker so that it only renders a limited selection at any given moment. What do you think?

kveeiv
14 Sep 2011, 1:56 PM
1.2 has been released and the first post (http://www.sencha.com/forum/showthread.php?134751-Ext.ux.form.field.BoxSelect-Intuitive-Multi-Select-ComboBox) has been updated. Please see that post for a more complete list of updates. Many thanks go out to the many testing and coding contributions that have been made so far for this extension.



#1 When typing in a state in the examples, like "Conn" for conneticut, and then hitting return, Conneticut is entered into the field but then the text "Conn" is still after it. If a match is found and the return key is pressed, the typed text showed go away (?)

I have tied this behavior to the pinList: false configuration.



#2 I tried using a store with a proxy to get data remotely and I load that using the .load() command on the store when I first create my form that the box select field is in. But if I try to use local query mode when I try to select an item from the list nothing shows up in the field after I click on a selection. If I switch to remote I am sent a query string on the server side which I can use to filter the list but I would prefer to let the store search the store that is already loaded rather than having to go to the server.

Can you please try this with 1.2? If you're still able to duplicate it but unable to debug the problem, I will need a small example. What you describe is my most common use case, so this should be working.


When you select an item, the top of the control moves up

I would like the combo-box's height to remain unchanged as I have a space constraint. How do I do that?

the panel/fieldset/... where the boxselect is into will not change the heigth

I have the solution. You must not use the hbox but a column layout.

All of these comments should be addressed in 1.2. The component layout has been redone and should respect heights that are set by the containing layout, through the initial configuration, or directly manipulated through things like setHeight. As hbox is for fixed heights, if you want the field to grow you will want to use a column layout as you mentioned. Additionally, support for the grow/growMin/growMax configuration options has been added, so you should now be able to achieve any desired effects with regards to height and layout.



Not sure if you can do this out of the box, but instead of returning a number of POST variables, I have created a small override to submit an array of values instead.


Thanks for the contribution! I have incorporated this functionality in to 1.2, configurable via the encodeSubmitValue option.



However, there is a small problem when using it in "autocomplete" mode. If the user clicks at the input field to enter some text to be found, the trigger action is fired and the query tries to fetch all the records which is not desired. The query should be fired after certain number of letters (minChars) has been entered. I'd suggest adding a config option like triggerOnClick: true/false


Thanks for the contribution! I have incorporated this functionality in to 1.2. I have defaulted this to 'true', but you can globally override this in your code by using Ext.ux.form.field.BoxSelect.prototype.triggerOnClick = false; if you find that matches more of your use cases.


Hi,
Thanks for your great plugin.Could I understand that how we are giving "displayFieldTpl"?

This is not a valid ComboBox configuration according to the docs. If you would like to implement support for this type of functionality, contributions are always greatly appreciated!


Two bugs when using emptyText config...
1) Empty text is not displayed at all:
2) Error "me.value is null" when setting multiSelect to false.


Thanks for the report. I have fixed the logic associated to emptyText that was introduced in 1.1, and have added emptyText configurations in to the examples page to prevent this error from popping back up.


For lists with tens or even hundreds of items this works well. I've found it tends to bog down on larger lists, though. It may be a good idea to buffer the picker so that it only renders a limited selection at any given moment. What do you think?

I haven't used it, but I believe ComboBox's configuration of 'pageSize' is exactly what you're looking for. BoxSelect currently doesn't manipulate the picker at all, so if it works for ComboBox it should work fine for this component as well.

salarmehr
14 Sep 2011, 10:29 PM
How can I remove an item from drop-down menu when user select that items?
(as SuperBox do).
Thanks

zombeerose
16 Sep 2011, 8:47 AM
Awesome - thanks!!!

qnens
16 Sep 2011, 4:56 PM
Thank you sou much brother,.
GBU



obat kuat (http://www.obatkuatku.com)

ngd
18 Sep 2011, 11:01 PM
BoxSelect is great but I have a showstopper bug and would like at least a workaround. When I set the value field as an array e.g. value : ['AK'], I get an error in Chrome as well as FF : Uncaught RangeError: Maximum call stack size exceeded

The bug is easy to reproduce. In boxselect.js (under examples), set value : ['AK'] instead of value : 'AK, CA'.

kveeiv
19 Sep 2011, 6:13 AM
BoxSelect is great but I have a showstopper bug and would like at least a workaround. When I set the value field as an array e.g. value : ['AK'], I get an error in Chrome as well as FF : Uncaught RangeError: Maximum call stack size exceeded

The bug is easy to reproduce. In boxselect.js (under examples), set value : ['AK'] instead of value : 'AK, CA'.

Wow, sorry about that. I'll get this fixed up in an official build soon, but for now the following override should work:



Ext.override(Ext.ux.form.field.BoxSelect, {
setValue: function(value, doSelect, skipLoad) {
if (Ext.isArray(value)) {
value = Ext.Array.map(value, function(val) {
if (val.isModel) {
return val.get(this.valueField);
}
return val;
}, this).join(this.delimiter);
}
return this.callOverridden([value, doSelect, skipLoad]);
}
});

ngd
19 Sep 2011, 6:23 AM
Thanks for the prompt reply. Hope you release 1.2.1 soon. Thanks again.

notjoshing
26 Sep 2011, 11:30 AM
I haven't used it, but I believe ComboBox's configuration of 'pageSize' is exactly what you're looking for. BoxSelect currently doesn't manipulate the picker at all, so if it works for ComboBox it should work fine for this component as well.
Thanks! I really like the interface for this widget. I ended up using the proxy to look up a smaller subset of values. That works well enough.

Josh

ngd
29 Sep 2011, 12:57 AM
Hi kveeiv,

Bug 1) I have tried your fix and unfortunately BoxSelect just stops working. I am not even able to select values into it.

Bug 2) If I use a remote store, and if I set multiSelect to false, the Name corresponding to the value field does not show up in the box. If I set multiSelect to true, it shows up.

Bug 3) If I set the value to be a CSV e.g. '123, 456' or if I set it to an array, BoxSelect sends me the inital query infinite times. It just doesn't stop.

I don't mean to pester you as I understand you must be busy with other things but we have a decision to make on whether we go with BoxSelect or not. Any idea, if and when these bugs could be fixed?

Thanks again!

charlie17
5 Oct 2011, 7:16 PM
When pressing the TAB key after selecting an entry from the list, is there a way to keep the cursor within the box as opposed to it cycling to the next control on the page?

notjoshing
17 Oct 2011, 2:24 PM
I'm using BoxSelect 1.2 in Ext 4.0.2a with a jsonp proxy, and I noticed that I'd get errors when I clicked on a newly rendered BoxSelect without a value. To avoid this, I modified the code around 433:


if( me.valueStore ) {//MOD
me.valueStore.each(function(rec) {
var i = pickStore.findExact(valueField, rec.get(valueField));
if (i >= 0) {
selection.push(pickStore.getAt(i));
}
});
}//MOD

I also noticed that the emptyText value was rendering even when values existed for the drop-downs. I looked into the code and changed the code around line 1030 to prevent this:


if (isEmpty) {
inputEl.dom.value = emptyText;
inputEl.addCls(me.emptyCls);
} else {
inputEl.dom.value = '';//MOD
inputEl.removeCls(me.emptyCls);
}


Thanks for a great plugin!

Josh

sankarbaluz
17 Oct 2011, 10:55 PM
Hi,
While trying to set more than 3 values in BoxSelect,its not showing anything I am sending you with a simple example.



var basicBoxselect = Ext.create('Ext.ux.form.field.BoxSelect', {
fieldLabel: 'Select multiple states',
renderTo: 'basicBoxselect',
displayField: 'name',
width: 500,
labelWidth: 130,
store: statesStore,
queryMode: 'local',
emptyText: 'Pick a state, any state',
valueField: 'abbr',
value: 'WA, TX,SD,TN'
});


but the code is working fine for



var basicBoxselect = Ext.create('Ext.ux.form.field.BoxSelect', {
fieldLabel: 'Select multiple states',
renderTo: 'basicBoxselect',
displayField: 'name',
width: 500,
labelWidth: 130,
store: statesStore,
queryMode: 'local',
emptyText: 'Pick a state, any state',
valueField: 'abbr',
value: 'WA, TX'
});


Please tell me how to setValue for the BoxSelect for multiple items.I given something like this


basicBoxselect.setValue('IMDG,BC,BHH,JJJ');

its not working...if i will set values for 2 items,it will work...

notjoshing
18 Oct 2011, 5:33 AM
Hi,
While trying to set more than 3 values in BoxSelect,its not showing anything I am sending you with a simple example.
You're using different delimiters for the items. In the two value example, your delimiter is a comma followed by a space. Your multiple value examples use only a comma. Whatever your delimiter is (you can specify it with the 'delimiter' parameter), you need to match it exactly for your values to work.

Josh

kveeiv
25 Oct 2011, 5:46 PM
1.3 has been released and the first post (http://www.sencha.com/forum/showthread.php?134751-Ext.ux.form.field.BoxSelect-Intuitive-Multi-Select-ComboBox) has been updated. Please see that post for a more complete list of updates.

My continued thanks go out to the various testing and coding contributions that have been made so far from the community for this extension, and also for the thousands upon thousands of thread views and downloads.



Bug 1) I have tried your fix and unfortunately BoxSelect just stops working. I am not even able to select values into it.

My apologies for the problems with the previous release introduced by auto-querying. I have been very busy lately and unfortunately have not been able to get this update out more quickly. Thank you for your understanding and taking the time to file these bug reports. The underlying issue for this has been fixed in 1.3.



Bug 2) If I use a remote store, and if I set multiSelect to false, the Name corresponding to the value field does not show up in the box. If I set multiSelect to true, it shows up.

This has been resolved.



Bug 3) If I set the value to be a CSV e.g. '123, 456' or if I set it to an array, BoxSelect sends me the inital query infinite times. It just doesn't stop.

This has been resolved and also an example of remote querying has been added to the documentation to make sure this functionality remains tested in the future and to provide a demonstration for those wishing to leverage this functionality.



I'd get errors when I clicked on a newly rendered BoxSelect without a value. To avoid this, I modified the code around 433:

...

I also noticed that the emptyText value was rendering even when values existed for the drop-downs. I looked into the code and changed the code around line 1030 to prevent this:

...

Thanks for the contributions! They have been included in 1.3.

charlie17
26 Oct 2011, 6:33 PM
Thanks for the updates kveeiv.

I am seeing an issue in 1.3 that was not present in the previous version: When I start typing an entry, as soon as the filtered list of choices appears, the text I've typed gets cleared out of the text box area. It just gets totally blanked out. This pretty much negates the ability to type in a value and hurts my usability quite a bit.

This is running 4.0.7 and using a remote store.

In brighter news, the infinite looping issue is definitely fixed.

Any ideas?

kveeiv
29 Oct 2011, 8:29 AM
1.3.1 has been released and the first post (http://www.sencha.com/forum/showthread.php?134751-Ext.ux.form.field.BoxSelect-Intuitive-Multi-Select-ComboBox) has been updated. Please see that post for a more complete list of updates.


I am seeing an issue in 1.3 that was not present in the previous version: When I start typing an entry, as soon as the filtered list of choices appears, the text I've typed gets cleared out of the text box area.

This was mistakenly introduced in 1.3.1 and I had overlooked testing the remote store querying. I have modified the server side script included in the remote store example to handle querying, and have fixed the over-zealous clearing of the input field.


Could I understand that how we are giving "displayFieldTpl"?

I have added the capability to customize the label template to 1.3.1. The remote store example now shows how to do this. The "tpl" config property is used by ComboBox to create the picker, and a "labelTpl" config property has been added to BoxSelect 1.3.1 to control the rendering of the labeled items. The defaults for these remain as being built off of the combo's displayField config property.

nikadod
10 Nov 2011, 3:49 AM
I am using BoxSelect with Store which is bound to a following Model:



Ext.define('App.model.MyModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'record_id', type: 'int'},
'name'
],
proxy: {
type: 'ajax',
url: 'myModel.cfm',
reader: {
type: 'json'
}
}
});


Delimiter of BoxSelect is set to comma (,), and multiSelect is true by default.

I noticed that if I call boxselect.setValue(1) it works fine.
But once I say boxselect.setValue("1,2") it simply does not set anything.

After a bit of investigation I believe I see the problem. BoxSelect is using its own method findRecord to search for the record in the bound store.


findRecord: function(field, value) {
var ds = this.store,
rec = false,
idx;


if (ds.snapshot) {
idx = ds.snapshot.findIndexBy(function(rec) {
return rec.get(field) === value;
});
rec = (idx !== -1) ? ds.snapshot.getAt(idx) : false;
} else {
idx = ds.findExact(field, value);
rec = (idx !== -1) ? ds.getAt(idx) : false;
}


return rec;
},


As you see it uses strict comparison.
However, when string like "1,2" is split into array (inside setValue), the resulting array contains string elements:
["1", "2"].

I changed comparison in findRecord to type-converting (just removed one =), and think it may be included as a fix in next releases.

abraxxa
10 Nov 2011, 3:59 AM
I'd rather keep the not-type-converting comparison operator and fix the code that puts strings rather than numbers into the array.

nikadod
10 Nov 2011, 4:53 AM
I'd rather keep the not-type-converting comparison operator and fix the code that puts strings rather than numbers into the array.

I agree with this. However, after looking on implementation of Ext.data.Store.findExact (which is used as an alternative way of getting record in the code of BoxSelect.findRecord) I decided to go for the same way of comparison, to be consistent.

nikadod
10 Nov 2011, 5:23 AM
I agree with this. However, after looking on implementation of Ext.data.Store.findExact (which is used as an alternative way of getting record in the code of BoxSelect.findRecord) I decided to go for the same way of comparison, to be consistent.

Further observation on Ext.data.Store.findExact implementation. It had non-type-converting comparison in Ext 4.0.6, and was changed to type-converting comparison in Ext 4.0.7.
My proposal seems to be consistent with Store's findExact behavior in 4.0.7, but not in 4.0.6.

koblass
10 Nov 2011, 11:51 AM
Hi,

Nice to see this component evolving.
Would it be possible to have an option that removed the item from the list as soon this one has been selected ?

Best regards
Daniel

ernst96
10 Nov 2011, 5:09 PM
Thank you for this extension.

I noticed that when using it with Ext.ux.form.field.ClearButton and stacked is set to true the selected item overlaps with the clear button.

I have added this hack to to BoxSelect.css




.x-boxselect-stacked .x-boxselect-item {
display: block;

/* HACK added to prevent overlap of staked items */
margin-right: 16px;

}




I am using version 1.3.1 of the extension and Ext 4.0.7

yumaa
1 Dec 2011, 5:38 AM
kveeiv, thank you for this extension!

I found, that if multiSelect: false and queryMode: remote and field already contains some value, and I want to add another unknown value via addValue(), but record is still unknown after store load → this action erase my first value.

I've made a little fix of this issue, in method setValue, in the end:


/**
* For single-select boxes, use the last value
*/
if (!me.multiSelect && (value.length > 0)) {
// we won't add unknown value, coz it erase necessary value
// so we use last !known! value
if (skipLoad && unknownValues.length > 0 && me.queryMode === 'remote') {
for (i = value.length - 1; i >= 0; i--)
if (value[i].isModel) {
value = value[i];
break;
}
} else
value = value[value.length - 1];
}

zombeerose
1 Dec 2011, 7:37 AM
Have you tested against 4.1PR? I am getting this error when my form is rendering: "Uncaught TypeError: Object [object Object] has no method 'setElementSize'" on line 1287 of the sizeBodyContents method.

I tested against your version 1.1 and 1.3.1.

Thanks for such an awesome extension!

radtad
14 Dec 2011, 7:02 PM
Awesome plugin! A small bug that is annoying. If I set the following:



triggerOnClick: false


The trigger input never focuses if the growMin is larger than the trigger input unless I specifically click inside of the input box itself. If I turn triggerOnClick: true, it works as expected.

kveeiv
15 Dec 2011, 6:36 AM
Thanks for everyone's continued support, issue reports, contributions, and general thanks. Its been a busy few weeks and I haven't had time to circle back and include all of these updates, but I will soon.

As for 4.1 support, I will likely not be releasing anything for that version until after the next PR/alpha/beta release is issued. As this particular release heavily impacts the method of rendering and layout for custom advanced components such as this one, I will need to update the templates and drawing processes for BoxSelect to utilize this significantly higher performing option. This will be BoxSelect 2.0, and will likely not be backwards compatible against earlier versions of ExtJS.

In the meantime, I will get back to this version and have an update out within the next week or so, hopefully with some other new features that people have been requesting for a while.

zombeerose
15 Dec 2011, 9:04 AM
Good to hear!

In the meantime, here is a patch for running against 4.1PR1:


sizeBodyContents: function(width, height) {
var me = this,
owner = me.owner,
triggerWrap = owner.triggerWrap,
triggerWidth = owner.getTriggerWidth(),
itemList, inputEl, inputElCt, lastEntry,
listBox, listWidth, inputWidth;


// If we or our ancestor is hidden, we can get a triggerWidth calculation
// of 0. We don't want to resize in this case.
if (owner.hideTrigger || owner.readOnly || triggerWidth > 0) {
itemList = owner.itemList;


// Decrease the field's width by the width of the triggers. Both the field and the triggerWrap
// are floated left in CSS so they'll stack up side by side.
itemList.setSize(Ext.isNumber(width) ? width - triggerWidth : width, height); //PC121511: me.setElementSize(itemList, Ext.isNumber(width) ? width - triggerWidth : width, height);


// Explicitly set the triggerWrap's width, to prevent wrapping
triggerWrap.setWidth(triggerWidth);


// Size the input el to take up the maximum amount of remaining list width,
// or the entirety of list width to cause wrapping if too little space remains.
inputEl = owner.inputEl;
inputElCt = owner.inputElCt;
listBox = itemList.getBox(true, true);
listWidth = listBox.width;


if ((owner.grow && owner.growMax && (itemList.dom.scrollHeight > (owner.growMax - 25))) ||
(owner.isFixedHeight() && (itemList.dom.scrollHeight > itemList.dom.clientHeight))) {
listWidth = listWidth - Ext.getScrollbarSize().width;
}
inputWidth = listWidth - 10;
lastEntry = inputElCt.dom.previousSibling;
if (lastEntry) {
inputWidth = inputWidth - (lastEntry.offsetLeft + Ext.fly(lastEntry).getWidth() + Ext.fly(lastEntry).getPadding('lr'));
}
if (inputWidth < 35) {
inputWidth = listWidth - 10;
}


if (inputWidth >= 0) {
inputEl.setWidth(inputWidth); //PC121511: me.setElementSize(inputEl, inputWidth);
if (owner.hasFocus) {
inputElCt.scrollIntoView(itemList);
}
}
}
}

radtad
15 Dec 2011, 6:18 PM
Also, one more bug. The 'change' event seems to fire on creation of the component. I'm trying to fire a request to update the database on 'change' so this is really bad. To reproduce, just put a 'change' listener on and display the old and new values.

By the way, I'm not setting any values at all and this is still happening. It shouldn't happen if I physically setValue anyway which it is also doing when I do setValues().

If you need an example, I can provide one. Just wanted to get this bug in before I forgot.

mrinsan
29 Dec 2011, 3:49 PM
As for 4.1 support, I will likely not be releasing anything for that version until after the next PR/alpha/beta release is issued. As this particular release heavily impacts the method of rendering and layout for custom advanced components such as this one, I will need to update the templates and drawing processes for BoxSelect to utilize this significantly higher performing option. This will be BoxSelect 2.0, and will likely not be backwards compatible against earlier versions of ExtJS.


This is awesome combobox, in my openion it should be included in the official list of controls that sencha suplies with extjs. for its uniqueness and usability.

however now that 4.1 beta is out, are you creating this one for it to compatible with 4.1 ? need this control real bad, for a POC or if you can provide me some minimal code fixes for it to reneder properly that would be great.

danCTS
20 Jan 2012, 12:07 PM
First let me thank you for an awesome extension. We use it in many places throughout our application.

I have a couple of box selects in an accordion menu, the accordion panel that they are in is collapsed by default, I get this in the console when loading the page
Uncaught TypeError: Cannot call method 'getBox' of undefined boxselect.js line 475
If I uncollapse that accordion panel by default and reload the page the error does not occur.
This is only happening for me in version 1.3.1 of boxselect.js I reverted to the 1.1 version I was using previously and this error does not occur. I am using version EXT 4.0.6 and just to test I tried 4.0.7 also, and I get the same error in the console. I also tested this in just a regular form panel set to collapsed: true and i get the same error.

Reimius
30 Jan 2012, 1:24 PM
Hi, this extension is great. I only have one issue with it that seems sort of unreasonable to me that it does not have. I use this extension mostly for email addresses and it would be nice if when pasting into this field that whatever is pasted is split by the delimiter. For example, if you paste something@someplace.com;cheese@someplace.com; all at once into this field I would expect that it would actually generate two entries and not one. Thanks.

nathanrice
1 Feb 2012, 11:13 AM
Just a quick note, BoxSelect breaks submission of multi-select form fields if you just transform the field rather than creating an Ext form, since you discard the original select and add an input field.

I hacked a fix for this, I'll send a pull request tomorrow if everything passes muster.


Nathan

McQuack_82
2 Feb 2012, 11:59 AM
getValues() on form panel returns extjs components instead of array like traditional like when used with traditional multi-select comboBox. I think it you override the derived function getValue() to call getValueRecords() it will return correctly. I believe the getValues on form panel calls getValue on every chicld container component. Currently when I call the getValues function on my form panel it returns back the store data instead of a standard array like a traditional multi-select combo . This is great extension to use, well designed and easy to implement.



/**
* Returns the records for the field's current value
* @return {Array} The records for the field's current value
*/
getValueRecords: function() {
return this.valueStore.getRange();
},
/**

* Returns the records for the field's current value
* @return {Array} The records for the field's current value
*/
getValue: function() {
return this.getValueRecords();
},

danCTS
13 Feb 2012, 5:35 AM
There are pull requests on Github, and posts in here that have gone unanswered for quite some time now? Has the developer abandoned this extension?

hazimdikenli
15 Feb 2012, 2:04 AM
Hello,
it won't submit data


{ id: 'Sektorler'
, renderTo: 'Sektorler_combo'
, allowBlank: true
, width: 320
, selectOnFocus: true
,name: 'SektorlerValues'
,xtype: 'boxselect'
,resizable: false
,anchor: '100%'
,queryMode:'local'
,width:320
,displayField: 'SektorKod'
,valueField: 'Id'
,displayFieldTpl: '{SektorKod} - {SektorAd}'
,navigateItemsWithTab: false
,minChars: 1
,queryDelay: 0
,triggerAction: 'all'
,delimiter: '|'
, store: ...

And when form submits, SektorValues is empty (but it is there).
Any help!
Thanks...

zombeerose
27 Feb 2012, 11:37 AM
@kveeiv

I'm eager to see a 4.1 release for this terrific extension. Please let us know that you are at least still alive kveeiv :)

hazimdikenli
28 Feb 2012, 12:14 AM
looks like the author of this great plug-in is not supporting it any more.
Here is a little fix for my problem; it might not be correct way of doing this, but it fixes the submit bug that I complained above.
add this override method


setHiddenValue: function (value) {
if (this.hiddenDataEl)
this.hiddenDataEl.dom.value = value.join(this.delimeter);
},

and this to afterRender



me.hiddenDataEl = me.el.insertFirst({
tag: 'input',
type: 'hidden',
value: me.getRawValue(),
name: (this.hiddenName || this.name)
});
delete me.inputEl.dom.name;

creating the hidden here, and deleting the name property from the inputEl, so it won't submit. You can use either a hiddenName or a name config property to submit the value.

ValterBorges
29 Feb 2012, 4:41 PM
Getting the following error in 4.1.0-beta-2

kveeiv
1 Mar 2012, 7:58 AM
Hi all! I am really sorry I haven't been active or communicative with this. It has been working for my purposes, and outside of a few people having problems here and there, it has basically seemed to be pretty stable for the 4.0 branch.

Sencha has been doing some awesome work across all of their products in the past few months, and I have been busy keeping up with that work for sencha touch 2, sencha designer 2, and playing around with the upgrade paths that will be necessary for extjs 4.1 for the products I support and being able to leverage as much between the 4.1 and ST 2 frameworks as sencha is already doing internally.

These betas for all of their excellent products have just been coming out too hot and heavy to be able to keep up with all of each release, and have had enough changes between each of them to not prioritize trying to target compatibility for each one on a complex user extension such as this one.

Those are all mostly excuses though, and I will return to this once 4.1 comes out of beta and incorporate all of the awesome pull requests, bug reports and hotfixes that have been contributed since the last release. I appreciate the community support that has helped those with issues overcome them in the meantime.

abraxxa
1 Mar 2012, 9:14 AM
Good to read that you haven't abandonded this extension like it happened with its ExtJS 3 predecessor. Thanks!

ValterBorges
14 Mar 2012, 5:33 AM
Hi kveeiv,

Is there a way to sort the selected items. The store is stored alphabetical so the list is alpha, but I would like the selected list to do the same.

Thanks,
Valter

metas
16 Mar 2012, 1:29 AM
Hi kveeiv,

I want to use the component in designer2, how can I do it? Is there a .xdc file for us to import from?

Thanks,
Metas

Karthikeyan.rajmohan
29 Mar 2012, 5:14 PM
How can I remove an item from drop-down menu when user select that items?

Karthikeyan.rajmohan
29 Mar 2012, 7:30 PM
I've find out a way to remove the selected item. use the below override code to fix it. This is an override code using Ext.form.field.ComboBox, so this may affect the basic combobox functionality. You can copy the doQuery function into 'Ext.define('Ext.ux.form.field.BoxSelect', {' in Boxselect.js



Ext.override(Ext.form.field.ComboBox, { doQuery: function(queryString, forceAll, rawQuery) {
queryString = queryString || '';
var me = this,
qe = {
query: queryString,
forceAll: forceAll,
combo: me,
cancel: false
},
store = me.store,
isLocalMode = me.queryMode === 'local';
if (me.fireEvent('beforequery', qe) === false || qe.cancel) {
return false;
}
queryString = qe.query;
forceAll = qe.forceAll;
if (forceAll || (queryString.length >= me.minChars)) {
me.expand();
me.lastQuery = queryString;
if (isLocalMode) {
store.clearFilter(true);


store.filter([{
property: me.displayField,
value: queryString
},{
filterFn: function(item) {
var avail = false;
if (me.valueStore.getCount() != 0) {
me.valueStore.each( function(rec) {
if (item.get(me.displayField) == rec.get(me.displayField))
avail = true;
});
if (!avail)
return item;


} else
return item;
}
}
]);


} else {
me.rawQuery = rawQuery;
if (me.pageSize) {
me.loadPage(1);
} else {
store.load({
params: me.getParams(queryString)
});
}
}


if (me.getRawValue() !== me.getDisplayValue()) {
me.ignoreSelection++;
me.picker.getSelectionModel().deselectAll();
me.ignoreSelection--;
}
if (isLocalMode) {
me.doAutoSelect();
}
if (me.typeAhead) {
me.doTypeAhead();
}
}
return true;
}
});



var basicBoxselect2 = Ext.create('Ext.ux.form.field.BoxSelect', { fieldLabel: 'More States',
renderTo: 'basicBoxselect',
displayField: 'name',
width: 500,
labelWidth: 130,
store: statesStore,
queryMode: 'local',
emptyText: 'Pick a state, any state',
valueField: 'abbr',
value: 'WA',
createNewOnEnter: true,
pinList: false,
selectOnTab: true
});

cyborat
12 Apr 2012, 10:40 AM
Hi - first off, love the widget! Thanks for your work on it!

I was wondering what the events and wire-up to them would look like when clicking on the item boxes? Not when hitting the 'x' to remove them, but when clicking the item itself?

I'm implementing this into a query builder I'm putting together, and each item will represent a query option. Would like the user to be able to click one and modify their settings within that option. I'll of course be handling the form bindings etc, just need to figure out what the events are and where I'd wire up to them - would I do so within the boxselect's listeners, or do I need to elsewhere?

Thanks!!

christophe.geiser
15 Apr 2012, 7:25 AM
An 4.1 extension that should serve similar purposes (and largely inspired from this one) is available here (http://www.sencha.com/forum/showthread.php?195773-Ext.ux.ComboFieldBox-intuitive-multi-select-combobox-for-4.1&p=780263). It is certainly not as extensive as this extension and not as fully tested, but it should hopefully do the same thing.

C.

nathanmelis
17 Apr 2012, 8:52 AM
It would be fantastic if someone could add the action 'add all' to select all items with one click. Plz i'm not able to do this..

Thanks

You could extend this component and override the onKeyDown() function so you can select all items from the dropdown list with CTRL+A for example:



onKeyDown: function(e, t) {
var me = this,
key = e.getKey(),
rawValue = me.inputEl.dom.value,
valueStore = me.valueStore,
selModel = me.selectionModel,
stopEvent = false,
rec, i;
if (me.readOnly || me.disabled || !me.editable) {
return;
}

// Insert all values from the data store
if (me.isExpanded && (key == e.A && e.ctrlKey)) {
me.select(me.getStore().data.items);
selModel.deselectAll(true);
me.collapse();
me.inputEl.focus();
stopEvent = true;
} else {
// Handle keyboard based navigation of selected labelled items
if ((valueStore.getCount() > 0) &&
((rawValue == '') || ((me.getCursorPosition() === 0) && !me.hasSelectedText()))) {
if ((key == e.BACKSPACE) || (key == e.DELETE)) {
if (selModel.getCount() > 0) {
me.valueStore.remove(selModel.getSelection());
} else {
me.valueStore.remove(me.valueStore.last());
}
me.setValue(me.valueStore.getRange());
selModel.deselectAll();
stopEvent = true;
} else if ((key == e.RIGHT) || (key == e.LEFT)) {
if ((selModel.getCount() === 0) && (key == e.LEFT)) {
selModel.select(valueStore.last());
stopEvent = true;
} else if (selModel.getCount() > 0) {
rec = selModel.getLastFocused() || selModel.getLastSelected();
if (rec) {
i = valueStore.indexOf(rec);
if (key == e.RIGHT) {
if (i < (valueStore.getCount() - 1)) {
selModel.select(i + 1, e.shiftKey);
stopEvent = true;
} else if (!e.shiftKey) {
selModel.deselect(rec);
stopEvent = true;
}
} else if ((key == e.LEFT) && (i > 0)) {
selModel.select(i - 1, e.shiftKey);
stopEvent = true;
}
}
}
} else if (key == e.A && e.ctrlKey) {
selModel.selectAll();
stopEvent = e.A;
}
me.inputEl.focus();
}
}
if (stopEvent) {
me.preventKeyUpEvent = stopEvent;
e.stopEvent();
return;
}

// Prevent key up processing for enter if it is being handled by the picker
if (me.isExpanded && (key == e.ENTER) && me.picker.highlightedItem) {
me.preventKeyUpEvent = true;
}
if (me.enableKeyEvents) {
me.callParent(arguments);
}
if (!e.isSpecialKey() && !e.hasModifier()) {
me.selectionModel.deselectAll();
me.inputEl.focus();
}
}

rsqw
20 Apr 2012, 3:56 AM
Hi,

First of all, Thank you for sharing this BoxSelect-componet :))
In extjs4.0.7 all works perfectly, but in extjs4.1 it seems to be broken, width-property doesn't work :(, this this a real problem in my app, could you look about this?

Many Thanks

abraxxa
20 Apr 2012, 4:19 AM
Christophe Geiser wrote a new implementation using the new possibilities of 4.1: http://www.sencha.com/forum/showthread.php?195773-Ext.ux.ComboFieldBox-intuitive-multi-select-combobox-for-4.1

rsqw
20 Apr 2012, 7:01 AM
Many, many thanks :))

ttbgwt
26 Apr 2012, 1:13 PM
Is there a 4.1 version of this?

abraxxa
26 Apr 2012, 1:21 PM
Are you guys really that blind? Two posts above plus on the first page of the ux subforum.

jmaia
8 May 2012, 8:53 AM
Guys,

Has anyone had problems with the width of this component after upgrading to 4.1 ? I have, all BoxSelect form fields and extensions that I had on my application suddenly got shrinked to a smaller width than before (when I was still on 4.0.7).

I solved this by overriding the following method on the BoxSelect code:


/**
* Overridden to avoid use of placeholder, as our main input field is often empty
*/
afterRender: function() {
var me = this;


if (Ext.supports.Placeholder && me.inputEl && me.emptyText) {
delete me.inputEl.dom.placeholder;
}


if (me.stacked === true) {
me.itemList.addCls('x-boxselect-stacked');
}


if (me.grow) {
if (Ext.isNumber(me.growMin) && (me.growMin > 0)) {
me.itemList.applyStyles('min-height:'+me.growMin+'px');
}
if (Ext.isNumber(me.growMax) && (me.growMax > 0)) {
me.itemList.applyStyles('max-height:'+me.growMax+'px');
}
}


me.applyMultiselectItemMarkup();


me.inputCell.setWidth('100%');

me.callParent(arguments);


}


The only thing I did was add the following line at the end of the method before the call to callParent.


me.inputCell.setWidth('100%');

That seemed to have done the trick for me. I have tested it with fixed with as well as with anchor percentages and it seems to be working. Further tests are needed though.

Anyway, just my 2 cents...

Regards,

Joao Maia

jmaia
8 May 2012, 9:43 AM
Guys,

Has anyone had problems with the width of this component after upgrading to 4.1 ? I have, all BoxSelect form fields and extensions that I had on my application suddenly got shrinked to a smaller width than before (when I was still on 4.0.7).

I solved this by overriding the following method on the BoxSelect code:



False alarm guys... :(

It looked like the width problem was solved by that override, but thorough testing showed that it does not work on Chrome, just on IE and Firefox, and even so, only in some situations... :(

Well, back to the drawing board, I guess :-/

Any news on updates for this component for Ext 4.1 ? I'm somewhat reticent to use Christophe Geiser's new version for 4.1 because I already had some components of my own inheriting from this version.

Regards,

Joao Maia

Tim Toady
21 May 2012, 7:47 AM
The problem with this component in 4.1 is that the layout (Ext.layout.component.field.Field) that it is extending at the bottom has had significant changes. The sizeBodyContents function is no longer called. For my purposes, I just overrode the beginLayout function and called sizeBodyContents manually. Then I had to fix that function because it calls a few methods that no longer exist.

There may be more issues and I haven't tested extensively, but this was good enough for the issues I was hitting with it.

--edit--

Also, there is a var defined called useNewSelectors. It kills ie for 4.1. I just set it to false rather than figure out why.

User 0815
25 May 2012, 12:58 AM
The problem with this component in 4.1 is that the layout (Ext.layout.component.field.Field) that it is extending at the bottom has had significant changes. The sizeBodyContents function is no longer called. For my purposes, I just overrode the beginLayout function and called sizeBodyContents manually. Then I had to fix that function because it calls a few methods that no longer exist.

There may be more issues and I haven't tested extensively, but this was good enough for the issues I was hitting with it.

I think it is sufficient if you set the config 'componentLayout' to 'combobox':



{
xtype: 'boxselect',
componentLayout: 'combobox'
...
}



--edit--

Also, there is a var defined called useNewSelectors. It kills ie for 4.1. I just set it to false rather than figure out why.

Thanks, that was the missing piece for IE7 and IE8. For me, boxselect works now with ExtJS 4.1.

alicexyl
29 May 2012, 2:21 PM
What event handlers can we write for this widget? Will it support 'beforeAddItem', 'additem', etc. that SuperBoxSelect did?

kveeiv
31 May 2012, 5:21 PM
Well, at long last I have had some time to update this for 4.1! There were a lot of pull requests that have been made since the last release, a variety of feature requests, and a litany of underlying framework changes to test for and take advantage of.

Thanks to everyone for all of your patience and contributions. I am glad things have remained stable for those who have not moved from the 4.0.x release line. For those still using 4.0.x, please do not use this upgrade as I have not maintained backwards compatibility to the old rendering and element handling methodology. I still have some projects that are on 3.x, I feel your pain. One day maybe we'll all have the time to keep everything as up to date as we'd like!

The big bullet points for this release:
* Upgrades to the rendering to take more advantage of the improved 4.1 layout mechanisms
* The often requested ability to filter out selected values from the drop down pick list (via the new filterPickList option)
* The ability to paste values in and have them automatically parsed into new/existing selections (for example, with email addresses).

I tried to take advantage of everyone's pull requests and contributions that have been made here in this thread. I had fallen so far behind that some things were already addressed by the framework, and others I wasn't sure about but couldn't reproduce anymore. I chalked some of those up to possible framework fixes as well. If you see any problems, please feel free to also add an update to the examples/boxselect files with the test case that is failing as you submit a pull request. In addition to providing a valuable reference resource for everyone using this extension, this page is also used as a bunch of use cases to test against to ensure that functionality continues to work as advertised in the future.

This release has been tested with safari, chrome, firefox and IE 8. I don't have a machine with other versions of IE handy at the moment and didn't want to delay this release for even a few more hours. If anyone else can help with the testing of those it would be much appreciated!

ngd
31 May 2012, 6:32 PM
Kvieev: thanks for such a great plugin and thanks for the new 4.1 version.

I notice there is a bug on the examples page (http://kveeiv.github.com/extjs-boxselect/examples/boxselect.html) in the section Automatic querying of remote stores for unknown values. The selector just doesn't work. I am using the latest version of Chrome. It also doesn't work in IE9.

Thanks.

kveeiv
31 May 2012, 7:43 PM
Kvieev: thanks for such a great plugin and thanks for the new 4.1 version.

I notice there is a bug on the examples page (http://kveeiv.github.com/extjs-boxselect/examples/boxselect.html) in the section Automatic querying of remote stores for unknown values. The selector just doesn't work. I am using the latest version of Chrome. It also doesn't work in IE9.

Thanks.

I'll add a note to that example in the next commit, but you can't use php scripts in the github hosted public pages so that script won't work on that demo page. If you pull down the zip file and run it from a web server with php, it should work fine. Let me know if it doesn't.

Tim Toady
1 Jun 2012, 6:09 AM
Thanks for the update Kveeiv. Your code is very clean and well written. There is a minor bug with setValue that I fixed on my system for the last version that still exists in the new version. What happens is when you have it in a form and do loadRecord it inadvertantly changes an array of ids to an array of records. The simple solution is to clone the variable "value" at the top of the function so that it doesn't change the loaded record.

--edit--
Actually, a slightly cleaner approach would be to add true as the second param on the Ext.Array.from that is already there to return a new reference

kveeiv
1 Jun 2012, 7:31 AM
Actually, a slightly cleaner approach would be to add true as the second param on the Ext.Array.from that is already there to return a new reference

Thanks for the report, good catch. Added to next commit. I'll push these various changes up to github so that people that are following that repo can get them as they happen, and will let those build up for a few days before releasing a 2.0.1 so that people don't get release paralysis.

alicexyl
1 Jun 2012, 10:01 AM
kveeiv, thank you very much for all your hard work on this great widget! It works great for me in Chrome and IE9, but in IE8, I'm getting error "SCRIPT438: Object doesn't support property or method 'addEventListener' ". Here's my BoxSelect config:


var nameCombo = {
xtype: 'boxselect',
id: 'nameCombo',
width: 430,
hidden: true,
fieldLabel: "Select a name",
store: nameStore,
triggerAction: 'all',
valueField: 'nameId',
displayField: 'value',
renderFieldBtns:false,
listConfig: {
resizable: true,
cls: 'comboDisable'
},
listeners: {
'beforeshow': function (cb, record, index) {
...
},
'select': function (cb, record, index) {
...
},
'beforeselect': function (cb, record, index) {
...
}
},
emptyText: "Enter a name",
queryMode: 'local'
};
// Then add this as an item in a container to be rendered

This is happening in onRender(), which calls initTrigger(), which calls mon(triggerWrapper, {...}):


initTrigger: function() {
...
me.mon(triggerWrap, {
click: me.onTriggerWrapClick,
mouseup: me.onTriggerWrapMousup,
scope: me
});
...


Then it fails at registering the click handler:


addListener: function(element, eventName, fn, scope, options) {
...
var dom = element.dom || Ext.getDom(element),
bind, wrap;
...
if (dom.attachEvent) {
dom.attachEvent('on' + bind.eventName, wrap);
} else {
dom.addEventListener(bind.eventName, wrap, options.capture || false);
}



Looks like the box select's dom is a DispHTMLElementCollection in IE8, with no attachEvent(). In IE9, it's an HTMLTableElement, with attachEvent(). This isn't a problem for a regular combo box somehow. Could you help provide any insight for fixing? Would really appreciate any help with this blocking issue.

kveeiv
4 Jun 2012, 9:39 AM
@alicexyl Can you replicate this in a plain examples environment or provide a more simplified use case? I am unable to produce this error.

BoxSelect does not do any special handling of the trigger field on its own, so I am assuming this is something external to the class that you'll be able to get more help on in the q&a forum.

There are a couple of things that I can quickly note as places to start your debugging efforts though. The first is that 'renderFieldBtns' is not a valid configuration option so my first assumption would be that it is something happening in an override somewhere or this field was used as a replacement of another field and expected to have the same internal behavior. The second is that the 'id' configuration is being used. This is typically dangerous at best, you should look over the warnings about this configuration in the Ext docs as it could easily cause problems with your rendering and events.

omarc
4 Jun 2012, 5:28 PM
Thanks for the update! I had been using this component with 4.0 and really liked it.

I have one suggestion, I noticed that there is a fixed amount of 35 pixels in Ext.ux.layout.component.field.BoxSelectField. If this could be configurable, that would be great since I have small fields that have multiSelect=false and they generate a new line when I don't need one.

Keep up the great work!

Omar

alicexyl
5 Jun 2012, 12:44 PM
kveeiv, not sure exactly what happened, but the widget works in IE8 for me now. It's possible the Ext 3 to 4 migration tool I was using was interfering with it. There's no issue after all.

alaley
6 Jun 2012, 8:20 AM
Hello!

I have tried to switch to boxselect-2.0 instead of 1.3 on my ExtJS-4.0.7 based project,
but got exceptions in BoxSelect.js. Looks like "valueStore" is not initialized, because "bindStore" function was renamed to "onBindStore".
So, should boxselect-2.0 be used with ExtJS 4.1+ only?

Excuse me for the dumb question, if any.

abraxxa
6 Jun 2012, 8:56 AM
Yes that is a dumb question because the author wrote in his 4.1 support post that its only compatible with 4.1: http://www.sencha.com/forum/showthread.php?134751-Ext.ux.form.field.BoxSelect-Intuitive-Multi-Select-ComboBox&p=818135&viewfull=1#post818135

alaley
6 Jun 2012, 9:05 AM
Thank you for pointing!

BTW, it would be good to see such mentions on the first page, because "now w/ 4.1 support!" does not automatically mean of dropping 4.0 support.

alicexyl
6 Jun 2012, 10:23 AM
How do we change the template used to display the dropdown fields, and the selected fields? In SuperBoxSelect, the configs were tpl and displayFieldTpl. Woudl appreciate your help!

kveeiv
13 Jun 2012, 9:48 AM
2.0.1 is now available for download (https://github.com/downloads/kveeiv/extjs-boxselect/extjs-boxselect-2.0.1.zip). This release was largely centered around documentation. Please see the first post (http://www.sencha.com/forum/showthread.php?134751-Ext.ux.form.field.BoxSelect-Intuitive-Multi-Select-ComboBox&p=606298&viewfull=1#post606298) for more details.


Thank you for pointing!

BTW, it would be good to see such mentions on the first page, because "now w/ 4.1 support!" does not automatically mean of dropping 4.0 support.



Fair enough, adding that to the original post now.


How do we change the template used to display the dropdown fields, and the selected fields? In SuperBoxSelect, the configs were tpl and displayFieldTpl. Woudl appreciate your help!

With the release of 2.0.1, I've included an example that shows these configurations. Check it out (http://kveeiv.github.com/extjs-boxselect/examples/boxselect.html)!

alicexyl
13 Jun 2012, 10:03 AM
kveeiv, thank you so much for this update, it's very helpful!

maslofer
15 Jun 2012, 2:03 PM
There seems to be an issue with 4.1.1 RC2.

When the boxselect is created with an initial selection value and you go to change the selected items, the popup menu no longer has the previously selected items selected. This only occurs the first time the boxselect is created. If you later change the selected items and then try to change the selection, the pop-up menu will show the right items.

Works fine in 4.1.1 RC1

kveeiv
18 Jun 2012, 10:37 AM
Thanks for the heads up, I'll be sure to keep an eye out for the GA release of 4.1.1 to address any issues that may arise once the final version hits.

dedoz
24 Jun 2012, 10:14 PM
im using ext 4.1.0-rc2 (note not 4.1.1-rc2) and boxSelect 2.0.1

i have a combo with a paged store, i have the config using a normal ext combo and this ux boxselect.
problems to set a record as initial value.

code is something like

Ext.create('normal combo' or 'box select', {
store : Ext.create('somePagedStore'),
... some other configs ......,
value : record // this is a Ext.model / record instance
});

Using normal ext combo, the combo value is initialized correctly and displayed,
using the same config with a boxSelect, the value is not displayed, seems like theres a problem setting a record as the initial value.

this is the full code (note that code start loading a record, and then in the callback passing that record to the combo). If i change the comented line, to use a normal combox and comment the boxSelect line everything works perfectly.


MUI.model.empresaArea.load(1,{
params : {
scope : 'minimal',
search : [['id',1,'=']],
},
callback : function (record) {
var boxStore = Ext.create('MUI.store.empresaArea',{ pageSize : 10});
boxStore.getProxy().extraParams = { scope : 'minimal' , simpleSearchName : 'default' };


//var box = Ext.create( 'Ext.form.field.ComboBox',{
var box = Ext.create( 'Ext.ux.form.field.BoxSelect',{
multiSelect : false,
forceSelection: true,
queryMode : 'remote',
fieldLabel: 'Area',
displayField: 'nom',
valueField : 'id',
width: 400,
fieldLabel : 'Area',
labelWidth : 100,
name : 'empresaAreaId',
value : record,
store : boxStore,
pageSize : 10,
valueNotFoundText : 'Valor no encontrado'
});

var panel = Ext.create('Ext.form.Panel',{
renderTo : Ext.getBody(),
width : 600,
height : 400,
items : [box]
});
}
});

dedoz
24 Jun 2012, 10:29 PM
simplified the test case above, for this you dont need any other configured stores / models, this code is all the code needed to run the test case (do not click the trigger to open the list, the store is simplified so it doesnt have a configured proxy, because is not needed to test the problem)



var record,store;
Ext.define('someModel',{ extend : 'Ext.data.Model', fields : ['id','label']});
record = Ext.create('someModel',{id:1,label:'my Value'});
store = Ext.create('Ext.data.Store',{model : 'someModel', pageSize: 10, autoLoad:false});

var box = Ext.create( 'Ext.form.field.ComboBox',{
//var box = Ext.create( 'Ext.ux.form.field.BoxSelect',{
multiSelect : false,
forceSelection: true,
displayField: 'label',
valueField : 'id',
width : 400,
value : record,
store : store,
pageSize : 10,
renderTo : Ext.getBody()
});


using the ext combo will display "my Value' inside the combobox, as the initial value, using the boxSelect displays nothing

btw, if you create the boxSelect, not passing the value (record) and then you use box.setValue(record) it will display the value correctly, the problem just happens when you give the value in the config while creating the boxSelect (value : record). and as this problem doesnt happens in the normal ext combo, well its a boxSelect problem :d

kveeiv
25 Jun 2012, 6:11 PM
Can you reproduce this with 4.1? Versions before 4.1 are not supported, which would include any beta or RC releases leading up to 4.1.

CSC-Germany
29 Jun 2012, 7:41 AM
Hi,

I had the same issue with a remote store and the not displayed initial value. I debugged and found that the "getMultiSelectItemMarkup" function did'nt have the initial value in the internal valueStore.

This is a possible fix:



setValue : function(value, doSelect, skipLoad) {
var me = this, valueStore = me.valueStore, valueField = me.valueField, record, len, i, valueRecord, unknownValues = [];


if (Ext.isEmpty(value)) {
value = null;
}
if (Ext.isString(value) && me.multiSelect) {
value = value.split(me.delimiter);
}
value = Ext.Array.from(value, true);


for (i = 0, len = value.length; i < len; i++) {
record = value[i];
if (!record || !record.isModel) {
valueRecord = valueStore.findExact(valueField, record);
if (valueRecord >= 0) {
value[i] = valueStore.getAt(valueRecord);
}
else {
valueRecord = me.findRecord(valueField, record);
if (!valueRecord) {
if (me.forceSelection) {
unknownValues.push(record);
}
else {
valueRecord = {};
valueRecord[me.valueField] = record;
valueRecord[me.displayField] = record;
valueRecord = new me.valueStore.model(valueRecord);
me.valueStore.add(valueRecord); // BUGFIX: fixes the Problem with the initial value
}
}
if (valueRecord) {
value[i] = valueRecord;
}
}
}
}


if ((skipLoad !== true) && (unknownValues.length > 0) && (me.queryMode === 'remote')) {
var params = {};
params[me.valueField] = unknownValues.join(me.delimiter);
me.store.load({
params : params,
callback : function() {
if (me.itemList) {
me.itemList.unmask();
}
me.setValue(value, doSelect, true);
me.autoSize();
}
});
return false;
}


// For single-select boxes, use the last good (formal record) value if possible
if (!me.multiSelect && (value.length > 0)) {
for (i = value.length - 1; i >= 0; i--) {
if (value[i].isModel) {
value = value[i];
break;
}
}
if (Ext.isArray(value)) {
value = value[value.length - 1];
}
}


return me.callParent([value,doSelect]);
}

ubong
1 Jul 2012, 3:10 AM
so good

alonweiss
4 Jul 2012, 10:50 PM
With ComboBox, after deselecting an item, the 'select' event is fired (onListSelectionChange).
However, in BoxSelect, after deselecting an item using the 'x' button, it doesn't (which is why i consider this a bug). If you deselect an item in the picker (like in ComboBox), the event fires properly.

The BeforeDeselect event, however, fires properly.

I'm looking into this, but it seems that perhaps some kind of a call to the base onListSelectionChange() function can do the trick.

kveeiv
6 Jul 2012, 6:04 AM
With 4.1.1 GA out as of yesterday, I'll be verifying BoxSelect against this version and resolving any issues soon. I am out of town through the end of the weekend, so this will be early next week before I'm able to get to it. Just wanted to post a quick status update here so that people would know what to expect!

dedoz
9 Jul 2012, 6:56 AM
first i love this ux saved so much time, i dont use Ext.combo anymore all my combos are boxSelect ;d

question, is there a event when user clicks a (already) selected value, that is displayed as a bubble in the rectangle field. when i click one of those it changes its color, so i guess theres a event for that ? thats not part of the default Ext.combox because there selected values arent displayed as bubbles :d


edit.
since i didnt find any event i added one :d, added one line that fires itemClick event passing the record clicked (added the red code)



onItemListClick: function(evt, el, o) {
var me = this,
itemEl = evt.getTarget('.x-boxselect-item'),
closeEl = itemEl ? evt.getTarget('.x-boxselect-item-close') : false;


if (me.readOnly || me.disabled) {
return;
}

evt.stopPropagation();

if (itemEl) {
if (closeEl) {
me.removeByListItemNode(itemEl);
} else {
me.fireEvent('itemClick',me.getRecordByListItemNode(itemEl));
me.toggleSelectionByListItemNode(itemEl, evt.shiftKey);

}
me.inputEl.focus();
} else if (me.triggerOnClick) {
me.onTriggerClick();
}


},

srarnold
10 Jul 2012, 6:21 AM
It seems with this config option on, when I click on an empty control the first time I get this.createFilterFn is not a function line 946, my definition for the control is as follows:


{
xtype: 'boxselect',
labelAlign: 'top',
labelSeparator: '',
id: 'bxsTMRoles',
fieldLabel: 'Roles',
queryMode: 'local',
editable: true,
lastQuery: '',
typeAhead: true,
emptyText: 'Please select a role',
width: 320,
growMin: 75,
growMax: 150,
triggerOnClick: true,
forceSelection: true,
filterPickList: true,
displayField: 'Name',
valueField: 'RoleID',
store: roleListStore,
listeners: {


beforequery: function(qe) {


delete.qe.combo.lastQuery;


}


}

}


This does not seem to stop the control from working, I just keep getting these errors displaying in FireBug.

kveeiv
10 Jul 2012, 3:15 PM
2.0.2 has been released! Please see the first post for more details. Most notably, events have been exposed for the selection/focusing of current values. I have added the event listeners of these (valuefocuschange, valueselectionchange) to the event logging example (http://kveeiv.github.com/extjs-boxselect/examples/boxselect.html#eventsAndValues). This is somewhat experimental and I'd like to have a better use case and example for showing off this more advanced functionality. Feedback and contributions are greatly appreciated as always!

A plea on bug reports and questions:
I use the included examples/boxselect.html as a test bed when verifying a release against various browsers.

I have been getting a huge increase in invalid bug reports through this thread, private messages, and the github repository issues, that have fallen in to 2 buckets. The first is not specifying the proper doctype tags for older versions of IE, and the second is using mismatched versions of this component and ExtJS.

Please reproduce your issue in the simplified framework of examples/boxselect.html before submitting your request, as these reports are becoming quite time consuming and making it difficult to separate the signal from the noise for valid issues. By doing so, you will dramatically increase the odds and speed of someone helping resolve your issue! You are also much more likely to receive a response here in this thread than in a private message.

Thanks for your help and consideration!

ettavolt
12 Jul 2012, 3:46 AM
Hello.
Thank you very much for maintaining such a wonderful component. After I've used it, I was able to completely remove some blocks from page. :)
However, there is a problem with laying out this field when it's width is managed by a container. InputElCt is sized with respect to old (before layout) field's width.
To fix this, a component's layout should be changed:


Ext.define('Ext.ux.layout.component.field.BoxSelectField', {

/* Begin Definitions */

alias: ['layout.boxselectfield'],

extend: 'Ext.layout.component.field.Trigger',

/* End Definitions */

type: 'boxselectfield',

/*For proper calculations we need our field to be sized.*/
waitForOuterWidthInDom:true,

beginLayout: function(ownerContext) {
var me = this,
owner = me.owner;

me.callParent(arguments);

ownerContext.inputElCtContext = ownerContext.getEl('inputElCt');
owner.inputElCt.setStyle('width','')

me.skipInputGrowth = !owner.grow || !owner.multiSelect;
},

beginLayoutFixed: function(ownerContext, width, suffix) {
var me = this,
owner = ownerContext.target;

owner.triggerEl.setStyle('height', '24px');

me.callParent(arguments);

if (ownerContext.heightModel.fixed && ownerContext.lastBox) {
owner.listWrapper.setStyle('height', ownerContext.lastBox.height+'px');
owner.itemList.setStyle('height', '100%');
}
/*No inputElCt calculations here!*/
},

/*Calculate and cache value of input container.*/
publishInnerWidth:function(ownerContext) {
var me = this,
owner = me.owner,
width = owner.itemList.getWidth(true) - 10,
lastEntry = owner.inputElCt.prev(null, true);

if (lastEntry && !owner.stacked) {
lastEntry = Ext.fly(lastEntry);
width = width - lastEntry.getOffsetsTo(lastEntry.up(''))[0] - lastEntry.getWidth();
}

if (!me.skipInputGrowth && (width < 35)) {
width = width - 10;
} else if (width < 1) {
width = 1;
}
ownerContext.inputElCtContext.setWidth(width);
}

});

Usually fields do no calculations, because they are rendered as<table>s.

With hope this is useful,
Arseniy.

gaurav.rehan
19 Jul 2012, 1:08 AM
Hi, is there a mobile version of BoxSelect available? I am working on a html application for Blackberry 9790 device. this BoxSelect control is little too heavy/and slow on the actual device. It will be good to know if there is a light weight/mobile friendly version of this control available.
Thanks,
Gaurav

alicexyl
19 Jul 2012, 1:41 PM
How can I remove an item from drop-down menu when user select that items?
(as SuperBox do).
Thanks

Use filterPickList (http://kveeiv.github.com/extjs-boxselect/examples/boxselect.html#). You can see this work in the demo.

alicexyl
19 Jul 2012, 2:43 PM
While testing in Chrome, I found an issue where 'beforedeselect' event isn't fired when:
The box select has just been loaded with existing value(s)
User deletes one of the values
In this case, only 'change' event is fired. If user adds a new value, then delete, then 'beforedeselect' is fired. Since 'change' event does not distinguish between user change and programmatic change, we don't want to put logic related to user-initiated change in its handler. Here's a test case:


var countrySelectionBox = X4.create('Ext.ux.form.field.BoxSelect', {
id:'countrySelectionBox',
emptyText: 'Enter a country',
store: <countries store>,

value: ['US', 'BR'],
queryMode: 'local',
displayField: 'value',
width:410,
valueField: 'id',
hideTrigger: true,
triggerOnClick: false,
filterPickList: true,
listConfig: {
resizable: true
},
listeners: {
'change': function (bs, newValue, oldValue) {
console.log("new: " + newValue + " old: " + oldValue);
},
'beforedeselect': function (bs, record) {
console.log("Removed " + record.getId());
},
'select': function (bs, records) {
console.log("Selected " + records);
}
}
});


UPDATE: Did more debugging. Looks like if user deletes a value right after the box select is loaded, then the picker is not available yet, so in BoxSelect.syncSelection(), a whole block of code is not run:


syncSelection: function() {
var me = this,
picker = me.picker,
valueField = me.valueField,
pickStore, selection, selModel;

*** Block below not run because picker isn't available ***
if (picker) {
pickStore = picker.store;


// From the value, find the Models that are in the store's current data
selection = [];
if (me.valueStore) {
me.valueStore.each(function(rec) {
var i = pickStore.findExact(valueField, rec.get(valueField));
if (i >= 0) {
selection.push(pickStore.getAt(i));
}
});
}


// Update the selection to match
me.ignoreSelection++;
selModel = picker.getSelectionModel();
selModel.deselectAll();
if (selection.length > 0) {
selModel.select(selection);
}
if (me.ignoreSelection > 0) {
--me.ignoreSelection;
}
}
},


UPDATE 2: I found a workaround that seems to work well for me, which is to call createPicker() in the 'change' event handler if it's not available yet:


'change': function (bs) {
if (!bs.getPicker()) {
bs.createPicker();
}
}

kveeiv
24 Jul 2012, 5:46 PM
2.0.3 has been released. Please see the first post (http://www.sencha.com/forum/showthread.php?134751-Ext.ux.form.field.BoxSelect-Intuitive-Multi-Select-ComboBox) for details. This release includes a layout fix posted by ettavolt that resolves field relayouts and some layout issues with older versions of IE. I had been having difficulty reproducing these IE issues, so much appreciation to ettavolt for providing a fix that has resolved them for the users that had been reporting them! This release also includes some changes to the example documentation to be able to see the configs of the example BoxSelect's inline.



However, there is a problem with laying out this field when it's width is managed by a container. InputElCt is sized with respect to old (before layout) field's width.
To fix this, a component's layout should be changed:
....
[/CODE]
Usually fields do no calculations, because they are rendered as<table>s.

With hope this is useful,
Arseniy.

Thank you very much for this contribution. Several users had been reporting problems in IE7 and IE8 and this patch seems to have solved their problems as well, which I had not yet been able to reproduce.


Hi, is there a mobile version of BoxSelect available?

There is not of this particular component. Anything targeting the mobile platforms should really be using the Sencha Touch framework instead. I haven't looked in a little bit, but I think a few options for multi-select capabilities were circulating around the forums for ST 2.


alicexyl[/COLOR]]




While testing in Chrome, I found an issue where 'beforedeselect' event isn't fired when:
The box select has just been loaded with existing value(s)
User deletes one of the values


Can you give me a description of what functionality you were creating off of this event? I am not currently accounting for deselect from an event perspective (beyond what the superclass combobox control provides) and when I went to fix this issue I was torn in a few ways as to when/where to implement it. Some use cases would help define this better for me. I'm glad you have found a workaround in the meantime.

ngd
25 Jul 2012, 6:23 PM
I know my request is going to sound ridiculous but given that your component works beautifully with remote stores, i would suggest it anyway.

For "single" valued combos, provide a config option that will make it look like a regular combo i.e. w/o the border and the "cross" symbol. That way I can use your combo everywhere. Currently I have a big problem in using ExtJS's native combo because it doesn't load default values in my combo if my combo is remote.

I've posted in various forums without success on how to achieve this. But since you do it anyway, I think it will be good.

talha06
26 Jul 2012, 3:02 AM
Just a little suggestion, IMHO it'll be better if boxselect expands itself when input expands. And a clear button will be nice too..

Thanks a lot again for this *MUST* extension..

maneljn
2 Aug 2012, 6:48 AM
srarnold, i have the same problem.
Error message in firebug.
Did you solved ?

Thanks
Manel.

srarnold
2 Aug 2012, 7:16 AM
srarnold, i have the same problem.
Error message in firebug.
Did you solved ?

Thanks
Manel.

Yes I did, I found that by removing the typeAhead and lastQuery config items sorted this problem out, so my xtype looks like this:


xtype: 'boxselect',
id: 'cboIncWinGroups',
fieldLabel: 'Included Windows Groups',
queryMode: 'local',
emptyText: 'Please select a windows group',
width: 320,
growMin: 75,
growMax: 150,
forceSelection: true,
filterPickList: true,
displayField: 'WindowsGroup',
valueField: 'WindowsGroup',
store: TLC_WinIncGroupStore

zombeerose
2 Aug 2012, 12:58 PM
@kveeiv
Thanks for continuing to support this extension!

maneljn
2 Aug 2012, 11:16 PM
Yes I did, I found that by removing the typeAhead and lastQuery config items sorted this problem out, so my xtype looks like this:


xtype: 'boxselect',
id: 'cboIncWinGroups',
fieldLabel: 'Included Windows Groups',
queryMode: 'local',
emptyText: 'Please select a windows group',
width: 320,
growMin: 75,
growMax: 150,
forceSelection: true,
filterPickList: true,
displayField: 'WindowsGroup',
valueField: 'WindowsGroup',
store: TLC_WinIncGroupStore


srarnold, thanks. now works fine without error

Manel

Schlurcher
7 Aug 2012, 8:16 AM
I ran into a problem with regards to trackResetOnLoad. Fixed it this way:

setValue (Line 1308)


if ((skipLoad !== true) && (unknownValues.length > 0) && (me.queryMode === 'remote')) {
me.isLooking = true;
var params = {};
params[me.valueParam || me.valueField] = unknownValues.join(me.delimiter);
me.store.load({
params: params,
callback: function () {
if (me.itemList) {
me.itemList.unmask();
}


me.setValue(value, doSelect, true);
me.autoSize();
me.lastQuery = false;
me.isLooking = false;
me.fireEvent("lookupcomplete");
}
});


return false;
}


resetOriginalValue (new override)


resetOriginalValue: function () {
var me = this;
if (me.isLooking) {
me.on("lookupcomplete", this.resetOriginalValue, this, { single: true });
} else {
me.callParent(arguments);
}
}


Works on my machine (so far).

nicholasnet
8 Aug 2012, 6:58 AM
I found that it is leaking global around line 1553


/**
* Track height change to fire {@link #event-autosize} event, when applicable.
*/
afterComponentLayout: function()
{
var me = this, width, height;//height was missing here hence got declared in global scope

if (me.autoSizing)
{
height = me.getHeight();
if (height !== me.lastInputHeight)
{
if (me.isExpanded)
{
me.alignPicker();
}
me.fireEvent('autosize', me, height);
me.lastInputHeight = height;
delete me.autoSizing;
}
}
}

hexawing
13 Sep 2012, 5:15 PM
Wonderful component!!

But, one question: is there an example with queryMode: "remote" and typeAhead: "true" ? I tried in my project but it doesn't work.

When I use queryMode: "local" while my store, it can work, but the paging display is wrong. If I use queryMode: "remote", then nothing displayed...

Thank you!

Forn
24 Sep 2012, 3:51 AM
I found the bug if in the cpmponent press TAB button - the error is present. For exmapl,e select last visited item in the list.

For me problem was fixed by comment line 611 and 613:


onListSelectionChange: function(list, selectedRecords) {
var me = this,
valueStore = me.valueStore,
mergedRecords = [],
i;

// Only react to selection if it is not called from setValue, and if our list is
// expanded (ignores changes to the selection model triggered elsewhere)
if ((me.ignoreSelection <= 0) && me.isExpanded) {
// Pull forward records that were already selected or are now filtered out of the store
valueStore.each(function(rec) {
//if (Ext.Array.contains(selectedRecords, rec) || me.isFilteredRecord(rec)) {
mergedRecords.push(rec);
//}
});

Hooped
2 Oct 2012, 3:27 PM
Anyone else having an issue with bindStore() on boxselect? After I set a dataStore to the boxselect and "expand" it, if I call bindStore() with the new datastore as a parameter, it doesn't take. If I call bindStore with the first store, don't expand and then call bindstore again with a different store, when I expand I actually see the correct store data.

To get around it for now I'm using the following kluge:

boxSelect.bindStore(myNewStore);
boxSelect.picker.destroy();
boxSelect.createPicker();


I had a custom store object which I thought might be the problem but when I do the same test with an ext combobox, it works as expected.

qooleot
5 Dec 2012, 9:36 AM
In the original poster's demo page, for the first example there is a bug. I'm using chrome. Clear all the default selections, then type in states in this order (not via clicking them on the dropdown):

texas alabama alaska maine florida.

Then try and type in say wisconsin. Because that list went all the way to the right side, you somehow lose the cursor and it doesn't wrap to a new line.

Thanks for the great work on this plugin!

charlie17
29 Dec 2012, 11:36 AM
Love the plugin - but have found an issue. When used along with ext-all-scoped.css, the boxselect will not 'auto-expand' as new selections are added to the box. Its height remains at one line.

When used with ext-all.css, it works just fine.

I'm going to dig in and see if I can find a manual fix within ext-all-scoped.css...but maybe someone else has already dealt with this?

I need to use ext-all-scoped.css to avoid other problems in my app, so sort of stuck between a rock and a hard place.

charlie17
29 Dec 2012, 2:56 PM
Found the culprit - the following appears at line 7746 of ext-all-scoped.css, and gets applied to the boxselect:



.x-border-box .x-reset .x-form-text {
height: 22px;
}


It does not come into play when using ext-all.css.

Seems this 'hard-codes' the height of the boxselect, preventing auto-expansion.

bobmanc
13 Jan 2013, 8:19 AM
I am trying to use this for multiple emails with auto-suggest using a remote store. If I have two fields (To and CC) and I type an unknown value in the first and tab to the second and enter the minimum chars (minChar) it calls load on the store and the label of the first field changes to NaN.

bobmanc
17 Jan 2013, 7:09 AM
I guess this extension has become unsupported :(

ernst96
24 Jan 2013, 3:16 PM
I found that when using setValue() while queryMode is set to true the store will execute a query correctly and load the returned records into the store, however the values are not being selected.

Unless I am missing something this is because of a problem with setValue():



setValue: function(value, doSelect, skipLoad) {
var me = this,
valueStore = me.valueStore,
valueField = me.valueField,
record, len, i, valueRecord, h,
unknownValues = [];


if (Ext.isEmpty(value)) {
value = null;
}
if (Ext.isString(value) && me.multiSelect) {
value = value.split(me.delimiter);
}
value = Ext.Array.from(value, true);


for (i = 0, len = value.length; i < len; i++) {
record = value;
if (!record || !record.isModel) {
valueRecord = valueStore.findExact(valueField, record);
if (valueRecord >= 0) {
value[i] = valueStore.getAt(valueRecord);
} else {
valueRecord = me.findRecord(valueField, record);
if (!valueRecord) {
if (me.forceSelection) {
unknownValues.push(record);
} else {
valueRecord = {};
valueRecord[me.valueField] = record;
valueRecord[me.displayField] = record;
valueRecord = new me.valueStore.model(valueRecord);
}
}
if (valueRecord) {
value[i] = valueRecord;
}
}
}
}


if ((skipLoad !== true) && (unknownValues.length > 0) && (me.queryMode === 'remote')) {
var params = {};
params[me.valueField] = unknownValues.join(me.delimiter);
me.store.load({
params: params,
callback: function(records) {
if (me.itemList) {
me.itemList.unmask();
}
// [I]value and doSelect are out of scope; use the records returned by the query instead
// and hardcode doSelect to true
// replaced
// me.setValue(value, doSelect, true);
// with
me.setValue(records, true, true);
me.autoSize();
}
});
return false;
}


// For single-select boxes, use the last good (formal record) value if possible
if (!me.multiSelect && (value.length > 0)) {
for (i = value.length - 1; i >= 0; i--) {
if (value[i].isModel) {
value = value[i];
break;
}
}
if (Ext.isArray(value)) {
value = value[value.length - 1];
}
}


return me.callParent([value, doSelect]);
},

scottw
19 Feb 2013, 8:30 AM
Thank you for the time you have spent creating this terrific component.

I am having an issue using "filterPickList". I'm running on ExtJS 4.1.3 and am using a remote store. I get the following error:


Uncaught TypeError: Object [object Object] has no method 'createFilterFn'

This error is occurring in the "onTypeAhead" function:



onTypeAhead: function() {
var me = this,
displayField = me.displayField,
inputElDom = me.inputEl.dom,
valueStore = me.valueStore,
boundList = me.getPicker(),
record, newValue, len, selStart;

if (me.filterPickList) {
var fn = this.createFilterFn(displayField, inputElDom.value);


In digging into this, the "createFilterFn" method exists on the store, not on the ComboBox, so I can see why the error is occurring. I had to change it to:


var fn = this.store.createFilterFn(displayField, inputElDom.value);

srarnold
22 Mar 2013, 6:34 AM
Still loving this control, but have come across a little issue running under Ext JS 4.2, it is easier to show the screen shots than try and explain the problem so here goes:
This screen shot is the BoxSelect running under Ext JS 4.2, as you can see you now have a white line under the drop down trigger, also the small 'x' is missing on the selected item, and is no longer aligned at the top of the control

42623
42624
The bottom image is the same code running under Ext JS 4.1, can anybody help me and get this control to work the same under Ext JS 4.2 ?

I will add, that it just seems to be more cosmetic issues with the control than behavior, apart from the 'x' missing on the item which you can no longer remove from the list by clicking on it, you now have to press backspace to delete the items.

Thanks in advance.
Simon.

charlie17
23 Mar 2013, 6:05 AM
Ditto - 4.2 is a non-starter for me without the functioning box select. Hope this can be addressed...

Avman2119
28 Mar 2013, 11:13 AM
Has anyone been able to get the BoxSelect auto expand (when selecting multiple items) to work in a tbar of a grid?

Avman2119
28 Mar 2013, 2:02 PM
nm figured it out. you have to give the grid an id and then override the .x-form-text css class to height: auto

WebProgrammer
30 Mar 2013, 5:43 AM
To resolve missing close icon and aligment issues in 4.2 add this css rules in BoxSelect.css :


.x-boxselect-item-close {
width : 11px;
height : 11px;
background-image: url(http://cdn.sencha.io/ext-4.2.0-gpl/resources/ext-theme-classic/images/tab/tab-default-close.gif);
filter : progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
opacity : 0.6;
top : 2px;
right : 2px;
}
.x-boxselect-list {
margin:0px;
}

lindemann-medien
6 Apr 2013, 7:26 AM
Does anyone now how I automaticly sort the selected (display) Values?

Avman2119
6 Apr 2013, 8:30 PM
You should be able to sort the store on load which in turn will show the boxselect items as sorted.

On your store just put sorters: [FieldName] etc.

lindemann-medien
7 Apr 2013, 12:54 AM
var statesStore = Ext.create('Ext.data.Store', {
model: 'State',
storeId: 'States',
data: states,
sorters: [{
property: 'name'
, transform: function(val) {
return val.toLowerCase();
}
}]
});



I have a sorter. The Dropdown is also sorted. But when you select one and it is added to the selected values this is not sorted the value field is not sorted automaticly


{
xtype:'boxselect',
"fieldLabel": "Select multiple states",
"displayField": "name",
"width": 500,
"labelWidth": 130,
"store": "States",
"queryMode": "local",
"valueField": "abbr",
"value": "TX, WA, AL",
"stacked": true,
"pinList": false,
"growMax": 150,
"triggerOnClick": false,
"filterPickList": true

}

maneljn
11 Apr 2013, 6:12 AM
i'm upgrading one application from extjs 4.1.1.a to 4.2
Without changing any source code, i have detected that now the boxselect fields don't show any value when loading from store.

What version changes i have to look for ???

cadror
17 Apr 2013, 6:14 PM
I forked this extension on GitHub and fixed some Ext 4.2.0 issues:
https://github.com/sunaku/extjs-boxselect/compare/ext-4.2.0

(https://github.com/sunaku/extjs-boxselect/compare/ext-4.2.0)I'll send a pull request to the author after I test it out a bit more.

I hope this helps those who have already migrated to Ext 4.2.0!

Cheers.

ngd
17 Apr 2013, 6:28 PM
Thanks Sunaku! Appreciate it very much.=D>

cadror
3 May 2013, 10:22 AM
I used my Ext 4.2.0 patches for boxselect for some weeks now and they seem stable.

So I have submitted my patches for merging upstream in a pull request on GitHub:

https://github.com/kveeiv/extjs-boxselect/pull/31

(https://github.com/kveeiv/extjs-boxselect/pull/31)Cheers! ~o)

abraxxa
3 May 2013, 10:29 AM
Thanks sunaku, your work is greatly appreciated!

PanchiKB
14 May 2013, 10:43 PM
Hi, is there any updated release for ExtJS 4.2, latest version... :-?

cadror
21 May 2013, 1:08 PM
Hi, is there any updated release for ExtJS 4.2, latest version... :-?

Not officially. Until then, you can try my ext-4.2.0 fork on GitHub:
https://github.com/sunaku/extjs-boxselect/archive/ext-4.2.0.zip

bentoo42
24 May 2013, 8:30 AM
Sunaka -

I am using the version that Sunaku forked for Ext Js 4.2.

So far, I am seeing the following issues:

1. In chrome, when you have SelectOnTab: true (default for the combobox) and press tab when within the control, the cursor gets stuck and the page becomes unusable.
2. In IE8, auto-grow is not working when the component is within an hbox.

zzhouag
10 Jun 2013, 7:38 AM
In remote querymode, if the query result is match with the records already selected, the combo is expanding and auto-select the records. But here I lose focus, so I can't continue to input query params only if I mousedown to get focus agian.

It's not like the example posted on http://kveeiv.github.io/extjs-boxselect/examples/boxselect.html, although it use local queryMode.

Can anyone help? Thanks!

zzhouag
10 Jun 2013, 8:38 AM
I think I solved my problem, in syncSelection(),
I replace

selModel.select(selection); to

selModel.select(selection, undefined, true);,
set suppressEvent true to stop select event help me to achieve what I want

zzhouag
11 Jun 2013, 10:44 AM
hi, I found that if combo is the last item in the form, the form's height will not be resize correctly. As figures show, the space below the last combo increased before the container's height change when the second record is selected
4429844299

zzhouag
11 Jun 2013, 11:08 AM
I also found that onFocus(), onBlur() and renderActiveError() do not work, the border-color doesn't render, dose anyone can help?
44304

QuantumScripting
15 Jul 2013, 7:03 AM
Is there a 4.2.1 version yet?

xjpmauricio
20 Aug 2013, 7:49 AM
Is there a way to programatically select/highlight an item (one of the <li>'s) already in the boxselect?

Or, a way a trigger the event 'valueselectionchange' while passing the correct event arguments like 'field' and 'records'?

chungns
23 Sep 2013, 8:23 AM
I have a problem with 4.2.1. I can't set the defaut value or use setValue() method. Do you have the same problem?

hown
4 Nov 2013, 5:29 AM
any updates on a version for 4.2? is there something going on?

zzhouag
4 Nov 2013, 8:26 AM
I can use in 4.2

Lpsmash
20 Nov 2013, 5:37 AM
Hello,

I've started to use this plugin recently and I noticed that when you use createNewOnEnter/createNewOnBlur and enter a value in the field (an email in that context), the box will not open for the other boxfields until I choose another value from the boxselect store. Or rather it barely open up, but not properly.



xtype: 'boxselect',
name: 'To',
fieldLabel: mixEmails.getLabel('To'),
queryMode: 'local',
displayField: 'NAME',
valueField: 'EMAIL',
forceSelection: false,
createNewOnEnter: true,
createNewOnBlur: true,
store: contactStore,
allowBlank: false




4692646927
Has another else experienced similar problem? And if so, what is the way to counter this?

Many Thanks

L-P.

ngd
29 Nov 2013, 5:41 AM
Is it usable in Ext 4.2.2?

Delphine
4 Dec 2013, 8:38 AM
Hello

I just discovered this plugin and I have a problem. I used it in a grid, and it's activated when I click. But when I click in the field, I lose the value previously saved in database. I think, I forgot something, isn't it ???


Ext.define('KGest.view.contrat.List', { extend: 'Ext.grid.Panel',
xtype: 'contratlist',
title: 'Liste des contrats',
store: 'sContrat',
selType: 'rowmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
columnLines: true,
initComponent: function() {
var me = this;


Ext.apply(me, {
columns: [
{
text: 'Salarié remplacé',
dataIndex: 'nom_remplac',
id: 'contrat-nom-remplac',
editor: {
xtype: 'boxselect',
store: 'sSalarieCombo',
id: 'combo-nom-remplac',
displayField: 'nom_prenom',
valueField: 'uid',
queryMode: 'remote',
hideLabel: true,
listConfig: {
loadingText: 'Recherche...',
emptyText: 'Aucun salarié trouvé.'
}
},
renderer: function(val) {
var sortie = '';
if (val != '') {
var tabVal = val.split(',');
for (var i = 0; i < tabVal.length; i++) {
var srvStore = Ext.getStore('sSalarieTous');
var detail = srvStore.query('uid', tabVal[i], false, false, true);
sortie += detail.getAt(0).data.nom_prenom + ', ';
}
sortie = sortie.substr(0, (sortie.length) - 2);
} else
sortie = '';
return sortie;
},
width: 100
}
]
});
me.callParent(arguments);
}
});

Thanks in advance

andreas-spindler
7 Jan 2014, 2:56 AM
Hi,

first of all, thank for this great UX! It works, well almost, like a charm.

However, I have a small but annoying problem. I have a quite large form for editing metadata. There are several fields where you can choose autocompleted values from one data source. In my example, I choose artists, composers, musicians, etc from an autocompleted list of names. For that reason I created on store, to hold these names and attached this store to all the "names"-fields, which are boxselect fields.

If I start typing in the e.g. composers field I get the picker with the filtered list of names. So far so good. BUT this very filter is still applied to the store if I switch to another names field, e.g. musicians field. Is it on purpose that the filter is not removed from the fields store on blur?

How do you use one data source for multiple boxselect fields in one form?

Thank for your help!

abraxxa
7 Jan 2014, 5:00 AM
You have to create one store per boxselect because the store gets filtered as far as I understand.

andreas-spindler
7 Jan 2014, 5:02 AM
Oh boy, that would be really A LOT of stores with the same data. That's pretty unpretty /:)

themightychris
27 Jan 2014, 4:31 PM
I've reformatted the component so that it can be used as a Sencha Cmd package, this gets its JS and CSS compiled in with your app automatically: https://github.com/JarvusInnovations/extjs-boxselect

The one caveat is that the examples are all FUBAR now because the SASS file has to be built by Sencha Cmd before it can be included into a page, and the sencha package build command is not working for me right now. To make the examples work again either sencha package build needs to create a .js and .css file including only the package code, or a new example needs to be created structured as a buildable app that requires the package via Sencha Cmd. I'm not sure though if it would be kosher to include a whole app inside a package though, and then where does the framework go for building it?

update - figured out how to get the package building on its own, just had to add package.framework=ext to its sencha.cfg. The examples work now

Psychokrameur
28 Jan 2014, 3:26 AM
Thanks for that Chris!

I've updated my application and works like a charm!

I'll just suggest a small update on BoxSelect.js

Ext.define('Ext.ux.form.field.BoxSelect', {
extend:'Ext.form.field.ComboBox',
alias: ['widget.comboboxselect', 'widget.boxselect'],
requires: ['Ext.selection.Model', 'Ext.data.Store', 'Ext.ux.layout.component.field.BoxSelectField'],

In the requires I add the layout used in order to avoid the "loading" warning in dev environnement.

Tell me if I'm wrong but the componentLayout is this one, I through it was the solution.

Regards

themightychris
28 Jan 2014, 8:10 AM
Psychokrameur - I just ran into that same problem and added the layout to the requires in my repo

I've also published the package on our HTTP repo so you could just run this in your project to pull it in:


sencha package repo add jarvus http://sencha.jarv.us/packages

Alvaro L
21 Feb 2014, 7:16 AM
This component is really great, thanks to all the developers for the effort of developing and sharing this.

I have one question about the selection mode, why is the multi select key set to SHIFT instead of CTRL? I would expect it to be the CTRL key like in every other application. Would be nice to either change it or add a config for it, something like

config : {
multiSelectKey : 'shiftKey'
},
onItemListClick: function(evt, el, o) {
// some code
me.toggleSelectionByListItemNode(itemEl, evt[me.getMultiSelectKey()]);

}

Maybe this question has already been addressed, I didn't really read all the topic.

Cheers!

edson.hh
5 Mar 2014, 10:09 AM
I have a problem in BOXSELECT component in ExtJS 4.2I have this example in 4.1 http://www.emdurb.com.br/teste/boxselect4.1.html Selecting the combo and goes streaking within himself. In 4.1 works well ... I have this in 4.2 http://www.emdurb.com.br/teste/boxselect4.2.html What happens: select any one record (the first not the problem), from the second, start typing eg "wa" .. It will list "Washington", but instead of selecting, guessing wrong. I will at Backspace. When I finish off, he loses focus .. And it does not occur in 4.1 Is it something in extjs? q will be q I do have something in the component to not lose focus? I do not know if I could explain it well. Sorry my english. I used Google translate

edson.hh
8 Mar 2014, 2:14 PM
I did find out the exact problem .. But lack find the solution.
The problem is, when I type any letter q is present in an item already selected

andreas-spindler
12 Mar 2014, 2:48 AM
I have the exact same problem when using BoxSelect with Ext. 4.2.2. So far, no solution in sight.

In addition I have the problem, then when I use queryMode: local, and I select an item from the list, and start tying for the second value, I get only one hit which is the item I already selected.

Are there any alternatives to Boxselect out? BS last commit on GitHub was 2 years ago. :-(

mysticav
14 Mar 2014, 11:00 PM
Hi,

For some reason spaces are not allowed on combo. Also, "Command + A" for select combo text not working.

Any idea ?

Thanks.

mysticav
20 Mar 2014, 5:18 PM
Sorry, the problem was not related to BoxSelect. The tab event was overridden by the menu where it belongs. enableKeyNav: false on the menu fixed the problem.

bareflix
3 Apr 2014, 3:01 PM
I'm trying to use BoxSelect with extjs 4.2.1.883.
I have it set up using a DirectStore which loads the drop-down from the back-end.
When I call loadRecord on the form, setValues is called with a list of comma seperated id's. I've traced into setValues and I see it turns that string into an array of ids, but then I get lost.
Nothing gets displayed, even though the list seems correct.

Any one else run into this, or have any suggestions?

folivieri
10 Apr 2014, 8:33 AM
I'm trying to use BoxSelect with extjs 4.2.1.883.
I have it set up using a DirectStore which loads the drop-down from the back-end.
When I call loadRecord on the form, setValues is called with a list of comma seperated id's. I've traced into setValues and I see it turns that string into an array of ids, but then I get lost.
Nothing gets displayed, even though the list seems correct.

Any one else run into this, or have any suggestions?

I found that if the list doesn't contain spaces after the commas, setValue() doesn't like it.

no workie: "apple,banana,orange"
workie : "apple, banana, orange"

bareflix
11 Apr 2014, 8:15 AM
I was using numbers as the key field and discovered that it treats:

[ "1", "2" ]
differently than

[ 1, 2 ]

So I ended up changing the code like this:

- value = value.split(me.delimiter);
+ value = value.split(me.delimiter).map(function(x){return parseInt(x)});

I think the problem is actually in Ext.form.field.ComboBox, but I didn't want to touch that code.

scishop
7 May 2014, 5:07 PM
Any plans to update this to support ExtJS 5?

It would be much appreciated!

Psychokrameur
8 May 2014, 12:10 AM
In my understanding, no need to update it for ExtJs 5 as this component as been released into the core of ExtJs within the name of Tag of Tagfield.See: http://docs.sencha.com/extjs/5.0.0/apidocs/#!/api/Ext.form.field.Tag

scishop
8 May 2014, 6:18 AM
Thank you, glad it's built-in now!