PDA

View Full Version : Ext.ux.form.CheckboxCombo



cnelissen
4 Mar 2010, 3:38 PM
This is very similar to Saki's LovCombo extension (http://www.extjs.com/forum/showthread.php?t=32692), however it extends TriggerField rather than ComboBox and uses a CheckboxGroup internally rather than templates.

Features Include:

Supports mostly all the same config options as a regular combobox
Works fine as a grid editor
Supports keyboard navigation
Tested in Chrome, FF, and IE8


getValue() will return data like 'value,value,value', and you can use setValue() similarly, ie. checkboxCombo.setValue('value,value,value');

As always, feedback is appreciated. Have fun with it!

Download is available at: http://code.google.com/p/extuxcheckboxcombo/

* UPDATE 12/30/2010 *
Minor bug fixes
Added template support to more closely mimic a regular combobox
Added support for a 'change' event which bubbles the change event from the CheckboxGroup
Incorporated changes submitted by @mitchellsimoens (Thanks Mitchell!)

* UPDATE 5/6/2010 *
Some minor speed enhancements
Moved code over to Google code

* UPDATE 4/22/2010 *
Fixed a couple bugs, corrected issues with maxHeight, and triggerAction = 'all'
Also now includes minified versions of the js and css files

fargs
6 Mar 2010, 2:36 PM
Thanks for the control but I am having the same issue as with Saki's when using it in a grid editor.

Firstly, I had to make the following changes to get the renderer working:


Ext.each(value, function(v) {
if (this.editor.field.valueField){
var r = this.editor.field.findRecord(this.editor.field.valueField, v);
if (r) {
text.push(r.data[this.editor.field.displayField]);
}
}
}, this);Also, when I edit a field and check items then lose focus on the cell to edit another cell, the list is selected with the previous items. I believe this may have to do with each cell hooked into the same store but I'm not sure. I will dig a little further but I was just wondering if you have run into this issue when using the control in a grid.

Thanks,

fargs
7 Mar 2010, 3:59 PM
Anyone that has tried to use a multiselect list in a grid editor might have run into the same problem I have:

Problem
The checked boxes were not updated for each field. The were only set on addCheckColumns which was not called everytime the editor was activated.

Solution:
Separate the creation of the checkbox list and the setting of the checkbox values. I added this function:


setCheckboxValues: function(vals){
if (typeof vals == 'string') {
vals = vals.split(',');
}

for (var i=0; i < this.cbgroup.columns; i++){
if (this.cbgroup.panel.getComponent(i).items.length > 0){
this.cbgroup.panel.getComponent(i).items.each(function(cb) {
cb.setValue(false);
});
}
}

Ext.each(vals, function(v) {
if (this.valueField){
for (var i=0; i < this.cbgroup.columns; i++){
if (this.cbgroup.panel.getComponent(i).items.length > 0){
this.cbgroup.panel.getComponent(i).items.each(function(cb) {
if (v == cb.inputValue)
cb.setValue(true);
});
}
}
}
}, this);
},And I added an onFocus event handler to this:


onFocus: function(){
Ext.ux.form.CheckboxCombo.superclass.onFocus.apply(this, arguments);
this.setCheckboxValues(this.getValue());
},Thanks,

spiderman123
10 Mar 2010, 1:19 AM
hi,

can you show me how i can add it into editor grid?

thx

cnelissen
10 Mar 2010, 8:14 AM
Something like this should work:



var cm = new Ext.grid.ColumnModel({
defaults: {
sortable: true
},
columns: [{
header: 'Checkboxes',
dataIndex: 'checkboxes',
renderer: function(value) {
return this.editor.field.gridRenderer(value);
},
editor: new Ext.ux.form.CheckboxCombo({
store: new Ext.data.ArrayStore({
fields: ['value', 'label'],
data: [
['value1', 'Text 1'],
['value2', 'Text 2'],
['value3', 'Text 3'],
['value4', 'Text 4']
]
}),
valueField: 'value',
displayField: 'label',
allowBlank: true
})
}]
});

vikbht
16 Mar 2010, 9:33 AM
Excellent stuff! just what the doctor ordered

moegal
16 Mar 2010, 2:40 PM
this is very nice. Is there any way I can limit the number of selections? I want the user to only select 3.

Thanks, Marty

xidianamoi
16 Mar 2010, 11:41 PM
a great extension

Mark
22 Mar 2010, 4:47 AM
Hi Clint,
would you be so kind and post an example with a remote store,please?
I'd tried quite hard to get it, but with no success!
Here is my testcase:


var F1 = {
xtype: 'form',
id: 'form_add_address_diverse',
bodyStyle: 'padding:15px;background:transparent',
border: false,
url: '/func/ext/save_new_diverse.php',
labelWidth: 60,
items:[

{xtype: 'textfield',
anchor: '100%',
labelStyle: 'color:#999999;padding:0',
fieldLabel: 'Firma',
name: 'NAME',
allowBlank: false
},
{xtype: 'textarea',

labelStyle: 'color:#999999;padding:0,margin:0',
fieldLabel: 'Adresse',

anchor: '100%',
name: 'ADDRESS',
allowBlank: true
}, {
xtype: 'checkboxcombo',
width: 150,
mode: 'remote',
store: new Ext.data.Store(
{
proxy: new Ext.data.HttpProxy(
{
url: 'func/ext/getCombos_openitems.php?TYPE=CUSTOMER&ADDRESSID=70126',
autoLoad: true,
method: 'GET'

}
),
reader: new Ext.data.JsonReader(
{
root: 'data',
totalProperty: 'total'
},
[
{
name: 'V_FIELD'
},
{
name: 'D_FIELD'
}
]
)
}
),

valueField: 'V_FIELD',
displayField: 'D_FIELD',
allowBlank: true
}
],
buttonAlign: 'center',
buttons:[
{
text: 'Speichern',
handler: function() {
var f = Ext.getCmp('form_add_address_diverse');
f.getForm().submit();
win.close();
}
},
{
text: 'Abbrechen',
handler: function() {
win.close();
}
}
]
}

