Ext.ux.form.CheckboxCombo

[lakilevi]

thank you very much

[cnelissen]

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]

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]

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]

Try adding triggerAction: 'all' to the config. This will force a reload of the data every time the trigger is clicked.

[Abhinandan]

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]

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]

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({
storetore ,
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]

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]

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.