PDA

View Full Version : Problem selecting all the checkbox inside combo box as default.



Sumit Pathak
29 Nov 2012, 6:11 AM
Hi I am trying to put a checkbox inside a combo box . I want to select all the values as default but I am not getting the desired result.Below is my code




Ext.define('Ext.ux.CheckCombo',
{
extend: 'Ext.form.field.ComboBox',
alias: 'widget.checkcombo',
multiSelect: true,
allSelector: false,
addAllSelector: false,
allText: 'All',
createPicker: function() {
var me = this,
picker,
menuCls = Ext.baseCSSPrefix + 'menu',
opts = Ext.apply({
pickerField: me,
selModel: {
mode: me.multiSelect ? 'SIMPLE' : 'SINGLE',
},
floating: true,
hidden: true,
ownerCt: me.ownerCt,
cls: me.el.up('.' + menuCls) ? menuCls : '',
store: me.store,
displayField: me.displayField,
focusOnToFront: false,
pageSize: me.pageSize,
tpl:
[
'<ul><tpl for=".">',
'<li role="option" class="' + Ext.baseCSSPrefix + 'boundlist-item"><span class="x-combo-checker">&nbsp;</span> {' + me.displayField + '}</li>',
'</tpl></ul>'
]
}, me.listConfig, me.defaultListConfig);

picker = me.picker = Ext.create('Ext.view.BoundList', opts);
if (me.pageSize) {
picker.pagingToolbar.on('beforechange', me.onPageChange, me);
}

me.mon(picker, {
itemclick: me.onItemClick,
refresh: me.onListRefresh,
scope: me
});

me.mon(picker.getSelectionModel(), {
'beforeselect': me.onBeforeSelect,
'beforedeselect': me.onBeforeDeselect,
'selectionchange': me.onListSelectionChange,
scope: me
});

return picker;
},
getValue: function()
{
return this.value.join(',');
},
getSubmitValue: function()
{
return this.getValue();
},
expand: function()
{
var me = this,
bodyEl, picker, collapseIf;

if (me.rendered && !me.isExpanded && !me.isDestroyed) {
bodyEl = me.bodyEl;
picker = me.getPicker();
collapseIf = me.collapseIf;

// show the picker and set isExpanded flag
picker.show();
me.isExpanded = true;
me.alignPicker();
bodyEl.addCls(me.openCls);

if(me.addAllSelector == true && me.allSelector == false)
{
me.allSelector = picker.getEl().insertHtml('afterBegin', '<div class="x-boundlist-item" role="option"><span class="x-combo-checker">&nbsp;</span> '+me.allText+'</div>', true);
me.allSelector.on('click', function(e)
{
if(me.allSelector.hasCls('x-boundlist-selected'))
{
me.allSelector.removeCls('x-boundlist-selected');
me.setValue('');
me.fireEvent('select', me, []);
}
else
{
var records = [];
me.store.each(function(record)
{
records.push(record);
});
me.allSelector.addCls('x-boundlist-selected');
me.select(records);
me.fireEvent('select', me, records);
}
});
}
// monitor clicking and mousewheel
me.mon(Ext.getDoc(), {
mousewheel: collapseIf,
mousedown: collapseIf,
scope: me
});
Ext.EventManager.onWindowResize(me.alignPicker, me);
me.fireEvent('expand', me);
me.onExpand();
}
},
onListSelectionChange: function(list, selectedRecords)
{
var me = this,
isMulti = me.multiSelect,
hasRecords = selectedRecords.length > 0;
// 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)
console.log(!me.ignoreSelection +"&&"+ me.isExpanded);
if (!me.ignoreSelection && me.isExpanded) {
console.log("Inside");

if (!isMulti) {
Ext.defer(me.collapse, 1, me);
}
/*
* Only set the value here if we're in multi selection mode or we have
* a selection. Otherwise setValue will be called with an empty value
* which will cause the change event to fire twice.
*/

if (isMulti || hasRecords) {
//Author Exilant : All will be set in combo for all selection
if(selectedRecords.length == me.store.getTotalCount()){
me.setValue('All', false);
}
else{
me.setValue(selectedRecords, false);
}
}
if (hasRecords) {
me.fireEvent('select', me, selectedRecords);
}
me.inputEl.focus();
}

if(me.addAllSelector == true && me.allSelector != false)
{
if(selectedRecords.length == me.store.getTotalCount())
{
me.allSelector.addCls('x-boundlist-selected');
}
else me.allSelector.removeCls('x-boundlist-selected');
}
}
}



if (!me.ignoreSelection && me.isExpanded) {

On using !me.ignoreSelection from if condition the combo.setValue() is working fine i.e the set value is showing checked inside combo but the issue coming is , by checking ALL the ALL is not coming in the display field instead the whole value is common by coma separated. But on removing !me.ignoreSelection the setValue is not not working.