0
我創建了新的插件，它擴展了另一種擴展類型。 問題是，無法在新插件的複選框標籤框和框框之間同步
當我點擊康寶然後禁用值「全部」選項也越來越選中。
當我點擊組合列表中的複選框標籤，然後在框上打勾沒有出現，當我點擊該框然後它工作正常。
這裏是代碼，我已經擴展
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"> </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"> </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"> </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');
}
}
}
});
這裏擴展代碼，
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"> </span> {' + me.displayField + '}</li>',
'<tpl if=" ' + me.disableField + ' > 0 ">',
'<li role="option" class="' + Ext.baseCSSPrefix + 'boundlist-item"><span><input type="checkbox"/> </span> {' + me.displayField + '}</li>',
'<tpl else>',
'<li role="option" class="' + Ext.baseCSSPrefix + 'boundlist-item" ><span><input type="checkbox" disabled="disabled"/> </span> {' + me.displayField + '}</li>',
'</tpl>',
/* '<div class="x-boundlist-item">',
'<tpl if=" ' + this.disableField + ' == false ">',
'<div class="nowrap">',
'<input type="checkbox"/>',
'{',
this.displayField,
'}',
'</div>',
'</tpl>',
'<tpl if=" ' + this.disableField + ' == true ">',
'<div class="nowrap">',
'<input type="checkbox" disabled="disabled" />',
'{',
this.displayField,
'}',
'</div>',
'</tpl>',
'</div>', */
'</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"/> </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"/> </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();
}
},
});
感謝。
問題列表中禁用複選框已解決。但還有一個問題，在checkcombo中有「ALL」選項，當我點擊所有值被選中（禁用）。那麼我應該如何解決這個問題？ – user2621916 2014-12-04 04:55:19