PDA

View Full Version : Can't able to sync between label of checkbox and box of chekbox in new plugin



sanketgandhi876
3 Dec 2014, 4:43 AM
Hi,

I have created new plugin which extend another extended type.
Problem is,
1) When i click on "All" option in combo then disable value is also getting selected.

2) When i click on label of checkbox in combo list then tick on box is not appearing and when i click on that box then it work fine.

Here is Code which i have extended


Ext.define('Ext.ux.CheckCombo',
{

extend: 'Ext.form.field.ComboBox',
alias: 'widget.checkcombo',
multiSelect: true,
allSelector: false,
noData: false,
noDataText: '',
addAllSelector: false,
allSelectorHidden: false,
enableKeyEvents: true,
afterExpandCheck: false,
allText: 'All',
oldValue: '',
//matchFieldWidth: true,
//listConfig: {minWidth: 50},
listeners:
{
/* uncomment if you want to reload store on every combo expand
beforequery: function(qe)
{
this.store.removeAll();
delete qe.combo.lastQuery;
},
*/
focus: function(cpt)
{

cpt.oldValue = cpt.getValue();
},
keydown: function(cpt, e, eOpts)
{
var value = cpt.getRawValue(),
oldValue = cpt.oldValue;

// below line is commented bcz we are getting value as data and oldvalue as ids
// if(value != oldValue) cpt.setValue('');
}
},
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
});


me.store.on('load', function(store)
{
if(store.getTotalCount() == 0)
{
me.allSelectorHidden = true;
if(me.allSelector != false) me.allSelector.setStyle('display', 'none');
if(me.noData != false) me.noData.setStyle('display', 'block');
}
else
{
me.allSelectorHidden = false;
if(me.allSelector != false) me.allSelector.setStyle('display', 'block');
if(me.noData != false) me.noData.setStyle('display', 'none');
}
});


return picker;
},
reset: function()
{
var me = this;


me.setValue('');
},
setValue: function(value)
{
this.value = value;
if(!value)
{
if(this.allSelector != false) this.allSelector.removeCls('x-boundlist-selected');
return this.callParent(arguments);
}


if(typeof value == 'string')
{
var me = this,
records = [],
vals = value.split(',');

if(value == '')
{
if(me.allSelector != false) me.allSelector.removeCls('x-boundlist-selected');
}
else
{
if(vals.length == me.store.getCount() && vals.length != 0)
{
if(me.allSelector != false) me.allSelector.addCls('x-boundlist-selected');
else me.afterExpandCheck = true;
}
}


Ext.each(vals, function(val)
{
var record = me.store.getById(parseInt(val));
if(record) records.push(record);
});


return me.setValue(records);
}
else return this.callParent(arguments);
},
getValue: function()
{
if(typeof this.value == 'object') return this.value.join(',');
else return this.value;
},
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.noData == false) me.noData = picker.getEl().down('.x-boundlist-list-ct').insertHtml('beforeBegin', '<div class="x-boundlist-item" role="option">'+me.noDataText+'</div>', true);
if(me.addAllSelector == true && me.allSelector == false)
{
var selectedvalues = this.value ;
var vals = String(selectedvalues).split(",");
if(vals.length == me.store.getCount() && vals.length != 0)
{
me.allSelector = picker.getEl().down('.x-boundlist-list-ct').insertHtml('beforeBegin', '<div class="x-boundlist-item x-boundlist-selected" role="option"><span class="x-combo-checker">&nbsp;</span> '+me.allText+'</div>', true);
}
else
{
me.allSelector = picker.getEl().down('.x-boundlist-list-ct').insertHtml('beforeBegin', '<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);
}
});


if(me.allSelectorHidden == true) me.allSelector.hide();
else me.allSelector.show();

if(me.afterExpandCheck == true)
{
me.allSelector.addCls('x-boundlist-selected');
me.afterExpandCheck = false;
}
}


