Extjs Can'；无法在新插件中的复选框标签和复选框框之间同步
我已经创建了一个新插件，它扩展了另一个扩展类型。 问题是Extjs Can'；无法在新插件中的复选框标签和复选框框之间同步,extjs,Extjs,我已经创建了一个新插件，它扩展了另一个扩展类型。 问题是 当我点击组合中的“全部”选项时，禁用值也被选中 当我点击组合列表中复选框的标签时，勾选框并没有出现，当我点击该框时，它工作正常 下面是我扩展的代码 Ext.define('Ext.ux.CheckCombo', { extend: 'Ext.form.field.ComboBox', alias: 'widget.checkcombo', multiSelect: true, allSelecto
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.CheckCombo'，
{
扩展：“Ext.form.field.ComboBox”，
别名：“widget.checkcombo”，
多选：对，
allSelector:false，
野田：错，
noDataText:“”，
addAllSelector:false，
allSelectorHidden:false，
enableKeyEvents:true，
检查后：错误，
allText:'所有'，
旧值：“”，
//matchFieldWidth：对，
//listConfig:{minWidth:50}，
听众：
{
/*如果要在每个组合展开时重新加载存储，请取消注释
查询前：函数（qe）
{
this.store.removeAll（）；
删除qe.combo.lastQuery；
},
*/
焦点：功能（cpt）
{
cpt.oldValue=cpt.getValue（）；
},
向下键：功能（cpt、e、eOpts）
{
var value=cpt.getRawValue（），
oldValue=cpt.oldValue；
//下面一行是注释bcz，我们得到的值是数据，旧值是ID
//如果（值！=oldValue）cpt.setValue（“”）；
}
},
createPicker:函数（）
{
var me=这个，
皮克，
menuCls=Ext.baseCSSPrefix+“菜单”，
opts=Ext.apply(
{
皮克菲尔德：我，
selModel：
{
模式：me.multiSelect？'SIMPLE'：'SINGLE'
},
浮动：是的，
隐藏：是的，
所有者：我，所有者，
cls:me.el.up（'.'+菜单）？菜单：“”，
商店：我，商店，
displayField:me.displayField，
focusOnToFront:错误，
pageSize:me.pageSize，
第三方物流：
[
“”，
“- {'+me.displayField+}
”，
“
”
]
}，me.listConfig，me.defaultListConfig）；
picker=me.picker=Ext.create（'Ext.view.BoundList'，opts）；
如果（我的页面大小）
{
picker.pagingToolbar.on（'beforechange'，me.onPageChange，me）；
}
我，蒙（皮克，
{
itemclick:me.onItemClick，
刷新：me.onListRefresh，
范围：我
});
me.mon（picker.getSelectionModel（），
{
“beforeselect”：me.onBeforeSelect，
“beforedeselect”：me.onBeforeDeselect，
“selectionchange”：me.onListSelectionChange，
范围：我
});
me.store.on（'load'，函数（store）
{
if（store.getTotalCount（）==0）
{
me.allSelectorHidden=true；
如果（me.allSelector！=false）me.allSelector.setStyle（'display'，'none'）；
如果（me.noData！=false）me.noData.setStyle（'display'，'block'）；
}
其他的
{
me.allSelectorHidden=false；
如果（me.allSelector！=false）me.allSelector.setStyle（'display'，'block'）；
如果（me.noData！=false）me.noData.setStyle（'display'，'none'）；
}
});
回程选择器；
},
重置：函数（）
{
var me=这个；
me.setValue（“”）；
},
设置值：函数（值）
{
这个值=值；
如果（！值）
{
如果（this.allSelector！=false）this.allSelector.removeCls（'x-boundlist-selected'）；
返回this.callParent（参数）；
}
如果（值的类型=='string'）
{
var me=这个，
记录=[]，
VAL=value.split（'，'）；
如果（值=“”）
{
如果（me.allSelector！=false）me.allSelector.removeCls（'x-boundlist-selected'）；
}
其他的
{
if（vals.length==me.store.getCount（）&&vals.length！=0）
{
如果（me.allSelector！=false）me.allSelector.addCls（'x-boundlist-selected'）；
else me.afterExpandCheck=true；
}
}
Ext.each（val，函数（val）
{
var record=me.store.getById（parseInt（val））；
if（记录）记录。推送（记录）；
});
返回我.setValue（记录）；
}
否则返回this.callParent（参数）；
},
getValue:function（）
{
if（typeof this.value=='object'）返回this.value.join（'，'）；
否则返回此.value；
},
getSubmitValue:函数（）
{
返回这个.getValue（）；
},
展开：函数（）
{
var me=这个，
bodyEl、picker、collapseIf；
如果（me.rendered&&！me.isExpanded&&！me.isDestroyed）
{
bodyEl=me.bodyEl；
picker=me.getPicker（）；
collapseIf=me.collapseIf；
//显示选择器并设置isExpanded标志
picker.show（）；
me.isExpanded=true；
me.alignPicker（）；
bodyEl.addCls（me.openCls）；
如果（me.noData==false）me.noData=picker.getEl（）.down（'.x-boundlist-list-ct'）.insertHtml（'beforebeagin'，''+me.noDataText+''，true）；
if（me.addAllSelector==true&&me.allSelector==false）
{
var selectedvalues=此.value；
var VAL=字符串（selectedvalues）。拆分（“，”；
if（vals.length==me.store.getCount（）&&vals.length！=0）
{
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();
}
},
});