win = new Ext.Window(
{
title: 'Combotest',

layout: 'form',
id: 'win',
width: 340,
height: 260,
closeAction: 'close',

items:[F1]
}
);
win.show();

}
);

What am I missing??
Thanks in advance!

Mark

cnelissen
22 Mar 2010, 7:39 AM
Try this, it works fine for me:



{
xtype: 'checkboxcombo',
hiddenName: 'field_name',
fieldLabel: 'Field Label',
store: new Ext.data.JsonStore({
fields: ['value', 'label'],
url: 'func/ext/getCombos_openitems.php?TYPE=CUSTOMER&ADDRESSID=70126',
method: 'GET',
autoLoad: true
}),
valueField: 'value',
displayField: 'label',
allowBlank: true
}

moegal
23 Mar 2010, 1:59 AM
I am getting an error on the store if I use the extension without renderTo. I get the error when I close a form. Line 662

I changed this section to the following:



addCheckboxes: function() {
// Add new checkboxes from store
if(this.store){ Ext.each(this.store.data.items, function(rec) {
var checkbox = new Ext.form.Checkbox({name: rec.data.id + '-checkbox', boxLabel: rec.data[this.displayField], inputValue: rec.data[this.valueField], checked: (rec.checked ? rec.checked : false)});
var col = this.cbgroup.panel.items.get(0);
this.cbgroup.items.add(checkbox);
col.add(checkbox);
this.cbgroup.panel.doLayout();
}, this);
}
},


It fixes the problem, not sure if is the best thing to do though.

Marty

moegal
23 Mar 2010, 4:17 AM
also, is there away to handle longer lists, seems to just keep going, longer lists run right off the page.

Thanks, Marty

cnelissen
23 Mar 2010, 8:16 AM
I am getting an error on the store if I use the extension without renderTo. I get the error when I close a form. Line 662

I posted an updated zip file, this problem should be fixed, though slightly different than your fix.

cnelissen
23 Mar 2010, 8:19 AM
also, is there away to handle longer lists, seems to just keep going, longer lists run right off the page.

I will look into this.

moegal
23 Mar 2010, 9:13 AM
Clint,
Thanks! I will check it out.
Marty

Mark
23 Mar 2010, 3:24 PM
Hi Clint, You pointed me to "my" problem! I cleared up the json response and voila ... it works! :D
thank you so much !

Mark

dudecool
20 Apr 2010, 9:33 PM
Hi, How can we have a "Select All" option?

lakilevi
22 Apr 2010, 2:06 AM
Thanks for this super plugin.
But is the maxHeight working for you? For me not... It loads the whole list, with all 100 entries...
Do you have any idea how to correct this? I am using Ext 3.1.1

Thank you very much

cnelissen
22 Apr 2010, 8:05 AM
Thanks for this super plugin.
But is the maxHeight working for you? For me not... It loads the whole list, with all 100 entries...
Do you have any idea how to correct this? I am using Ext 3.1.1

Thank you very much

Please redownload the attachment from the first post, I have posted an updated file which corrects this issue. I have also included minified versions of the files.

Sesshomurai
22 Apr 2010, 1:53 PM
This might be a dumb question, but how do I add a callback to a selection event so I can respond to checks and unchecks as the happen?

lakilevi
22 Apr 2010, 9:36 PM
thank you very much

cnelissen
23 Apr 2010, 12:03 PM
This might be a dumb question, but how do I add a callback to a selection event so I can respond to checks and unchecks as the happen?

This is currently not supported. I'll have to add some event listeners on the checkbox group and bubble them up to the triggerfield. I'll try to include this in the next release.

Sesshomurai
23 Apr 2010, 12:46 PM
Clint,
Thanks a lot. Really appreciate it and this is a much needed component that is simple and well done!
Is there another event I can use to callback from after all the selections have been made and the combo departed? I couldn't see how to do this from the code. I'm trying to avoid using an outside event (like a button) to respond to new selections.

Abhinandan
28 Apr 2010, 5:23 AM
Hi C. Nelissen,

First of all, thanks for this wonderful plugin. I am using this plugin in the editable grid as cell editor. Everything seems to be working for me once I use the code provided by Fargs if the store is loaded only once. But I am facing a small issue if I am trying to reload the store.
I have a grid with two columns, 2nd column editor list is the checkboxcombo and it depends on the 1st column value. So I am using the getCellEditor to get the first column value and reloading the list. This is giving me one interesting problem, the previous list is also appending to the new list value and the checkboxes are also not checked. Can you suggest me how to fix this.

cnelissen
28 Apr 2010, 7:32 AM
Try adding triggerAction: 'all' to the config. This will force a reload of the data every time the trigger is clicked.

