是否有扩展ItemSelector的KeyMap的解决方案?我想添加一个键Map(如itemselector中的pageUp和pageDown keyEvent),当我按下字母“A-Z”时,它会将我带到以按下的字母开头的项并选择它。
eyh26e7m1#
您可以使用以下覆盖(fiddle示例)来实现它。它将无法在视图重新加载时正常工作。并且您将必须定义记录搜索记录字段。如果视图模板复杂,您可以删除硬编码搜索功能并将其用作设置。
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() }); } });
1条答案
按热度按时间eyh26e7m1#
您可以使用以下覆盖(fiddle示例)来实现它。它将无法在视图重新加载时正常工作。并且您将必须定义记录搜索记录字段。如果视图模板复杂,您可以删除硬编码搜索功能并将其用作设置。