PDA

View Full Version : Ext.ux.ToolbarKeyMap Add key bindings to Menu items within a Toolbar



Animal
7 Jun 2010, 5:25 AM
Drop this unchanged into examples/<anywhere>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript">
Ext.ux.ToolbarKeyMap = Ext.extend(Object, (function() {
var kb,
owner,
mappings;

function addKeyBinding(c) {
if (kb = c.keyBinding) {
delete c.keyBinding;
if (!kb.fn && c.handler) {
kb.fn = function(k, e) {
e.preventDefault();
e.stopEvent();
c.handler.call(c.scope, c, e);
}
}
mappings.push(kb);
var t = [];
if (kb.ctrl) t.push('Ctrl');
if (kb.alt) t.push('Alt');
if (kb.shift) t.push('Shift');
t.push(kb.key.toUpperCase());
c.hotKey = t.join('+');
if (c instanceof Ext.menu.Item) {
c.onRender = c.onRender.createSequence(addMenuItemHotKey);
} else if ((c instanceof Ext.Button) && (c.showHotKey)) {
c.onRender = c.onRender.createSequence(addButtonHotKey);
}
}
if ((c instanceof Ext.Button) && c.menu) {
c.menu.cascade(addKeyBinding);
}
}

function findKeyNavs() {
delete this.onRender;
if (owner = this.ownerCt) {
mappings = [];
this.cascade(addKeyBinding);
if (!owner.menuKeyMap) {
owner.menuKeyMap = new Ext.KeyMap(owner.el, mappings);
owner.el.dom.tabIndex = 0;
} else {
owner.menuKeyMap.addBinding(mappings);
}
}
}

function addMenuItemHotKey() {
delete this.onRender;
this.el.setStyle({
overflow: 'hidden',
zoom: 1
});
this.el.child('.x-menu-item-text').setStyle({
'float': 'left'
});
this.el.createChild({
style: {
padding: '0px 0px 0px 15px',
float: 'right',
},
html: this.hotKey
});
}

function addButtonHotKey() {
delete this.onRender;
var p = this.btnEl.up('');
p.setStyle({
overflow: 'hidden',
zoom: 1
});
p.up('td').setStyle('text-align', 'left');
this.btnEl.setStyle('.x-menu-item-text').setStyle({
'float': 'left'
});
p = p.createChild({
style: {
padding: '0px 0px 0px 15px',
float: 'right',
position: 'relative',
bottom: Ext.isWebKit ? '-1px' : '-2px'
},
html: this.hotKey
});
}

return {
init: function(toolbar) {
toolbar.onRender = toolbar.onRender.createSequence(findKeyNavs);
toolbar.doLayout = toolbar.doLayout.createSequence(findKeyNavs);
}
}
})());

function onMenuClick(m, e) {
alert("Clicked " + m.text);
}

Ext.onReady(function() {

new Ext.form.FormPanel({
title: 'Test menu item keyBinding',
renderTo: document.body,
style: {
margin: '10px'
},
bodyStyle: {
padding: '5px'
},
height: 400,
width: 600,
tbar: {
plugins: new Ext.ux.ToolbarKeyMap(),
items: [{
text: 'Main Menu',
menu: {
items: [{
text: 'First option',
keyBinding: {
key: 'a',
ctrl: true
},
handler: onMenuClick
}, {
text: 'Second option',
keyBinding: {
key: 'c',
alt: true
},
handler: onMenuClick
}]
}
}, {
text: 'A Button',
handler: function() {
alert("Clicked button");
},
keyBinding: {
key: 'd',
ctrl: true,
alt: true
},
showHotKey: true // defaults to NOT showing the hotkey name
}]
},
items: {
xtype: 'textfield',
fieldLabel: 'Try your hotkeys'
}
});
})
</script>
</head>
<body>
</body>
</html>

peterversnee
28 Mar 2011, 6:57 AM
Nice! Thanks!

PS: Maybe add something so it loads and directly focuses on the body? The plugin works like a charm after focusing on the body.

Thanks again!

peterversnee
28 Mar 2011, 7:17 AM
I noticed that using key: 'F4' isn't an option. Maybe using charCodes is a better idea?

apdeveloper
19 Jan 2012, 12:48 AM
I have a problem to use this plugin in project created with Ext Designer and Ext 3.3.2
Because of Ext Designer I must initialize the plugin in extended class



MyApp.ProjectList = Ext.extend(ProjectListUi, {
...
initComponent: function() {
...
MyApp.ProjectList.superclass.initComponent.call(this);
...
this.btnSearch.keyBinding = {key: 'f',ctrl: true, shift: true};
this.actionTb = this.filterPanel.getBottomToolbar();
this.actionTb.initPlugin(new Ext.ux.ToolbarKeyMap());
...



no error during initialization, the ProjectList window opens, but when I press the defined shortcut I get error in Chrome




Uncaught TypeError: Cannot call method 'call' of undefined

handlerext-all-debug.js:10810 (http://localhost:8080/zmn/resources/extjs/ext-all-debug.js)
Ext.KeyMap.handleKeyDownext-all-debug.js:10866 (http://localhost:8080/zmn/resources/extjs/ext-all-debug.js)
hext-all-debug.js:5171 (http://localhost:8080/zmn/resources/extjs/ext-all-debug.js)

mvosantos
8 May 2012, 9:32 AM
Hello,
I´m using 4.0.7 version and I´m getting the follow error at firebug:

toolbar.onRender.createSequence is not a function
toolbar.onRender = toolbar.onRender.createSequence(findKeyNavs);

The error is on the lines

return {
init: function(toolbar) {
console.log(toolbar);
toolbar.onRender = toolbar.onRender.createSequence(findKeyNavs);
toolbar.doLayout = toolbar.doLayout.createSequence(findKeyNavs);
}
}

In my console.log, toolbar is a "Ext.toolbar.Toolbar" component and createSequente method does not exist...
What am I supposed to do?