Abhinandan
28 Apr 2010, 9:53 PM
Clint,
I tried your suggestion but it is not working. The store is coming fine but the checkboxcombo list is still retaining the old store items.:(

cnelissen
29 Apr 2010, 7:09 AM
Clint,
I tried your suggestion but it is not working. The store is coming fine but the checkboxcombo list is still retaining the old store items.:(

Hmm, maybe post some code so we can see it... I have a similar setup and it works fine for me, here is what I use in my grid configuration:



{
header: 'Plans',
dataIndex: 'plans',
renderer: function(value) {
return this.editor.field.gridRenderer(value);
},
editor: new Ext.ux.form.CheckboxCombo({
store: new Ext.data.JsonStore({
fields: ['value', 'label'],
url: '/api/plans.php',
method: 'POST',
baseParams: {'id': id},
autoLoad: true
}),
valueField: 'value',
displayField: 'label',
triggerAction: 'all',
allowBlank: true
})
}

Abhinandan
29 Apr 2010, 8:42 AM
Clint,
Because of my company restriction,I can't post exact code.
Still I am posting some sample to give you the hint about my problem.

var store = new Ext.data.JsonStore({
fields: ['value', 'label'],
url: '/api/plans.php',
method: 'POST',
autoLoad: true
});

var colModel = new Ext.grid.ColumnModel({
columns: [
{header: 'Name', dataIndex: 'name', sortable: true, editor: new Ext.form.TextField({})},
{header: 'Type', dataIndex: 'type', sortable: true, renderer: typeRenderer, editor: typeEditor},
{header: 'Value', dataIndex: 'value', sortable: true, editable: true}
],
editors: {
'text': new Ext.grid.GridEditor(new Ext.form.TextField({})),
'number': new Ext.grid.GridEditor(new Ext.form.NumberField({})),
'checkboxcombo': new Ext.ux.form.CheckboxCombo({
store:store ,
valueField: 'value',
displayField: 'label',
triggerAction: 'all',
allowBlank: true
}),
'date': new Ext.grid.GridEditor(new Ext.form.DateField({}))
},
getCellEditor: function(colIndex, rowIndex) {
var field = this.getDataIndex(colIndex);
if (field == 'value') {
return this.editors['text'];
} else {
store.reload(some parameter);
return this.editors['checkboxcombo'];
}
}
});

harel
5 May 2010, 12:49 AM
Hi,
I am trying this component vs saki's one. Because of problems of saki's one with a grid, I'd like to use your component, but the main problem for me is in performance: in CheckboxCombo rendering long lists takes a good while. I have a combo box of all countries (fairly standard list) and although the data is fetched quickly (JSONStore), the combo takes a good few seconds before its fully rendered with the options. As well, the combo insists on calling the store's load every time and refetching the data from the server, while saki's one does not do that with the same store/combo configuration.
Is it a problem with the component or something I'm doing wrong?



countriesEditor: new Ext.ux.form.CheckboxCombo({
id:'countryCBCombo',
width:300,
hideOnSelect:false,
lazyInit:false,
maxHeight:200,
store: EditorStores.countriesStore,
triggerAction:'all',
valueField:'id',
displayField:'name',
typeAhead:false
}),

and the store:

countriesStore: new Ext.data.JsonStore({
url: URL.staticCountries,
storeId: 'countriesStore',
root: 'items',
idProperty:'id',
autoLoad:true,
fields:[
{name:'id', type:'int'},
{name:'name', type:'string'},
{name:'code', type:'string'}
] }),

cnelissen
5 May 2010, 8:42 AM
To be honest I haven't really done much performance testing, as I don't really use this component with very long lists. I'll do a little bit of digging and see what I can find out...

As for the reloading of the store, this is because you set triggerAction:'all'. The behavior is slightly different than a regular combo box, since we aren't really filtering the results as the regular combo box does. Try removing that config and it should work fine.

harel
5 May 2010, 2:52 PM
Clint, the list I've used to trigger the performance issue is not *that* long - its a country list with 98 items. Its using a JsonStore with each record made up of 3 columns; id, name and code.

cnelissen
6 May 2010, 8:11 AM
Clint, the list I've used to trigger the performance issue is not *that* long - its a country list with 98 items. Its using a JsonStore with each record made up of 3 columns; id, name and code.

I made some changes to the addCheckboxes method that should help with rendering performance. I had the doLayout call inside of the loop so it was being called more than necessary. Please redownload and see if this corrects your issue.

harel
6 May 2010, 10:39 AM
Thanks Clint, works a treat now.
Any change to make use of the typeAhead feature to filter the list? ;o)

leewei
6 May 2010, 12:59 PM
Clint,

I tried just about all the different multi-select combobox that I can find, and this fits my need nicely.
The component is simple, clean and easy to use, thank you.

I am not able to set the font size of the list content via x-checkboxcombo-list in Ext.ux.form.CheckboxCombo.css.
Can someone guide me? Thanks.

Lee Wei

cnelissen
6 May 2010, 1:12 PM
I am not able to set the font size of the list content via x-checkboxcombo-list in Ext.ux.form.CheckboxCombo.css

You should actually apply the styles to ".x-checkboxcombo-list-inner .x-form-item". I fixed the css in the download to reflect this as well.

leewei
6 May 2010, 1:26 PM
How do you guys handle content that is too wide?
When I use the ComboBox previously, I set "resizable: true".
Or I might use tooltip to show the list value.

However, both are not options for CheckboxCombo. Any ideas?

Thanks.

leewei
6 May 2010, 1:30 PM
Clint,

On setting the font using ".x-checkboxcombo-list-inner .x-form-item", it is working perfectly, thank you.

harel
6 May 2010, 2:54 PM
Clint,
A (pretty big) problem I'm just noticing, is that in a grid, if I select a few items in one drop down (for example 3 countries), and then open the combo on another row, the first combo's selection is pre selected...
Harel

harel
6 May 2010, 5:18 PM
Clint, the plot thickens:
it seems that the call in setValue:
var r = this.findRecord(this.valueField, v);
will match records whose value is, for example, 30 when you're actually after '3' if the value for 30 appears before the one for 3.
This seems to be because the store.find method returns a value which 'starts' with the search value, and if 30 appears before 3, it will be returned...

gevik
8 May 2010, 11:09 AM
This is a cool extension,
Thanx :)

