extjs - 如何向 itemselector 键映射 EXTjs 添加其他键?
问题描述
有没有扩展 ItemSelector 的 KeyMap 的解决方案?我想添加一个键盘映射(如 itemselector 中的 pageUp 和 pageDown keyEvent),当我按下字母“AZ”时,它会将我带到以按下字母开头的项目并选择它。
解决方案
您可以使用以下覆盖(小提琴示例)来实现它。在查看疼痛重新加载时,它将无法正常工作。您必须定义记录搜索记录字段。对于复杂的视图模板,您可以删除硬编码搜索功能并将其用作设置。
Ext.define('overrides.view.NavigationModel', {
override: 'Ext.view.NavigationModel',
searchRecordField: false,
initKeyNav: function (view) {
var me = this;
// Drive the KeyNav off the View's itemkeydown event so that beforeitemkeydown listeners may veto.
// By default KeyNav uses defaultEventAction: 'stopEvent', and this is required for movement keys
// which by default affect scrolling.
var keyNavConfig = {
target: view,
ignoreInputFields: true,
eventName: 'itemkeydown',
defaultEventAction: 'stopEvent',
processEvent: me.processViewEvent,
up: me.onKeyUp,
down: me.onKeyDown,
right: me.onKeyRight,
left: me.onKeyLeft,
pageDown: me.onKeyPageDown,
pageUp: me.onKeyPageUp,
home: me.onKeyHome,
end: me.onKeyEnd,
space: me.onKeySpace,
enter: me.onKeyEnter,
A: {
ctrl: true,
// Need a separate function because we don't want the key
// events passed on to selectAll (causes event suppression).
handler: me.onSelectAllKeyPress
},
F: me.onAlphabetKeyPress,
scope: me
};
if(this.view.searchRecordField) {
keyNavConfig = Ext.Object.merge(keyNavConfig, this.getAdditionalKeyNav());
}
me.keyNav = new Ext.util.KeyNav(keyNavConfig);
},
getAdditionalKeyNav: function() {
var keyNav = {};
this.view.getStore().each(function(record) {
var firstLetter = record.get(this.view.searchRecordField)[0].toUpperCase();
if(!keyNav[firstLetter]) {
keyNav[firstLetter] = this.onAlphabetKeyPress
}
}, this);
return keyNav;
},
onAlphabetKeyPress: function(keyEvent) {
const key = keyEvent.event.key;
var foundRecordIndex = this.view.getStore().findBy(function(record) {
return record.get('title').toLowerCase().indexOf(key) === 0;
}, this);
if(foundRecordIndex > -1) {
this.setPosition(foundRecordIndex, keyEvent);
}
}
});
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('ListItem', {
extend: 'Ext.data.Model',
fields: [{
name: 'src',
type: 'string'
}, {
name: 'caption',
type: 'string'
}]
});
Ext.create('Ext.data.Store', {
id: 'ListItemsStore',
model: 'ListItem',
data: [{
title: "One"
}, {
title: "Two"
}, {
title: "Three"
}, {
title: "Four"
}, {
title: "Three"
}, ]
});
var imageTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div style="margin-bottom: 10px;" class="thumb-wrap">',
'<span>{title}</span>',
'</div>',
'</tpl>'
);
Ext.create('Ext.view.View', {
store: Ext.data.StoreManager.lookup('ListItemsStore'),
tpl: imageTpl,
itemSelector: 'div.thumb-wrap',
emptyText: 'No images available',
// Search Record Field
searchRecordField: 'title',
renderTo: Ext.getBody()
});
}
});
推荐阅读
- javascript - VSCode 自定义“修复”选项,应用 linter 规则
- python - 从腌制对象缓存时,如果对象在 SQLAlchemy 会话中不持久,如何避免加载关系属性
- objective-c - 从 UITableView 中的 UITextView 复制文本
- reactjs - 将 React.lazy 与 TypeScript 一起使用
- java - 从断言获取日志消息
- angular - 当我按下回车键时,Angular 表单中的按钮被“点击”
- sql - 如何纠正加入问题?
- api - 卷曲呼叫雅虎天气新的api OAuth
- datetime - Apache Nifi 表达式语言 - toDate 格式
- apache-spark - 为什么从 kafka 消费没有在 cloudera 中完成,而是在 hortonworks 中完成?