extjs - Extjs HTML 编辑器在 Ext.form.field.Picker 中不起作用
问题描述
尝试将 html 编辑器添加到 Ext.form.field.Picker 时,它显示但在鼠标单击后关闭
演示 https://fiddle.sencha.com/#fiddle/3aik
我在网格单元编辑器中使用此控件,并在这种情况下覆盖 onFocusLeave 没有帮助。主要问题是 html 编辑器中的视口不是窗口的一部分。到目前为止,我还没有想出比为 Ext.ComponentManager onGlobalFocus 函数重写更好的方法https://fiddle.sencha.com/#view/editor&fiddle/3ak0
解决方案
当你查看这个基础组件的代码时,你会发现这个方法:
onFocusLeave: function(e) {
this.collapse();
this.callParent([e]);
},
https://docs.sencha.com/extjs/6.5.3/classic/src/Picker.js.html
此方法将调用将隐藏选择器的折叠方法:
/**
* Collapses this field's picker dropdown.
*/
collapse: function() {
var me = this;
if (me.isExpanded && !me.destroyed && !me.destroying) {
var openCls = me.openCls,
picker = me.picker,
aboveSfx = '-above';
// hide the picker and set isExpanded flag
picker.hide();
me.isExpanded = false;
// remove the openCls
me.bodyEl.removeCls([openCls, openCls + aboveSfx]);
picker.el.removeCls(picker.baseCls + aboveSfx);
if (!me.ariaStaticRoles[me.ariaRole]) {
me.ariaEl.dom.setAttribute('aria-expanded', false);
}
// remove event listeners
me.touchListeners.destroy();
me.scrollListeners.destroy();
Ext.un('resize', me.alignPicker, me);
me.fireEvent('collapse', me);
me.onCollapse();
}
},
一个简单的 hack 可能是注释 onFocusLeave 方法的函数体,如下所示:https ://fiddle.sencha.com/#fiddle/3ajo&view/editor
onFocusLeave: function(e) {
// this.collapse();
//this.callParent([e]);
},
如果这会导致一些副作用,您还可以在那里放置一些条件。
另一种选择可能是仅使用带有自定义触发器的普通字段,该触发器显示 onclick 您在此处定义的此窗口。
回应您在此答案下的评论。
选择器字段不是编辑器字段。
当您查看 CellEditor 的 Source 时,您会再次找到此方法:
onFocusLeave: function(e) {
var me = this,
view = me.context.view,
related = Ext.fly(e.relatedTarget);
// Quit editing in whichever way.
// The default is completeEdit.
// If we received an ESC, this will be cancelEdit.
if (me[me.focusLeaveAction]() === false) {
e.event.stopEvent();
return;
}
delete me.focusLeaveAction;
// If the related target is not a cell, turn actionable mode off
if (!view.destroyed && view.el.contains(related) &&
(!related.isAncestor(e.target) || related === view.el) &&
!related.up(view.getCellSelector(), view.el, true)) {
me.context.grid.setActionableMode(false, view.actionPosition);
}
me.cacheElement();
// Bypass Editor's onFocusLeave
Ext.container.Container.prototype.onFocusLeave.apply(me, arguments);
},
在这种情况下,您可以像这样定义编辑器字段:
columns: [{
xtype: 'gridcolumn',
dataIndex: 'name',
text: 'Name',
flex: 1,
editor: {
field: {xtype: 'edithtmlfield'},
focusLeaveAction: false
}
}],
plugins: [{
ptype: 'cellediting'
}]
这将覆盖“completeEdit”中的默认配置。
https://docs.sencha.com/extjs/6.5.3/classic/src/CellEditor.js.html
这是一个更新的小提琴:https ://fiddle.sencha.com/#view/editor&fiddle/3aoa
推荐阅读
- flutter - > 找不到参数的方法 implementation() [androidx.annotation:annotation:1.1.0]
- python - 交通标志识别中模板匹配法识别准确率低
- javascript - Django + AJAX,需要点击两次按钮才能工作
- sql - 验证表中记录的最佳方法
- laravel - Laravel Livewire Echo 配置
- javascript - 让javascript选择所有元素,而不仅仅是第一个
- python - NameError:名称'pycrfsuite'未定义
- php - 如何添加功能,以便同一城市的司机用户角色可以看到 woocommerce 订单?
- github - 如何使用markdown在github中创建orderlist
- python - 如果初始化不正确,删除对python中对象的引用?