Shn
2 Jun 2010, 6:38 AM
Hi,

I'll probably be using your extension in basic forms. I was wondering it there's a reason why you don't use the default combo classes "x-combo-list", "x-combo-list-inner", "x-combo-selected". As I use the gray theme, I noticed that by using those classes along with "x-checkboxcombo-list" and "x-checkboxcombo-list-inner" and getting rid of all the colored stuff in the css file, it looked like a normal extjs combo.

I might be creating selectAll() and selectNone() methods for it as well, but my knowledge of ExtJS isn't that great, so I'm not sure if it's a good idea that I share my perhaps-crappy code :)

Oh and is there a reason why we should use your extension instead of Saki's LOVCombo ? I know they work differently, as stated in your first post, but I'm still wondering if I should use yours or his...

fulfowi
3 Jun 2010, 6:45 AM
Try adding triggerAction: 'all' to the config. This will force a reload of the data every time the trigger is clicked.

Clint,

I have a similar problem to Abhinandan's. However, I don't change the store, I just change the value of one checkboxcombo and set the same value for another checkboxcombo. I get variable behavior. Sometimes the value changes in the second combo and sometimes it doesn't. Sometimes the original values in the second combo remain checked and the new values are become checked. This happens whether or not the checkcombobox is a grid editor. I tried a clearValue() before the setValue(), but that didn't do anything. I tried your triggerAction suggestion, and I got a:


this.proxy is undefined

in FireBug. Also, I'm using the on 'collapse' event for the first combo to change the value for the second. Is this correct? I'd send a code snippet, but the code is on a classified machine which complicates matters. However, I can try to put something together if necessary.

fulfowi
7 Jun 2010, 7:59 AM
Clint,

I have a similar problem to Abhinandan's. ....

Tried fargs solution in post #3 (separate setting of value and check values) and it fixed my problem. Will this be included in future releases?

fulfowi
7 Jun 2010, 8:29 AM
This is currently not supported. I'll have to add some event listeners on the checkbox group and bubble them up to the triggerfield. I'll try to include this in the next release.

Clint,

When do you think this capability will be out? I want to implement All and None checkboxes, which will uncheck all other check boxes.

BTW - I'm with the consensus. This is a very useful extension.

Thanks,

cnelissen
7 Jun 2010, 2:35 PM
When do you think this capability will be out?

I've been out of the office on business so I haven't had much time to devote to this, but I should have some time during the week. I'll make the necessary changes as soon as possible.

FabriceTerrasson
10 Jun 2010, 6:45 AM
Hi thank you for this plugin

tried(without success) a un|check all toggle into a tbar like :