// 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();
}
else
{
me.fireEvent('expand', me);
me.onExpand();
}
},
alignPicker: function()
{
var me = this,
picker = me.getPicker();


me.callParent();

if(me.addAllSelector == true)
{
var height = picker.getHeight();
//alert(height);
height = parseInt(height)+25;
picker.setHeight(height);
picker.getEl().setStyle('height', height+'px');
}
},
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)
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)
{
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');
}
}
}
});




And here is extended code,


Ext.define('Ext.ux.PermissionCheckCombo',{
extend: 'Ext.ux.CheckCombo',
alias: 'widget.permissioncheckcombo',
frame: false,
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,
disableField: me.disableField,
bind: {
store: this.store
},
listeners: {
beforeselect: function(combo, record, index ) {
if (record.get(me.disableField) != 0) {
// combo.setValue(record.get(me.displayField));
// combo.setValue(record.get(me.displayField));
// console.log(combo);
} else {
return false;
}
// Cancel the default action
}

},

tpl:
[
'<ul><tpl for=".">',
// '<li role="option" class="' + Ext.baseCSSPrefix + 'boundlist-item"><span class="x-combo-checker">&nbsp;</span> {' + me.displayField + '}</li>',
'<tpl if=" ' + me.disableField + ' &gt; 0 ">',
'<li role="option" class="' + Ext.baseCSSPrefix + 'boundlist-item"><span><input type="checkbox"/>&nbsp;</span> {' + me.displayField + '}</li>',
'<tpl else>',
'<li role="option" class="' + Ext.baseCSSPrefix + 'boundlist-item" ><span><input type="checkbox" disabled="disabled"/>&nbsp;</span> {' + me.displayField + '}</li>',
'</tpl>',

'</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
});


me.store.on('load', function(store)
{
if(store.getTotalCount() == 0)
{
me.allSelectorHidden = true;
if(me.allSelector != false) me.allSelector.setStyle('display', 'none');
if(me.noData != false) me.noData.setStyle('display', 'block');
}
else
{
me.allSelectorHidden = false;
if(me.allSelector != false) me.allSelector.setStyle('display', 'block');
if(me.noData != false) me.noData.setStyle('display', 'none');
}
});

return picker;
},

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.noData == false) me.noData = picker.getEl().down('.x-boundlist-list-ct').insertHtml('beforeBegin', '<div class="x-boundlist-item" role="option">'+me.noDataText+'</div>', true);
if(me.addAllSelector == true && me.allSelector == false)
{
var selectedvalues = this.value ;
var vals = String(selectedvalues).split(",");
if(vals.length == me.store.getCount() && vals.length != 0)
{
me.allSelector = picker.getEl().down('.x-boundlist-list-ct').insertHtml('beforeBegin', '<div class="x-boundlist-item x-boundlist-selected" role="option"><span ><input type="checkbox"/>&nbsp;</span> '+me.allText+'</div>', true);
}
else
{
me.allSelector = picker.getEl().down('.x-boundlist-list-ct').insertHtml('beforeBegin', '<div class="x-boundlist-item" role="option"><span ><input type="checkbox"/>&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);
}
});


if(me.allSelectorHidden == true) me.allSelector.hide();
else me.allSelector.show();

if(me.afterExpandCheck == true)
{
me.allSelector.addCls('x-boundlist-selected');
me.afterExpandCheck = false;
}
}


// 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();
}
else
{
me.fireEvent('expand', me);
me.onExpand();
}
},
});



Thanks. :)

lumberjack
8 Dec 2014, 10:54 AM
Can you please provide a test case using fiddle?

Thanks,
Brian

sanketgandhi876
8 Dec 2014, 11:44 PM
I solved that problem in another way. I posted solution and new type:

http://www.sencha.com/forum/showthread.php?295648-Ext.ux.PerCheckCombo&p=1079358&viewfull=1#post1079358

Thanx :)