PDA

View Full Version : Combo box with check box



Sumit Pathak
5 Dec 2012, 7:06 AM
Hi i am trying to put a check box inside a combo box and populating it with data from database. All the values are to be checked at render and if all values are checked the option all must also be checked. Below is my code for component



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,
'blur':me.onBlur,
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();
}
},

onBlur : function(selectedRecords){

},

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
if (!me.ignoreSelection && me.isExpanded) {
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
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');
}
},

setValue: function(value, doSelect) {
var me = this,
valueNotFoundText = me.valueNotFoundText,
inputEl = me.inputEl,
i, len, record,
dataObj,
matchedRecords = [],
displayTplData = [],
processedValue = [];


if (me.store.loading) {
// Called while the Store is loading. Ensure it is processed by the onLoad method.
me.value = value;
me.setHiddenValue(me.value);
return me;
}
// This method processes multi-values, so ensure value is an array.
value = Ext.Array.from(value);
// Loop through values, matching each from the Store, and collecting matched records
for (i = 0, len = value.length; i < len; i++) {
record = value[i];
if (!record || !record.isModel) {
record = me.findRecordByValue(record);
}
// record found, select it.
if (record) {
matchedRecords.push(record);
if(me.store.getTotalCount() == len){
displayTplData = [];
displayTplData.push('All');
}
else {
displayTplData.push(record.data);
}
processedValue.push(record.get(me.valueField));
}
// record was not found, this could happen because
// store is not loaded or they set a value not in the store
else {
// If we are allowing insertion of values not represented in the Store, then push the value and
// create a fake record data object to push as a display value for use by the displayTpl
if (!me.forceSelection) {
processedValue.push(value[i]);
dataObj = {};
dataObj[me.displayField] = value[i];
displayTplData.push(dataObj);
// TODO: Add config to create new records on selection of a value that has no match in the Store
}
// Else, if valueNotFoundText is defined, display it, otherwise display nothing for this value
else if (Ext.isDefined(valueNotFoundText)) {
displayTplData.push(valueNotFoundText);
}
}
}
// Set the value of this field. If we are multiselecting, then that is an array.
me.setHiddenValue(processedValue);
me.value = me.multiSelect ? processedValue : processedValue[0];
if (!Ext.isDefined(me.value)) {
me.value = null;
}
me.displayTplData = displayTplData; //store for getDisplayValue method
me.lastSelection = me.valueModels = matchedRecords;
if (inputEl && me.emptyText && !Ext.isEmpty(value)) {
inputEl.removeCls(me.emptyCls);
}
// Calculate raw value from the collection of Model data
me.setRawValue(me.getDisplayValue());
me.checkChange();
if (doSelect !== false) {
me.syncSelection();
}
me.applyEmptyText();
return me;
},
});


My code for view is


{ xtype : 'checkcombo',
valueField: 'subRegion',
queryMode : 'local',
id : 'subRegionId',
displayField: 'subRegion',
store: 'deliveryGroupPerformances.SubRegionStore',
addAllSelector: true,
action : 'selectSubRegion',
value : 'All',
listeners: {
afterrender: function(display){
display.tip = Ext.create('Ext.tip.ToolTip', {
target: display.el,
trackMouse: true,
dismissDelay: 5000
});
}
}
},


All the values are checked at render but the option all is not getting checked.Please help me out

mitchellsimoens
7 Dec 2012, 6:51 AM
Moved to Ext JS 4 Q&A forum.