,{ text : '[un]check all.', tooltip: 'Toggle [un]check all',
enableToggle: true,
toggleHandler: function(btn, pressed) {
var combocbgroup= Ext.getCmp('tlds_update_id').cbgroup;
combocbgroup.items.each(function(cb){
if (pressed) {
cb.wrap.addClass('x-form-check-checked');
} else {
cb.wrap.removeClass('x-form-check-checked');
}
cb.wrap.repaint();
cb.checked= pressed;
});
}


Any clue ?

cnelissen
10 Jun 2010, 7:10 AM
Something like this would probably work better:


,{ text : '[un]check all.', tooltip: 'Toggle [un]check all',
enableToggle: true,
toggleHandler: function(btn, pressed) {
var combocbgroup= Ext.getCmp('tlds_update_id').cbgroup;
combocbgroup.items.each(function(cb){
// Set the checkbox to false by default
cb.setValue(false);

// Then set the new state of the checkbox
cb.setValue(pressed);
});
}

Shn
11 Jun 2010, 2:14 AM
Hi,

As I'm planning on using some (un)selectAll() methods, I was wondering if it's normal that I don't have access to "cbgroup" until I click on the trigger and display the combo's content. I use a jsonstore with an url and autoLoad:true and I actually need to check all the checkboxes after the store is loaded...

So, if you have any idea how to do that, it'd help alot :D

cnelissen
11 Jun 2010, 7:49 AM
When the checkboxes are added to the cbgroup, they are looking for a 'checked' property on the record from the store to set their initial value. If you wanted them all checked by default, you could just loop through all your store records, and set checked = true. Something like:



yourJsonStore.on('load', function(store) {
Ext.each(store.data.items, function(rec) {
store.getAt(rec.id).checked = true;
});
});


* Not tested

mrusinak
22 Jun 2010, 2:48 PM
Hello, nice extension! A functionality I desired was for the display area to update as selected items changed, and not just when collapsed. If anyone else is interested, my quick little change is:

...
// private
onListClick: function(e, t) {
if (Ext.get(e.getTarget()).dom.tagName != 'INPUT' && Ext.get(e.getTarget()).dom.tagName != 'LABEL') {
var target = e.getTarget('div.x-form-item');
if (target) {
target = Ext.get(target);
var cb = target.child('input');
cb = Ext.getCmp(cb.id);
cb.setValue(cb.getValue() ? false : true);

}
}
if (this.updateOnChange) {
this.assertValue();
}
},

// private
onListEnter: function(e, t) {
var target = Ext.DomQuery.selectNode('.x-checkboxcombo-item-over', this.list.dom);
if (target) {
target = Ext.get(target);
var cb = target.child('input');
cb = Ext.getCmp(cb.id);
cb.setValue(cb.getValue() ? false : true);

if (this.updateOnChange) {
this.assertValue();
}
}
},
...Which just adds the assertValue() call after using the Enter key or the mouse to check/uncheck an item, if you set "updateOnChange" to a truthy value in configuration.

Sesshomurai
3 Jul 2010, 3:14 PM
Has anyone added the loading animation to this combo? I use a remote store and for the 2 seconds it is loading, it would be nice to see a similar loading icon. Currently, nothing is shown while the store loads.

Any tips or updates appreciated!!

semiaddict
9 Jul 2010, 2:58 AM
Hi,
I'm getting the following error "this.proxy is undefined" with the following config:

"xtype": "checkboxcombo",
"tooltip": {
"tip": " Hold down \"Control\", or \"Command\" on a Mac, to select more than one."
},
"hiddenName": "onUseActions",
"valueField": "id",
"mode": "local",
"triggerAction": "all",
"displayField": "display",
"store": [
[
1,
"nop (function: Nop)"
],
[
2,
"reward (function: Reward)"
],
[
3,
"shoot (function: Shoot)"
]
]

Any idea why? I thought that proxy is only needed for remote stores.

raghu.gitam
29 Jul 2010, 1:40 AM
Hi All,

Could any help me with the problem of allign ment of the items in the drop down. i am using a width of 300 and i am getting the checkboxes in the middle please help me

Thanks a million in advance

teaganrichat
31 Jul 2010, 12:41 PM
Ran into an issue that I think a previous poster (harel?) had :

If the store is not sorted by the ID (valueField) then the CheckboxCombo.findRecord() method would sometimes return the wrong record. This obviously resulted in some of the wrong checkboxes being checked.

solution: Change the findRecord method to use store.findExact instead of store.find



findRecord: function(prop, value){
var record;
if (this.store.getCount() > 0) {
record = this.store.getAt(this.store.findExact(prop, value));
return (record ? record : false);
}
}


--
Tim

amanind
26 Aug 2010, 8:13 AM
Hi

I am getting this.proxy is null or not an object error.
Can anyone explain me how to fix this error?
I am using ext 3.1

Thanks in advance

Shn
30 Aug 2010, 2:21 AM
Hi,

Here's my first try for the methods to select/unselect all checkboxes, whether the cbgroup is defined or not :



/**
* Sets all checkboxes as checked/unchecked, according to the checked parameter
* @param {bool} checked
* @return {Ext.form.Field} this
*/
toggleAll: function(checked) {
var vals = [];

Ext.each(this.store.data.items, function(rec) {
this.store.getById(rec.id).checked = checked;
if(checked) {
vals.push(rec.id);
}
});

if(this.cbgroup != undefined) {
this.removeCheckboxes();
this.addCheckboxes();
this.assertValue();
} else {
this.setValue(vals);
}
},

/**
* Sets all checkboxes as checked
* @return {Ext.form.Field} this
*/
selectAll: function() {
return this.toggleAll(true);
},

/**
*
* @return {Ext.form.Field} this
*/
selectNone: function() {
return this.toggleAll(false);
},


I'm sure it's neither perfect nor really optimized so I'm open to criticism and any help any of you might want to share...

--
Shn

davion
3 Sep 2010, 6:16 AM
To amanind and semiaddict from previous posts:
if you still have problems with error: "this.proxy is undefined" or "this.proxy is null or not an object" error.
and if you don't need CheckboxCombo to be reloaded after init, then just remove this from config:

"triggerAction": "all",
thus on trigger action CheckboxCombo will not try to reload data from store, and will not cause this error

Shn
21 Sep 2010, 6:24 AM
Hi,

I've tried using "anchor: '-20'" config option in my checkboxcombo, which is inside a container with "layout: 'form'".

It doesn't seem to work, so for now I need to use a specific width for it to be resized.

Does anyone have a solution for this ? I'll do some debugging and edit this post if I find one myself.

Thanks !


Edit : Ok, nevermind, anchoring works when the checkboxcombo contains values. I was testing with empty stores. However, I've decided to allow this situation, I therefore modified setValue() so that it begins this way :


setValue: function(vals) {
if (typeof vals == 'string') {
vals = vals.split(',');
}
if (vals === null) {
vals = [];
}

var text = [];

d1rty
23 Sep 2010, 1:41 PM
I'm adding a new record to the store but its not showing up in the combo. I can see that the record has been added to the store if i inspect it in firbug.



categoryPicker_record = Ext.data.Record.create([ {
name:'ALIAS',
mapping:'ALIAS'
}
,{
name:'ID',
mapping:'ID'
}
,{
name:'TITLE',
mapping:'TITLE'
}

]);

categoryPicker = new Ext.ux.form.CheckboxCombo({
fieldLabel: 'Categories'
,hiddenName: 'POST.CATEGORYIDLIST'
,value: 'edf48d32c70411dfb82fea3f7babe98d'
,triggerAction: 'all'
,mode: 'local'
,listEmptyText: 'Select Categories'
,width: 673
,forceSelection: true
,store: new Ext.data.Store({
proxy: new Ext.data.MemoryProxy({"COLUMNS":["ALIAS","TITLE","ID"],"DATA":[["javascript","Javascript","edf48d32c70411dfb82fea3f7babe98d"]]})
,storeId: 'mg-post.CategoryIDList-store'
,reader: new Ext.data.CFQueryReader({id: 'ID'}, categoryPicker_record )
})
,valueField: 'ID'
,displayField: 'TITLE'
});
categoryPicker.store.load();



To add the record i'm doing the following in a forms success handler



var cat = action.result.category;
var rec = new categoryPicker_record(cat, cat.ID);
categoryPicker.getStore().add(rec);


Any suggestions what i've missed here.. ?

many thanks for any advice, Chris

davion
24 Sep 2010, 4:52 AM
What about categoryPicker.updateLayout(); ? did you tried it?

mitchellsimoens
15 Dec 2010, 7:06 AM
I like this extension and may have some use for it :-) I tried Saki's but his example page, although looking the same as his site (which is nice), seems to have ads and digg and paypal which to me is just spam. I understand it but that doesn't mean I have to like it. I started removing the stuff and found out that it wasn't saving the checks so I just plain gave up on even looking why it was doing this.

Anyway, I will make a couple suggestions... On your example.html page, I would just put a simple button under the combo to get the values and popup an MsgBox to show the values just so people can just run the example and hit the button to see how it works. Also, your urls for the class files (Ext.ux.form.CheckboxCombo.min.js & Ext.ux.form.CheckboxCombo.min.css) are wrong. Another thing the user who is trying to quickly test it will have to fix. The ExtJS url fixing is to be expected but not the class files. I do like that you have the files minified though, that's nice to just pop into an app and go.

mitchellsimoens
23 Dec 2010, 8:36 AM
Weird interaction... so if I do a getValue() on the component it returns a comma delimited string of what I have set in the valueField. However when I submit a form, it uses the displayField instead in the comma delimited string.

cnelissen
23 Dec 2010, 8:43 AM
Can you post your code? This component is setup exactly like a regular combo, and that behavior is expected if you use name instead of hiddenName...

mitchellsimoens
23 Dec 2010, 8:47 AM
new Ext.ux.form.CheckboxCombo({
fieldLabel: "Send Red Flag Reports to",
mode: "local",
valueField: "ID",
displayField: "lastName",
allowBlank: false,
store: mOQOLD.Stores.createStore("StaffList", true, "ContactAPI")
})


var cmp = form.getComponent(2);
console.log(params.getValue()); //returns IDs
var basic = form.getForm();
console.log(basic.getValues()); //returns lastNames

cnelissen
23 Dec 2010, 9:11 AM
Try adding a hiddenName to the field, ie:



new Ext.ux.form.CheckboxCombo({
hiddenName: 'fieldName',
fieldLabel: "Send Red Flag Reports to",
mode: "local",
valueField: "ID",
displayField: "lastName",
allowBlank: false,
store: mOQOLD.Stores.createStore("StaffList", true, "ContactAPI")
})


I setup a simple test form to make sure it works as appropriate and it does. Here is a script you can use to test with:



var form = new Ext.form.FormPanel({
title: 'Checkbox Combo Test',
labelWidth: 150,
items: [{
xtype: 'checkboxcombo',
name: 'valueswithname',
fieldLabel: 'Values w/ name',
store: new Ext.data.JsonStore({
fields: ['value', 'label'],
url: '/values.php',
method: 'POST',
autoLoad: true
}),
valueField: 'value',
displayField: 'label',
editable: false,
triggerAction: 'all',
allowBlank: true
},{
xtype: 'checkboxcombo',
hiddenName: 'valuewithhiddenname',
fieldLabel: 'Values w/ hiddenName',
store: new Ext.data.JsonStore({
fields: ['value', 'label'],
url: '/values.php',
method: 'POST',
autoLoad: true
}),
valueField: 'value',
displayField: 'label',
editable: false,
triggerAction: 'all',
allowBlank: true
}],
fbar: [{
text: 'Get Values',
handler: function() {
console.log(form.getForm().getValues());
}
}]
});


This will return:



{
valueswithname: 'value1, value2',
valueswithhiddenname: '1, 2'
}

mitchellsimoens
23 Dec 2010, 9:14 AM
Adding hiddenName works. Maybe this should be a default thing that it maps to the "name" of the combo box?

cnelissen
23 Dec 2010, 9:19 AM
I agree it would make more sense that way, however checkboxcombo simply mimics the behavior of a regular combo, which also requires the use of the hiddenName field to display the value rather than the label. I think its best to keep consistency between the two.

mitchellsimoens
23 Dec 2010, 9:23 AM
I agree it would make more sense that way, however checkboxcombo simply mimics the behavior of a regular combo, which also requires the use of the hiddenName field to display the value rather than the label. I think its best to keep consistency between the two.

Sorry, it's been so long since I have actually coded hiddenName into a combo box manually. I have a function that creates all my combos dynamically and that is one thing this function does is auto sets hiddenName to name.

Oops B)

mitchellsimoens
23 Dec 2010, 10:13 AM
I do not like one thing I must say... you use Ext.getCmp()... I'm going to try to get around this and also inject some events.

mitchellsimoens
23 Dec 2010, 10:34 AM
I tried to setValue with just a single value and it would throw an error on the join function. Got around it by adding this:

if (typeof vals === "array") {
vals = vals.join(",");
}

right after the Ext.each loop. I also replaced the two "vals.join(',')" with just "vals" Now I can setValue to a single value.

here is my entire setValue function:

setValue: function(vals) {
if (typeof vals == 'string') {
vals = vals.split(',');
}

var text = [];

Ext.each(vals, function(v) {
if (this.valueField){
var r = this.findRecord(this.valueField, v);
if (r) {
text.push(r.data[this.displayField]);
r.checked = true;
}
}
}, this);

if (typeof vals === "array") {
vals = vals.join(",");
}

if (this.hiddenField) {
this.hiddenField.value = Ext.value(vals, '');
}

this.lastSelectionText = text.join(', ');
Ext.ux.form.CheckboxCombo.superclass.setValue.call(this, text.join(', '));
this.value = vals;
return this;
},

mitchellsimoens
27 Dec 2010, 2:07 PM
Another change I just made makes use of templates like the core combofield does:
(changes in red)

addCheckboxes: function() {
this.cbgroup = new Ext.form.CheckboxGroup({
renderTo: this.innerList,
columns: 1,
autoHeight: true,
border: false,
items: [{}]
});

this.cbgroup.items.items[0].destroy();

var col = this.cbgroup.panel.items.get(0);

// Add new checkboxes from store
var tpl = this.tpl;
Ext.each(this.store.data.items, function(rec) {
var boxLabel;
if (typeof tpl === "object") {
boxLabel = tpl.apply(rec.data);
} else {
boxLabel = rec.data[this.displayField];
}
var checkbox = new Ext.form.Checkbox({name: rec.data.id + '-checkbox', boxLabel: boxLabel, inputValue: rec.data[this.valueField], checked: (rec.checked ? rec.checked : false)});
this.cbgroup.items.add(checkbox);
col.add(checkbox);
}, this);

this.cbgroup.panel.doLayout();
},

so now you can do this:


{
xtype: "checkboxcombo",
....
tpl: '<tpl for=".">{lastName}, {firstName}</tpl>'
}

If this.tpl is defined, it will be used over this.displayField.

cnelissen
30 Dec 2010, 2:55 PM
Thanks for the input Mitchell. I have incorporated some of your changes, specifically the template support as well as the change to the setValue function. Please re-download the code from the first post. Thanks!

John Sourcer
10 Jan 2011, 7:49 AM
Hey Clint,

Great stuff. setValue() doesn't seem to work though. Using the latest code base.

I load a store and then:



ds_collections.on('load', function (thisStore, records, options) {
combo_collections.setValue('2,5');
console.log(combo_collections.getValue());
});


The combo loads correctly but items 2 and 5 are not checked or shown the box. Logging combo_collections.getValue() shows the correct value though.

Any ideas?

cnelissen
10 Jan 2011, 8:20 AM
Hey Clint,

Great stuff. setValue() doesn't seem to work though. Using the latest code base.

I load a store and then:



ds_collections.on('load', function (thisStore, records, options) {
combo_collections.setValue('2,5');
console.log(combo_collections.getValue());
});


The combo loads correctly but items 2 and 5 are not checked or shown the box. Logging combo_collections.getValue() shows the correct value though.

Any ideas?

What does your store look like? Are your values strings or integers in the store?

John Sourcer
10 Jan 2011, 8:48 PM
Store is in the form:


{"id": 1, "collection":"test"}

cnelissen
11 Jan 2011, 8:11 AM
Store is in the form:


{"id": 1, "collection":"test"}

Since your store values are integers, then you'll probably need to pass the arguments as integers, since we are using a findExact method on the store lookup. You can pass the values as an array rather than a string, ie:



combo_collections.setValue([2,5]);

oulenspiegel
20 Jan 2011, 6:43 PM
Small patch to make it working with stateful: true.


setValue: function(vals) {
// patch by Markoff
if (this.store.getCount() == 0) {
this.store.on('load',
this.setValue.createDelegate(this, [vals]), null, {single: true});
this.store.load();
return;
}
// end patch

vals = vals || [];

if (typeof vals === 'string') {
vals = vals.split(',');
}

var text = [];

// First set everything to false
Ext.each(this.store.data.items, function(rec) {
rec.checked = false;
}, this);

// Now only check the values that were explicitly set
Ext.each(vals, function(v) {
if (this.valueField){
var r = this.findRecord(this.valueField, v);
if (r) {
text.push(r.data[this.displayField]);
r.checked = true;
}
}
}, this);

if (typeof vals === 'array' || typeof vals === 'object') {
vals = vals.join(',');
}

// Make sure the cbgroup gets updated
if (this.cbgroup) {
this.cbgroup.setValue(Ext.pluck(this.store.data.items, 'checked'));
}

if (this.hiddenField) {
this.hiddenField.value = Ext.value(vals, '');
}

this.lastSelectionText = text.join(', ');
Ext.ux.form.CheckboxCombo.superclass.setValue.call(this, text.join(', '));
this.value = vals;
return this;
},


Here is using example:



Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

function getComboState() {
return {
value: this.getValue()
};
}

function setComboState(state) {
this.setValue(state.value);
}

...

{
title: "Result",
items: [{
name: 'cbResult',
hiddenName: 'cbResult',
store: resultStore,
valueField: 'id',
displayField: 'value',
typeAhead: true,
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select...',
selectOnFocus: true,
xtype: 'checkboxcombo',
editable: false,
width: 120,
stateful: true,
stateId: 'cbResultState',
stateEvents: ['change'],
getState: getComboState,
applyState: setComboState
}]
},

walldorff
14 Feb 2011, 5:30 AM
Splendid extension, many thanks! I'm using the latest version (v1.2 Dec 30, 2010).
Only the setValue() method doesn't seem to work with DirectStore.

This works:

var beac = new Ext.ux.form.CheckboxCombo({
store: new Ext.data.ArrayStore({
fields: ['id', 'caption']
,data: [ ['1', 'Option 1'],['2', 'Option 2'],['35', 'Option 35'] ]
})
,name :'beac'
,width : 352
,maxHeight : 200
,fieldLabel : 'EAC'
,minListWidth : 300
,valueField : 'id'
,displayField : 'caption'
,tpl : '{caption:htmlEncode} ({id})'
});
beac.setValue('35');
but when I use DirectStore, the value ('35') is not visible:

store: new Ext.data.DirectStore({
autoLoad : true
,proxy : new Ext.data.DirectProxy({
directFn: App.rvw.Beac.read, paramsAsHash: false
})
,reader: new Ext.data.JsonReader({
idProperty: 'id'
,root: 'root'
,totalProperty: 'total'
,successProperty: 'success'
,fields: ['id', 'caption']
})
})
Server response is:

{"type":"rpc","tid":6,"action":"Beac","method":"read","result":
{"root":[
{"id":"1","caption":"option 1"},
{"id":"2","caption":"option 2"},
{"id":"35","caption":"option 35"}
],"total":3}}
The value, however, does get posted after a form submit.
Any idea how I can fix this?

hallow
15 Feb 2011, 4:56 PM
Does this extension support paging, eg., with the PagingStore extension? I've got some rather large multi-select lists that could benefit greatly from paging and only rendering a pages worth of options at a time.

sormy
19 Feb 2011, 3:02 PM
It seems that CheckboxCombo doesn't support local store.
Here is a patch:



Ext.override(Ext.ux.form.CheckboxCombo, {
mode: 'remote',

onTriggerClick: function() {
if (this.readOnly || this.disabled){
return;
}
if (this.isExpanded()){
this.collapse();
this.el.focus();
} else {
this.onFocus({});
if (this.triggerAction == 'all') {
if (this.mode == 'local')
this.store.clearFilter();
else
this.store.reload();
}
this.expand();
this.el.focus();
}
}
});

aecspades
29 Mar 2011, 3:53 PM
We have a form with two checkboxcombo controls on it. The first checkboxcombo is a product class, and the second is a list of product descriptions that match the first checkboxcombo class. We use the onblur event from the first checkboxcombo to set the baseParams of the second checkboxcombo's store and then do store.load(). It works fine the first two times, but then after that choosing a different product class and doing store.load() does not rebuild the drop down but instead starts to append the returned items to the previous list. Does the checkboxcombo support that kind of a scenario? We use a custom ArrayReader because of the format of the data returned from the host example:




var reader =new seq.DblistArrayReader({
fields: fldDefs
});
var store =new Ext.data.Store({
autoLoad:true,
url: seq.swiAddr,
baseParams:{
func:'DBLIST',
filter: dblFilter
},
reader: reader
});
var item={
xtype: 'checkboxcombo',
store: store
};


func blurFunc() {
item.getStore().baseParams.filter = "new filter";
item.getStore().load();
}

palex
27 Jun 2011, 12:08 AM
Hi,
Thanks for this useful extension. I am using frequently in my project but can't initial with values onload. I am loading ids and then try to setValue(ids) or setValue(ids.split(',')) but no success. Help please!

cnelissen
27 Jun 2011, 7:11 AM
Hi,
Thanks for this useful extension. I am using frequently in my project but can't initial with values onload. I am loading ids and then try to setValue(ids) or setValue(ids.split(',')) but no success. Help please!

Could you post a more complete code example?

palex
28 Jun 2011, 2:45 AM
Hi Cnelissen,
Thank you for responsiveness! My problem was in store load process. I have been set values in combo before store to load. Now I am waiting "load" event and setValue after that but only at firstload.

Thank you again for great extension!

ttbgwt
11 Jul 2011, 6:01 PM
Great extension! How can I get the combo area to dynamically update with the comma separated values as I check or uncheck items in the list? Currently they only update when the combo list closes.

Urkman
12 Jul 2011, 9:14 PM
Hello,

I have two problems with this extension :(

1.) I have a form inside a window. When I open the window the first time everything is fine, but when I open the windoe the second time, the combobox is not working. The list is not show on click...
I just hide the window, not destroy it...

2.) I get an error, when the store for the combobox is empty...

