Develop Reference

Polymer fire on-tap with enter

I am beginner on Polymer. I think that it is a easy Problem but i could not find out how can i implement this on my application.
I have a button on HTML like:
<paper-button class="button" id="button-wide" raised affirmative on-tap="{{onClick}}">
and in javascript i have function like:
Polymer('dialog', {
onClick: function() {
......
......
}}
And i want fire this button with enter key on keyboard.
Thanks!

Something like this could work:
Polymer('dialog', {
onClick: function () {
// etc..
},
onKeyDown: function (e) {
if (e.which === 13 || e.keyCode === 13) {
this.onClick();
}
},
attached: function () {
this.onKeyDown = this.onKeyDown.bind(this);
document.addEventListener('keydown', this.onKeyDown);
},
detached: function () {
document.removeEventListener('keydown', this.onKeyDown);
}
});
where attached and detached are lifecycle methods of the element.

How to handle ctrl+tab key in extjs 3.4?

I am working on Extjs3.4. I want to keymap ctrl+tab in my application. but when I try to use it, it opens my next browser tab. How can I solve it?
This is my code :-
var keyMap = new Ext.KeyMap(Ext.getDoc(), {
key: Ext.EventObject.TAB,//9
ctrl: true,
stopEvent : true,
fn: function () { console.log('it works'); },
scope: this
});
Please give some suggestion.

Try to put a listener in the respective field (text or whatever)
listeners: {
keydown: { //tab could be listened in keydown
element: 'el',
fn: function(e){
if(e.urKey && e.urAnotherKey)
alert('keydown, execute my action');
}
},
keypress: {
element: 'el',
fn: function(){
alert('keypress');
}
}
}

Trigger event from an approuter

I created an application and it worked fine, most of the functionality is just the application reacting to different events. I would like to implement a router so that users would be able to show their search results with other users etc. The problem is the router appears to be set up correctly, as when i use it to append things directly to the body everything works as expected. When I try to use the router to trigger events though nothing happens, any help would be greatly appreciated. It is worth mentioning I suppose that this is not the complete code but just the parts that seemed relevant to the issue I am experiencing.
IEG = new Backbone.Marionette.Application();
IEG.addRegions({
searchBox: '#searchBox',
resultBox: '#resultBox',
modalBox: '#modalBox',
recipientBox: '#recipientBox',
confirmBox: '#confirmToggleActive'
});
IEG.vent = _.extend({}, Backbone.Events);
IEG.Router = Backbone.Marionette.AppRouter.extend({
routes: {
'': 'index'
},
index: function () {
IEG.vent.trigger("default"); ////TRIGGER EVENT DOES NOT WORK
//$(document.body).append("Index route has been called..");
}
});
SearchBoxView = Backbone.Marionette.ItemView.extend({
template: Handlebars.templates['search'],
events: {
'click #addGroup': 'addGroup',
'keyup #searchStr': 'evaluateSearch'
},
addGroup: function () {
IEG.vent.trigger("addGroup");
},
clearValidationMsg: function () {
$('#searchErrors').html("");
},
evaluateSearch: function (e) {
console.log("keyup DO SOMETHING> ", e.keyCode);
if (e.keyCode === 13) {///press enter execute search
var searchStr = $('#searchStr').val().trim();
if (searchStr) {
IEG.vent.trigger("searchGroups", searchStr);
}
}
else if (e.keyCode === 8 || e.keyCode === 46) {//backspace and delete keys
var searchStr = $('#searchStr').val().trim();
if (!searchStr) {//when searchbar is cleared show all groups
IEG.vent.trigger("searchGroups", null)
}
}
},
validateEmail: function (searchStr) {
return /^.+#.+\..+$/.test(address);
}
});
$(document).ready(function () {
IEG.start();
new IEG.Router;
Backbone.history.start();
IEG.vent.on("default", function () {
var SBV = new SearchBoxView();
IEG.searchBox.show(SBV);
IEG.searchColl = new GroupEntries();
IEG.searchColl.fetch({
data: {
cmd: 0, //search groups
searchStr: null //if null show all groups
},
success: function (data) {
searchResults = new SearchResultsView({ collection: IEG.searchColl });
IEG.resultBox.show(searchResults);
}
});
});
});

Make sure your event listeners are defined before the event is triggered. Most likely, the event trigger is working fine, but your event listener is registered after the router has triggered the event and nothing happens...

Capturing form submit events using enter in backbone

My backbone.js form has a single textfield (no submit button). I need to capture submit event (using enter key) in the view. Below is the sample code. Somehow the submit method is not called on pressing enter. Instead the form goes for a reload.
Script :
var FormView = Backbone.View.extend({
el: '#form',
events: {
"submit": "submit",
},
initialize: function () {
console.log("initialize");
},
submit: function (e) {
e.preventDefault();
console.log("submit");
}
});
new FormView();
HTML :
<form id="form">
<input type="text"/>
</form>

Add this to your Backbone view:
events: {
'submit form': 'submit'
}
Also, note that in your HTML, the form action has to be defined.
If you don't have the action defined, then do this:
events: {
'keyup': 'processKey'
}
processKey: function(e) {
if(e.which === 13) // enter key
this.submit();
}

If you're having trouble capturing submit events ensure that your 'el' property is defined in your view.
var myView = Backbone.View.extend({
el: $(body),
events: {
"submit form": "doMethod"
},
doMethod: function(e) {
e.preventDefault();
console.log('form fired');
}
});

Sencha Touch FormPanel submit listener not working

I'm trying to add a listener to a Ext.form.Formpanel subelement Ext.form.BasicForm for the submit event and then reset the form via its .reset() method. In the doc at http://dev.sencha.com/deploy/touch/docs/?class=Ext.form.FormPanel it clearly states that:
submit : ( Ext.FormPanel this, Object result )
Fires upon successful (Ajax-based) form submission
But it somehow it won't really work for me.
This is my code:
var messInput = new Ext.form.FormPanel
({
fullscreen : true,
url : '/mess/',
standardSubmit : false,
listeners : {
el: {
submit: function(form, result) {
form.reset();
}
}
},
items: [
new Ext.form.Text ({
name : 'mess',
placeHolder: 'Text and #Tags',
listeners : {
keyup :function(field, event) {
var keyCode = event.browserEvent.keyCode;
if(keyCode == 51) {
console.log(event.browserEvent.keyCode);
}
}
}
})]
});
if i try it this way i get a
Uncaught TypeError: Object [object Object] has no method 'reset'
Can somebody explain what the problem is excatly here? do i need to call the parent Formpanel because i add the listener to the underlying el?

You are listening to basic js-event "submit" for the dom-element. You can't get (easily) sencha objects inside it. That's why Ext.form.FormPanel has beforeSubmit-event. The data is already collected so you can reset the form and process to ajax submit with return true;
form = new Ext.form.FormPanel({
fullscreen : true,
url : '/mess/',
listeners: {
beforesubmit: function(e, a) {
this.reset();
return true;
}
},
standardSubmit : false,
items: [
new Ext.form.Text ({
name : 'mess',
placeHolder: 'Text and #Tags',
listeners : {
keyup :function(field, event) {
var keyCode = event.browserEvent.keyCode;
if(keyCode == 51) {
console.log(event.browserEvent.keyCode);
}
}
}
})]
});
EDIT: This is the correct way, sorry about the last answer.