[2.x] Ext.ux.Andrie.Select (ComboBox with multiSelect)
Filed under: xn--cnq77f.com
This extension has been discontinued! A new extension with the same capabilities, but with cleaner and smarter code will be uploaded within the future days.
---------------
* This extension is merely the new-comer after Ext.ux.form.Select for Ext 1.x (http://extjs.com/forum/showthread.php?t=13757)
Same features are available. To summarize: a ComboBox with multiple selection support.
Nothing much changed on the surface, other than switching the config property singleSelect to it's counter-property: multiSelect. The reason behind the change is to make it more logical when using Ext.DataView.
Since 0.3.6 - it also features history capabilities (the former HistoryComboBox)
Live DEMO is available here (http://www.andrei.neculau.home.ro/extjs2/ux.Andrie.Select/Select_test.htm). Testcase is included in the attached ZIP file.
As always - looking forward to reactions on this! :)
TO DO (not in the very near future)
------
- add key search (Ext 1.x - SelectBox)
- add grouping capability (Ext 1.x - GroupComboBox)
Post Scriptum
I sincerely apologize, but you won't be seeing "Mine is better because..." regarding this post (http://extjs.com/forum/showthread.php?t=16466). People can choose and make up their own mind. This is one reason why I switched to Ext.ux.Andrie namespace. I want to govern over Ext.ux.Select (sounds like community-work, consensus toward official release) no more than I want somebody else to use Ext.ux.Andrie namespace (personal work).
I apologize for a second time because there was a "nice" delay since I promised to support Ext 2.x and the current time - release time. To be honest, this switch has only taken one day - today -, so it could have been released a long time ago.
All in all, I'd like to thanks the Ext2 team - it was fairly easier to implement this on the new framework, than it was on Ext1.-
[GMT 14:33 Nov. 5] - Update to v0.3.4 (fixed clearValue, improved reset, new clear button/trigger)
[GMT 23:14 Nov. 5] - Update to v0.3.5 (improved clear trigger and transform capabilities)
[GMT 10:04 Nov. 6] - Update to v0.3.6 (added history capabilities) [GMT 13:40 Nov. 7] - Update to v0.3.7 (removed a faulty JS hack - It's important to go ahead with this update!!!)
[GMT 17:02 Nov. 12] - Update to v0.3.8 (improved setValue function)
[GMT 10:35 Nov. 17] - Update to v0.4 (improvements and fixes + cleaner code; full changelog on the demo page)
[GMT 14:19 Nov 20] - Update to v0.4.1 - LIVE DEMO IS NOT YET UPDATED TO USE THE LATEST VERSION! (Having problems with accessing the webhost)
regards,
Simon
still working on the multi-select or anyone else?
if so, will it be ready this month or later?
thx and kind regards, tobiu
This extension has been discontinued! A new extension with the same capabilities, but with cleaner and smarter code will be uploaded within the future days.
---------------
* This extension is merely the new-comer after Ext.ux.form.Select for Ext 1.x (http://extjs.com/forum/showthread.php?t=13757)
Same features are available. To summarize: a ComboBox with multiple selection support.
Nothing much changed on the surface, other than switching the config property singleSelect to it's counter-property: multiSelect. The reason behind the change is to make it more logical when using Ext.DataView.
Since 0.3.6 - it also features history capabilities (the former HistoryComboBox)
Live DEMO is available here (http://www.andrei.neculau.home.ro/extjs2/ux.Andrie.Select/Select_test.htm). Testcase is included in the attached ZIP file.
As always - looking forward to reactions on this! :)
TO DO (not in the very near future)
------
- add key search (Ext 1.x - SelectBox)
- add grouping capability (Ext 1.x - GroupComboBox)
Post Scriptum
I sincerely apologize, but you won't be seeing "Mine is better because..." regarding this post (http://extjs.com/forum/showthread.php?t=16466). People can choose and make up their own mind. This is one reason why I switched to Ext.ux.Andrie namespace. I want to govern over Ext.ux.Select (sounds like community-work, consensus toward official release) no more than I want somebody else to use Ext.ux.Andrie namespace (personal work).
I apologize for a second time because there was a "nice" delay since I promised to support Ext 2.x and the current time - release time. To be honest, this switch has only taken one day - today -, so it could have been released a long time ago.
All in all, I'd like to thanks the Ext2 team - it was fairly easier to implement this on the new framework, than it was on Ext1.-
[GMT 14:33 Nov. 5] - Update to v0.3.4 (fixed clearValue, improved reset, new clear button/trigger)
[GMT 23:14 Nov. 5] - Update to v0.3.5 (improved clear trigger and transform capabilities)
[GMT 10:04 Nov. 6] - Update to v0.3.6 (added history capabilities) [GMT 13:40 Nov. 7] - Update to v0.3.7 (removed a faulty JS hack - It's important to go ahead with this update!!!)
[GMT 17:02 Nov. 12] - Update to v0.3.8 (improved setValue function)
[GMT 10:35 Nov. 17] - Update to v0.4 (improvements and fixes + cleaner code; full changelog on the demo page)
[GMT 14:19 Nov 20] - Update to v0.4.1 - LIVE DEMO IS NOT YET UPDATED TO USE THE LATEST VERSION! (Having problems with accessing the webhost)
Please post the code. Couldn't able to open the zip file.
Secondly, I don't know if I follow you on this.
I modified the grid example in examples/grid in order to use Ext.ux.Andrie.Select. It seems to be working ok. I'm attaching them now - you need to change the path to the Select component in the html file.
I admit that at the moment I'm busy with others, and I did not develop an application with the new Ext.ux.Andrie.Select for Ext2.0 , so you may be right that there is a bug - can anyone confirm this situation? any details?
As regards the sorting - sure. Sorting is available as it is for ComboBox. Just sort its store (selectComponent.store)!
2. Select Tab1
3. Select something in multi-combo
4. Select Tab2
5. Select Tab1 again
6. Here is the bug
Tested in Mozilla 2.0.9, IE6, Opera 9.23.
It always renders its container with width: 0px in its style.
What can I do?
Thanks in advance.
Concerning the situation you are presenting - no bug in the component. Just a tippo in the testcase. Fixed in the zip now, and later on the live demo page.
http : //echopic.com/s35
extract the attached zip file in the example directory of ext
open with IE6 the bug.htm file
open the displayed select and select labelRamota1 (the first element)
click on the label, and remove the last character to start typeAhead
I don't really understand the error (it seems to me that it should work, I don't really understand why IE doesn't work...)
I workarounded the problem chnging Select.js as follows. I don't think it's a proper solution, but it works....
expand:function(){
Ext.ux.Andrie.Select.superclass.expand.call(this);
//this.hoverFirst(); <-- commenting this line is my workaround
}
I want question : Do valueArray like :[value1,value2,...valuek] ? Because I want insert all value into database.
The transformation and posting seems fine but only lists the first selected value and not all the selected values.
Any ideas?
I'll try posting an example later on.
select box thu
ux.Andrie.Select
i build some thing like this
var ds = new Ext.data.SimpleStore({
fields:['countryCode', 'countryName'],
data:[
['US', 'United States'],
['DE', 'Germany'],
['FR', 'France']
]
});
var config = {
store:ds,
valueField:'countryCode',
displayField:'countryName',
triggerAction:'all',
mode:'local'
};
var combo = new Ext.form.ComboBox(Ext.applyIf({
fieldLabel:'Field'
}, config));
...
...
var form = new Ext.form.FormPanel({
labelWidth: 75,
title: 'Register Client',
bodyStyle:'padding:15px',
height:400,
baseCls: 'x-plain',
frame:true,
labelWidth: 55,
url:'save-form.php',
width: 350,
labelPad: 10,
items: [{
xtype:'tabpanel',
activeTab: 0,
xtype:'fieldset',
defaults:{autoHeight:true, bodyStyle:'padding:10px'},
items:[{
title:'Personal Details',
layout:'form',
defaults: {width: 350},
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false
},{
fieldLabel: 'Last Name',
name: 'last',
allowBlank:false
},
{
fieldLabel: 'Company',
name: 'company'
} ,
combo
},{
title:'Personal Details',
layout:'form',
defaults: {width: 350},
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false,
value: 'Jack'
},{
fieldLabel: 'Last Name',
name: 'last',
value: 'Slocum'
},{
fieldLabel: 'Company',
name: 'company',
value: 'Ext JS'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
},{
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}]
},
{
title:'Phone Numbers',
layout:'form',
defaults: {width: 350},
defaultType: 'textfield',
items: [{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}]
}]
}],
buttons: [{
text: 'Register'
}]
});
but its destroy all what i did
how i fix this thx in advence
plus i got more questiopn how i switch to debug mode???
I've done some small changes to the setValue() function and it looks like it works. My changes are set out here:setValue:function(v){
// Don't set anything if the value isn't defined
if (v !== undefined) {
var result = ,
resultRaw = ;
if (!(v instanceof Array)){
// Split a string into an array
// v = [v];
v = v.split (",");
}
if (!this.multiSelect && v instanceof Array){
v = v.slice(0,1);
}
for (var i=0, len=v.length; i
var text = value;
if(this.valueField){
var r = this.findRecord(this.valueField, value);
if(r){
text = r.data[this.displayField];
}
}
resultRaw.push(value);
result.push(text);
}
v = resultRaw.join(',');
text = result.join(',');
this.lastSelectionText = text;
this.valueArray = resultRaw;
if(this.hiddenField){
this.hiddenField.value = v;
}
Ext.form.ComboBox.superclass.setValue.call(this, text);
this.value = v;
if (this.view){
this.view.clearSelections();
this.selectByValue(this.valueArray);
}
if (this.oldValueArray != this.valueArray){
this.fireEvent('change', this, this.oldValueArray, this.valueArray);
}
this.oldValueArray = Ext.apply(, this.valueArray);
if (this.history && !this.multiSelect && this.mode == 'local'){
this.addHistory(this.getRawValue());
}
} // if ()
else {
// Clear everything to start with
this.valueArray = ;
} // else
}What was happening was the editor was trying to set values as single values of a string instead of a single ID or an array, and it was throwing everything out. By adding these changes in, it works well with editors as well as not being affected when it's used as a stand-alone field in a form. The "if" statement checks that there is actually a value being set as the editor initially wants to see a value of "undefined" as there's nothing selected in the component. The "else" statement clears the list of selected items so that when it is used in an editable grid it shows up with no selections for a field that doesn't have anything set. That isn't quite working right yet, but I'm trying to get it going unless anyone else can come up with a better solution. :D
Check this for yourself, and see if this works for you as well. I think I may be pretty close :D
PS: neat testcase ;)
Can you confirm that the same thing doesn't happen if you use the usual Ext.form.ComboBox ?
Do you have a link to a testcase? - that would speed things up as I don't have that much time available
Thanks in advance.
One more, do u have any ideas about when double clicked grid cell, highlight the exist items (history) on selection menu?
Your editable grid example works fine... when the select box a single select. When I add in the config item of "multiSelect: true" to make it a multi-selectable ComboBox it displays the same problems that I've described. It doesn't remember (or doesn't display) the selections, and just keeps on adding selections even if they are already there. As I said, I'm pretty sure this is to do with the Editor trying to set the value of the select box when editing closes. This will set the values as a string, as it is returned from the select box, but the select box doesn't seem to parse that string into an array properly, so sees the full string as one single item. For some reason it also brings in a blank item at the start, probably also doe to the editor trying to set something that it shouldn't be doing.
The setup for the column with the multi-select editor that I've got here is:{header: "Tags", dataIndex: "tags", width: 100, sortable: false, hidden: false, renderer: CF.Render.renderFootprintTags, editor: new Ext.grid.GridEditor (new Ext.form.MultiSelect ({
store: new Ext.data.Store ({
proxy: new Ext.data.HttpProxy ({
url: "api/api-json.php?f=getTags",
method: "POST"
}),
reader: new Ext.data.JsonReader ({
root: "tags",
id: "id"
}, [
{name: "id", mapping: "id"},
{name: "name", mapping: "name"}
])
}),
name: "tags",
listWidth: 200,
allowBlank: true,
emptyText: "All tags",
valueField: "id",
displayField: "name",
editable: false,
forceSelection: true,
triggerAction: "all",
title: "Tags",
loadingText: "Loading tags",
multiSelect: true
}))}I hope this can help a little bit with some "fixing". I'm going to see what I can come up with too and if I get any results I'll post here again. Once again, thanks for your help, and helping everyone here.
},{
layout: 'form',
bodyStyle : 'padding:0 5px 0',
border:false,
defaults: {
width: 200
},
items: [{
xtype:'textfield',
fieldLabel : LANG.FORMS_USERADMIN_LastName,
name : 'useradmin_lastname'
},
multiS = new Ext.ux.Andrie.Select(Ext.applyIf({
fieldLabel: LANG.FORMS_USERADMIN_profiles,
multiSelect: false,
minLength: 1
},{
store: new Ext.data.JsonStore({
url: '/server_response/register_getgroups.php',
root: '',
fields: ['id', 'group_name']
}),
hiddenName : 'useradmin_profiles',
valueField: 'id',
displayField: 'group_name',
triggerAction: 'all',
allowBlank : false,
mode: 'remote',
emptyText: LANG.UX_ANDRIESELECT_emptyText,
minLengthText : LANG.UX_ANDRIESELECT_minLengthText
})),
{
xtype : 'textfield',
fieldLabel : LANG.FORMS_USERADMIN_SecurityAnswer,
name : 'useradmin_sequrityanswer'
}]
}]
i have no field, but when i look in firebug the element style has a width:0 ????
Any ideas?
Cleaner code, small (big?!) improvements, etc.
@sdrew - testcase should be ok on IE7 as well now
First of all, please pay attention to what it is written on the demo page. It contains VALUABLE information. On the right column, you can read "(Diff) Doesn't select on TAB key press".
Because this component supports multiSelect, the TAB key needed to lose its make-selection function. In order for that to happen, you must use ENTER. TAB only goes to the next form field.
I'm sorry.... didn't see that specific Diff 8-
Anyway... try it on the first select box (Combobox) and you'll see that the second select using tab will not set the Value even though the combobox is set to the value...
I think i have found the problem for point 3 : in the "enter" event, onSingleBlur may be execute only for single select. So i have added a condition :
...
"enter" : function(e){
if (this.isExpanded()){
this.inKeyMode = true;
var hoveredIndex = this.view.indexOf(this.view.lastItem);
this.onViewBeforeClick(this.view, hoveredIndex, this.view.getNode(hoveredIndex), e);
this.onViewClick(this.view, hoveredIndex, this.view.getNode(hoveredIndex), e);
}else if(!this.multiSelect){
this.onSingleBlur();
}
return true;
},
...
// Clear everything to start with
if (this.view) {
this.reset ();
} // if ()
while (this.valueArray.length > 0) {
this.valueArray.pop ();
} // for ()
} // else That should do it. It's working great for me now with those changes.
deselect:function(index){
this.removeValue(this.store.getAt(index).data[this.valueField this.displayField]);
this.view.deselect(index, this.multiSelect);
},
Thx for sharing that!!
I actually have a problem. When i load a form using your widget in singlemode, the combo doesnt get rendered. It all works fine when i switch back to combobox.
I'm almost sure the problem is in the record.
//Record definition
Sala: Ext.data.Record.create([
{name: 'id' , type:'int'},
{name: 'nombre'},
{name: 'centro__nombre', mapping:'centro.nombre'},
{name: 'centro__id', mapping:'centro.id'}
]);
//select definition
{
xtype:'select',
store:Stores.get('Centro'),
fieldLabel:'Centro',
valueField:'id',
displayField:'descripcionCombo',
forceSelection:true,
triggerAction:'all',
mode:'local',
editable:true,
typeAhead: true,
hiddenName: 'centro__id' ,
name:'centro'
}
The item is actually selected (see screenshot 2), is just a rendering problem or whatever.
Debugging a little bit, i get to the set value function with valid values.
(line 570 +-)
this.commonChangeValue(v, text, result, resultRaw);
Here all vars have good values, but it doesn't get rendered. Without loading the form, everything works ok.
Tested on ie and firefox and with last version.
I don't know what to say. I have made a small testcase inside a grid, based on the Ext2 example - http://extjs.com/forum/showthread.php?p=83945#post83945 - it seems to work ok. If you can please post the config for the Select, or even bring a small testcase, or if you feel comfortable with it - message me in private with the link to your application.
As of now, I'm cleaning the code a bit, and improving some functions in order to publish v0.4 soon.
@lucian - mersi ;)
FF 2.0.8
Thanks for your great job.
But actually, i have some small problems when selected items, in multiselect mode. Here is the code :
var ds_categories = new Ext.data.JsonStore({
id: 'category_id',
fields: ['category_id', 'name', 'color'],
data: categories, // an array of objects
sortInfo: {field: 'name', direction: 'ASC'}
});
new Ext.ux.Andrie.Select({
multiSelect: true,
fieldLabel: 'Category',
store: ds_categories,
mode: 'local',
displayField: 'name',
hiddenName: 'category_id',
valueField: 'category_id'
});
1. When you expand the select by clicking on the field (not on the trigger) and i press enter, i've got an error, cause no item selected i suppose :
A has no properties
[Break on this error] Ext.DataView=Ext.extend(Ext.BoxComponent,{selected Class:"x-view-selected",emptyT...
2. After selections, when i click on the field to collapse, the values in the hidden field are not the hidden values of the items but the text. I suppose here that ther is a lack of the method 'collapseIf' :
collapseIf : function(e){
if(!e.within(this.wrap) && !e.within(this.list)){
this.collapse();
}
},
3. Idem to 2, when you press enter but i dont find something for the moment.
Hope you could help me and improve this extension.
Thank you
The testcase uses form textfields to show components' values.
The testcase also now features a comparison between Select and the formal ComboBox.
[PS: I'm not able to reach my hosting server for the moment, so the Live Demo is not yet updated]
PS: Live Demo now Online
To demonstrate:
Run: Ext.getCmp('ext-comp-1011').setValue(['DE', 'US'])
on the demo page. The values are set correctly, but they are not selected in the dropdown itself.
Thanks for a great widget by the way!
regards,
Simon
Steps to reproduce the problem
1) Reset the form which contains a Multi Select. Reusing your example, I simply called formSelect.getForm().reset();
2) Choose any option in the Multi Select
3) Notice the extra separator "," in the beginning of the resulting display value
It seems that after a reset(), the valueArray and rawValueArray becomes [""] instead of .
I fixed it temporarily in your addValue() function, as follows, in BOLD:
/* value functions */
/**
* Add a value if this is a multi select
* @param {String} value The value to match
*/
addValue:function(v){
if (!this.multiSelect){
this.setValue(v);
return;
}
if (v instanceof Array){
v = v[0];
}
v = String(v);
if (this.valueArray.indexOf(v) == -1){
var text = v;
var r = this.findRecord(this.valueField displayField, v);
if(r){
text = r.data[this.displayField];
if (this.view){
this.select(this.store.indexOf(r));
}
}else if(this.forceSelection){
return;
}
if (this.valueArray.length == 1 && this.valueArray[0] == '') {
this.valueArray = ; this.rawValueArray = ;
}
var result = Ext.apply(, this.valueArray);
result.push(v);
var resultRaw = Ext.apply(, this.rawValueArray);
resultRaw.push(text);
v = result.join(this.separator ',');
text = resultRaw.join(this.displaySeparator this.separator ',');
this.commonChangeValue(v, text, result, resultRaw);
}
},
I haven't done extensive testing, and I'm not sure if this is a good fix, and I haven't gone to the point to test values on server-side either. I have this feeling that the fix should be done in reset() instead. Perhaps you could have a look?
But the initial values of the field ( loaded from datastore ) aren't "read" by the multiselect.
So it appends the values selected, instead of using the values to determine which one is selected and whcoh one not....
edit:
Can't you do the "this.valueArray = this.getValue()?[this.getValue()]:;" somewhere when the multiselect is opened?
Instead on initComponent? Data isn't loaded into the widget useing it in grid.
And is sorting possible?
Select a country from the first dropdown using the mouse and move to the next field either by mouse or TAB.
Now go back to the dropdown using shift-TAB and choose another country by Alt-Down and then use the up/down key. To select press TAB and the country will be selected and cursor moved to the next field, but the Value field will not be set.
Only one issue that I've found, and I'm not sure if is to do with your component, or with Ext itself... When I try to use this in an EditorGridPanel (V. 2.0) I can set the values with it correctly to start with, and by using editor.field.getRawValue () I'm returning the values when I render the grid cell. The problem is that when I go to edit that cell again, what's displayed is the value fields, and not the display fields as they should be. Also, the selected entries aren't displaying as selected in the drop-down list. This lets the selections get added two or more times to the selections list. From what I can see, this is because of the editors actions when it closes the field after editing, but I'm not to sure of how to get around it.
I've got fields with the same definitions working fine in a form, but not working in the editable grid. Not sure if there is anything that can be done about this.
Great work on this! I was able to get it up and running in my Editor Grid with just one small problem. If the initial values for the field in my grid were multiple selections, then the very first time I open the multiselect box, the selections aren't selected. I traced this to the case where setValue is called before onLoad (as is the case in my code in the editor on the first open). If the value is an array like [ 4, 1 ], then in onLoad the selectByValue is called with [ "4, 1" ] instead of [ 4, 1 ].
I changed this line in onLoad and all was well:
this.selectByValue(this.value, true);
to
this.selectByValue(this.valueArray, true);
Hope this helps!
Does your program can generate a "Multi Combo Box" that has "Autotext" as well.
I mean I want a Combobox with both facility of autosuggest and Multiselect.
If your program does not have this facility, do you have any plan to do that?
because of my location and terminal, i have a reqiest in order to process the bug quicker:please put ext-debug-all.js instead of ext-all.js - thanks
@diehard_mib : thanks. Done. I will wait to see how this width/tab issue solves out and then publish an update
I´ve got a form with lots of fields and I´m trying to use your select in a specific case so I tried to test using the follow code which I got in your example:
{
xtype: "select",
fieldLabel : "Grupos com permissão",
name : "rlt_grupos",
store: new Ext.data.SimpleStore({
fields: ["countryCode", "countryName"],
data: [
["US", "United States"],
["DE", "Germany"],
["FR", "France"]
]
}),
valueField: "countryCode",
displayField: "countryName",
triggerAction: "all",
mode: "local",
msgTarget:"under",
minLength:1,
width : 290,
labelSeparator : ":"
}
As you can see in the screen shot, it´s not rendered.
Could you tell me why?
Thanks in advance.
here is a small example, hope it'll help.
Combos (http://www.pozirk.com/temp/combo.html)
One more thing, now, when deselect an item in multi-combo, there is nothing in editbox. Is it ok?
519 setValue:function(v){
520 var result = ,
521 resultRaw = ;
522 if (!(v instanceof Array)){
523 if (this.separator && this.separator !== true){
524 v = String(v);
525 v = v.split(String(this.separator));
526...
Hope this doesn't break any intended functionality. However, so far all of my test cases are working still. Hope this helps.
Thanks Andrei for all the work you put in on this extension. This really added a lot of utility to Ext forms. Hope you keep up the project! :)
P.S.: o treaba buna...
This extension has been discontinued! A new extension with the same capabilities, but with cleaner and smarter code will be uploaded within the future days.
I'm sorry that I've been out, but this is life.
I will apologize in advance for not replying to the latest comments, but I will not reply in the near future either, since this extension is discontinued.
Thanks for the support, and I hope you'll like the new extension!
Thanks in advance.
So.. basically, in your record, the field tags should be an array, and not string.
But your experience will probably take me to re-implement the separator. It seems logical to have it - at least optional. - Most probably this evening.
PS: thanks for your great input - all your post put me little by little in the right direction without looking at the source, which saves time
So when I choose 1 or more(ver. 0.4)/more then one(ver. 0.3.8) items in combo, then change the tab and then return, combobox looks like on the image.
http://www.pozirk.com/temp/combo.jpg
P.S.: What about "select all" functionality in multi-select combo? :)
Thank you.
2nd thing - imagine you have the field with United States selected.. so you see the text "United States" in the field. When you start typing in the field, what should happen? Should it overwrite the text and start filtering?.. Should it leave the text alone, and just expand the list, and filter it based on the text?
I would really be happy to see some comments on this, people.
@jeff.levine - I will carefully look into this and similar events. A real thanks!
@pozirk - Thanks. I will look into it right now! and come back with the results
Thanks for all your effort and nice job that you done!
Just a quick question:
Does your program can generate a "Multi Combo Box" that has "Autotext" as well.
I mean I want a Combobox with both facility of autosuggest and Multiselect.
If your program does not have this facility, do you have any plan to do that?
Please advice
Thanks,
Mehran
Why is it doing that?
I have set a json store as the store of a combo. I'd like to filter this list as the form loads, but the filtering only works after the list is rendered (by expanding the combo).
myStore: new Ext.data.JsonStore({
fields: ['type', 'id', 'description'],
root: 'myStore'
})
new Ext.ux.Andrie.Select({
id : 'myCombo',
store : myStore,
lazyInit : false,
hiddenName : 'myCombo',
fieldLabel : 'List',
mode : 'local',
valueField : 'id',
displayField : 'description',
typeAhead : true,
triggerAction : 'all',
emptyText : 'Select Items...',
selectOnFocus : true,
allowBlank : true,
forceSelection : true
})
// onload of the form:
myStore.filter('type',1)
I need to be able to change a second list and then filter this list depending on which item is selected in the second list.
I think my options are to either swap the stores on the combo, or to filter a single store assigned to the combo. I have tried both without success. If I filter the list and check FireBug on the 'focus' event of the combo, it says there are 4 items, which is correct for the applied filter, but when I continue outside of the function and expand the combo's dropdown list, it shows the full unfiltered list of data for the store.
After the list has been expanded, and I filter the list, it shows the correct number of items, but there is going to be confusion the first time the list is expanded about the extra items being shown.
Can you maybe help with this?
Much appreciated,
Joshua
I use ComboBoxes with data from my database. How can I automatically adapt the items lists width to the longest data (without changing the input field width, fixed to 60px)?
http://extjs.com/forum/images/misc/progress.gif Thanks in advance for your help!
First of all, please pay attention to what it is written on the demo page. It contains VALUABLE information. On the right column, you can read "(Diff) Doesn't select on TAB key press".
Because this component supports multiSelect, the TAB key needed to lose its make-selection function. In order for that to happen, you must use ENTER. TAB only goes to the next form field.
So my scenario when trying out your steps goes like this: after shift-tab, alt-down, moving up/down and pressing tab - I get the same value for the component, same selection in the list, and I simply move to the next field. What browser are you using (me - Firefox 2) ?
because of my location and terminal, i have a reqiest in order to process the bug quicker:please put ext-debug-all.js instead of ext-all.js - thanks
done.
2nd thing - imagine you have the field with United States selected.. so you see the text "United States" in the field. When you start typing in the field, what should happen? Should it overwrite the text and start filtering?.. Should it leave the text alone, and just expand the list, and filter it based on the text?
Sorry Andrei,
I really like your excellent program. Maybe we can have 2 different text box: 1) for search and 2) for showing the selected countries and 3) ofcourse something like add button when your search selected, selection add to "Selected Items"
I appreciate if you can help me in this issue,
Mehran
With the form rendered, if i reload or select a item or clear, works fine.
Maybe i should put a defer to make time to render the combobox?
Thank you.
fieldSeleccion = new Ext.form.FieldSet({
title : 'Variables Disponibles',
collapsible : true,
autoHeight : true,
//anchor : '95%',
allowBlank : false,
width : 735,
labelAlign: 'left',
hideBorders : false,
buttonAlign : 'center',
layout : 'form',
items:[{
bodyStyle : 'padding:0px 0px;',
border : false,
hideLabel : 'true',
xtype:"itemselector",
name:"itemselector",
bodyStyle : 'margin:20px;',
width : 700,
height : 400,
dataFields:["code", "desc"],
fromData:[[123,"One Hundred Twenty Three"],
["1", "One"], ["2", "Two"], ["3", "Three"], ["4", "Four"], ["5", "Five"],
["6", "Six"], ["7", "Seven"], ["8", "Eight"], ["9", "Nine"]],
toData:[["10", "Ten"]],
msWidth:250,
msHeight:200,
valueField:"code",
displayField:"desc",
imagePath:"./js/ext/MultiSelect",
switchToFrom:false,
toLegend:"Seleccion",
fromLegend:"Disponibles",
toTBar:[{
text:"Clear",
handler:function(){
var i=panelVariables.getForm().findField("itemselector");
i.reset.call(i);
}
}]
}]
});
panelVariables = new Ext.form.FormPanel({
//allowBlank : false,
//collapsible : true,
//headerAsText : true,
//renderTo : 'panel',
autoHeight : true,
layout : 'form',
frame:true,
bodyStyle : 'padding:0px 0px',
//labelAlign : 'left',
items : [fieldSeleccion]
});
panelVariables.render('panelVariables');
Thank you for this great widget.
I noticed that in the last (v0.4.1) version one can use the 'click then SHIFT+click' method to visually multiselect more items simultaneously, which is so useful I think, but the internal array of selected values doesn't changes properly: it acts like without SHIFT. Any comments on this?
Thanks again, cocinerox
Again really nice work, i think its worth getting the actual Ext.ux.Select namespace!
@pozirk - I cannot reproduce your weird behavior in Firefox2 or IE7, by accessing your testcase. Are you using another browser? I'm open for discussion - please provide a specific step1, step2, etc. in order to reproduce the weird situation.
@diehard_mib - well, in 0.4 there is actually a check on clearValue and reset (if this.view then this.view.clearSelections
@apaa - yes, there is a minChars config property, as it inherits that from Ext.form.ComboBox - please bare in mind that it is 0 if the store is local, as it is described in the ComboBox help page
I will soon update to 0.4.1 with a small fix, and also upgrade the live demo
When chars
but i've a problem with this like in IE7... see the screenshots for a example...
i dont know why it is like working wrong :(
can anybody helpme please?? thx u
my code is the follow:
new Ext.ux.Andrie.Select({
fieldLabel:'Grupos de destino',
typeAhead: true,
editable:false,
triggerAction: 'all',
forceSelection:true,
name:'g_ids',
displayField:'g_name',
valueField:'g_id',
emptyText:'Seleccione el grupo de destino',
hiddenName:'g_ids',
store: new Ext.data.JsonStore({
url: 'resources/backend/grupos.php?do=grid',
root: 'rows',
fields: ['g_id', 'g_name']
}),
lazyRender:true,
multiSelect:true,
minLength:1
})
First of all, thanks for this excellent widget. For me, it was one of the last missing widgets (well, so far) for ext.
A minor issue though: I'd like to have it resized as my window / form are resized. I'm not sure if this is already included and I'm not configuring it right, or it just isn't implemented yet. Could you shine a light on this?
TIA
Ronald
var formPanel = new Ext.form.FormPanel({
autoWidth: true,
//autoHeight: true,
layout: 'anchor',
bodyStyle: 'padding:5px 5px 5px;',
defaultType: 'textfield',
items: [{
//autoWidth: true,
//autoHeight: true,
anchor: '100% 100%',
xtype: "itemselector",
name: "itemselector",
dataFields: ["id", "name"],
fromData: [[123, "One Hundred Twenty Three"], ["1", "One"], ["2", "Two"], ["3", "Three"], ["4", "Four"], ["5", "Five"], ["6", "Six"], ["7", "Seven"], ["8", "Eight"], ["9", "Nine"]],
toData: [["10", "Ten"]],
msWidth: 250,
msHeight: 250,
valueField: "id",
displayField: "name",
imagePath:'/DT/Ext/2.0/resources/css/multiselect/',
isFormField: false,
//switchToFrom:true,
toLegend: "Selected groups",
fromLegend: "Available groups",
toTBar: [{
text: "Clear",
handler: function(){
var i = formPanel.getForm().findField("itemselector");
i.reset.call(i);
}
}]
}]
});
this.win = new Ext.Window({
title: 'Example',
width: 600,
height: 450,
shim: false,
animCollapse: false,
constrainHeader: true,
minimizable: true,
maximizable: true,
layout: 'fit',
items: formPanel
});
The problem must be with a different piece of your code. Attached is a mini project that uses the snippet you posted. No problem there.
Joshua
Thanks for sharing this class; It is well suited for use in conjunction with your pPageSize plug-in. However, it was producing errors for me, so I fixed it and am sharing it with you~ Andrie- hopefully you don't mind too much that I've versioned it as 0.4.2.
Keep up the nice work!
Best Regards,
Jay
file: Select.js
/**
*
* @author Andrei Neculau
* http://andreineculau.wordpress.com
*
* @class Ext.ux.Andrie.Select
* A combobox control with support for multiSelect.
*
* @extends Ext.form.ComboBox
*
* @constructor
* Create a new Select.
*
* @param {Object} config Configuration options
*
* @version 0.4.2
*
*/
/**
*
* @author Jay Taylor
* Veracity Communications
*
* @date 2007-11-29
*
* @note changed line 546, v.split(...) to String(v).split(...) because if/when
* v is an integer (or anything but a string), there may not be a split
* method availabe.
*
*/
Ext.apply(Ext.DataView.prototype, {
deselect:function(node, suppressEvent){
if(this.isSelected(node)){
var node = this.getNode(node);
this.selected.removeElement(node);
if(this.last == node.viewIndex){
this.last = false;
}
Ext.fly(node).removeClass(this.selectedClass);
if(!suppressEvent){
this.fireEvent('selectionchange', this, this.selected.elements);
}
}
}
});
Ext.namespace('Ext.ux.Andrie');
Ext.ux.Andrie.Select = function(config){
if (config.transform && typeof config.multiSelect == 'undefined'){
var o = Ext.getDom(config.transform);
config.multiSelect = (Ext.isIE ? o.getAttributeNode('multiple').specified : o.hasAttribute('multiple'));
}
config.hideTrigger2 = config.hideTrigger2config.hideTrigger;
Ext.ux.Andrie.Select.superclass.constructor.call(t his, config);
}
Ext.extend(Ext.ux.Andrie.Select, Ext.form.ComboBox, {
/**
* @cfg {Boolean} multiSelect Multiple selection is allowed (defaults to false)
*/
multiSelect:false,
/**
* @cfg {Integer} minLength Minimum number of required items to be selected
*/
minLength:0,
/**
* @cfg {String} minLengthText Validation message displayed when minLength is not met.
*/
minLengthText:'Minimum {0} items required',
/**
* @cfg {Integer} maxLength Maximum number of allowed items to be selected
*/
maxLength:Number.MAX_VALUE,
/**
* @cfg {String} maxLengthText Validation message displayed when maxLength is not met.
*/
maxLengthText:'Maximum {0} items allowed',
/**
* @cfg {Boolean} clearTrigger Show the clear button (defaults to true)
*/
clearTrigger:true,
/**
* @cfg {Boolean} history Add selected value to the top of the list (defaults to false)
*/
history:false,
/**
* @cfg {Integer} historyMaxLength Number of entered values to remember. 0 means remember all (defaults to 0)
*/
historyMaxLength:0,
/**
* @cfg {String} separator Separator to use for the values passed to setValue (defaults to comma)
*/
separator:',',
/**
* @cfg {String} displaySeparator Separator to use for displaying the values (defaults to comma)
*/
displaySeparator:',',
// private
valueArray:,
// private
rawValueArray:,
initComponent:function(){
//from twintrigger
this.triggerConfig = {
tag:'span', cls:'x-form-twin-triggers', cn:[
{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger1Class},
{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger2Class}
]
};
Ext.ux.Andrie.Select.superclass.initComponent.call (this);
if (this.multiSelect){
this.typeAhead = false;
this.editable = false;
//this.lastQuery = this.allQuery;
this.triggerAction = 'all';
this.selectOnFocus = false;
}
if (this.history){
this.forceSelection = false;
}
if (this.value){
this.setValue(this.value);
}
},
hideTrigger1:true,
getTrigger:Ext.form.TwinTriggerField.prototype.get Trigger,
initTrigger:Ext.form.TwinTriggerField.prototype.in itTrigger,
trigger1Class:'x-form-clear-trigger',
trigger2Class:'x-form-arrow-trigger',
onTrigger2Click:function(){
this.onTriggerClick();
},
onTrigger1Click:function(){
this.clearValue();
},
initList:function(){
if(!this.list){
var cls = 'x-combo-list';
this.list = new Ext.Layer({
shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
});
var lw = this.listWidth Math.max(this.wrap.getWidth(), this.minListWidth);
this.list.setWidth(lw);
this.list.swallowEvent('mousewheel');
this.assetHeight = 0;
if(this.title){
this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
this.assetHeight += this.header.getHeight();
}
this.innerList = this.list.createChild({cls:cls+'-inner'});
this.innerList.on('mouseover', this.onViewOver, this);
this.innerList.on('mousemove', this.onViewMove, this);
this.innerList.setWidth(lw - this.list.getFrameWidth('lr'))
if(this.pageSize){
this.footer = this.list.createChild({cls:cls+'-ft'});
this.pageTb = new Ext.PagingToolbar({
store:this.store,
pageSize: this.pageSize,
renderTo:this.footer
});
this.assetHeight += this.footer.getHeight();
}
if(!this.tpl){
this.tpl = '
Only it(he,she) shows a row in the element, though it(he,she) contains all the information. I cannot enlarge the size of the component
CODE:
fieldSeleccion = new Ext.form.FieldSet({
title : 'Variables Disponibles',
collapsible : true,
autoHeight : true,
//anchor : '95%',
allowBlank : false,
width : 735,
labelAlign: 'left',
hideBorders : false,
buttonAlign : 'center',
layout : 'form',
items:[{
bodyStyle : 'padding:0px 0px;',
border : false,
hideLabel : 'true',
xtype:"itemselector",
name:"itemselector",
bodyStyle : 'margin:20px;',
width : 700,
height : 400,
dataFields:["code", "desc"],
fromData:[[123,"One Hundred Twenty Three"],
["1", "One"], ["2", "Two"], ["3", "Three"], ["4", "Four"], ["5", "Five"],
["6", "Six"], ["7", "Seven"], ["8", "Eight"], ["9", "Nine"]],
toData:[["10", "Ten"]],
msWidth:250,
msHeight:200,
valueField:"code",
displayField:"desc",
imagePath:"./js/ext/MultiSelect",
switchToFrom:false,
toLegend:"Seleccion",
fromLegend:"Disponibles",
toTBar:[{
text:"Clear",
handler:function(){
var i=panelVariables.getForm().findField("itemselector");
i.reset.call(i);
}
}]
}]
});
//......................
panelVariables = new Ext.form.FormPanel({
//allowBlank : false,
//collapsible : true,
//headerAsText : true,
//renderTo : 'panel',
autoHeight : true,
layout : 'form',
frame:true,
bodyStyle : 'padding:0px 0px',
//labelAlign : 'left',
items : [fieldSeleccion]
});
panelVariables.render('panelVariables');
//.......................
I documented the changes I made in a comment at the top of the file, but I can see how it would be easy to gloss over. Here is my note, explicitly:
* @note changed line 484, v.split(...) to String(v).split(...) because if/when
* v is an integer (or anything but a string), there may not be a split
* method availabe.
I did have the wrong line number, so thank you for bringing this my attention.
Hopefully this clarifies the situation for you.
Regards,
Jay
#If you have any other info about this subject , Please add it free.# |