Hope you can help me on this :)

Greetings,
Urkman

ttbgwt
19 Dec 2011, 2:02 PM
Very cool extension. I am seeing horizontal scrollbars in IE only when the selected values are greater than the width of the combobox. See attached image.

30163

cnelissen
20 Dec 2011, 11:44 AM
Very cool extension. I am seeing horizontal scrollbars in IE only when the selected values are greater than the width of the combobox. See attached image.

Can you please post a code example so I can test it with your exact configuration?

ttbgwt
21 Dec 2011, 8:14 AM
Your checkboxcombo is working great but when I try to manually type within the combo text area, and then blur away, the value I entered does not stay, but the previous checkbox selections overwrite it.

In a normal combobox, when I edit and blur away, the edited value stays put, and is not overwritten. Any ideas on how to accomplish this?




me.propertGrid.customEditors[field] = new Ext.grid.GridEditor(new Ext.ux.form.CheckboxCombo({
displayField: 'field',
valueField: 'field',
mode: 'local',
editable: true,
selectOnFocus: true,
forceSelection: false,
clicksToEdit: 1,
store: new arraystore...,
value: value
})

Ram Manoj
2 Jan 2012, 4:36 AM
I am currently using this wonderful extension.
Can this extension be ported to ExtJS 4? Anyone?

ttbgwt
6 Jan 2012, 8:27 AM
bump

ttbgwt
6 Jan 2012, 8:27 AM
any ideas on this?


Your checkboxcombo is working great but when I try to manually type within the combo text area, and then blur away, the value I entered does not stay, but the previous checkbox selections overwrite it.

In a normal combobox, when I edit and blur away, the edited value stays put, and is not overwritten. Any ideas on how to accomplish this?




me.propertGrid.customEditors[field] = new Ext.grid.GridEditor(new Ext.ux.form.CheckboxCombo({
displayField: 'field',
valueField: 'field',
mode: 'local',
editable: true,
selectOnFocus: true,
forceSelection: false,
clicksToEdit: 1,
store: new arraystore...,
value: value
})

liuyg2005
29 Jun 2012, 12:46 AM
hi,
i want to know how to set background-color from black to white color?