Develop Reference

Access event object from Backbone Marionette ItemView trigger

I have the code below. I want to on <Enter> of the input#editTodo, I want to save the model (Todo). I figured I need to listen to the keypress event then check that the keycode is 13, if so I save the model ...
TodoView = Backbone.Marionette.ItemView.extend({
triggers: {
"keypress #editTodo": "detectEnterAndSave"
},
initialize: function() {
this.on("detectEnterAndSave", function(e) {
console.log(e);
});
But I cant seem to get the event object? If so how do I know what key is pressed?

events: {
'keypress #editTodo' : 'detectEnterAndSave'
},
detectEnterAndSave : function(e) {
if (e.which === 13) {
// do something
}
}

About Jeditable jquery plugin in the context of Backbone.View

Using the Jeditable plugin,
is possible to create, very easily, a submit and cancel button.
Here's a very simple code example (*)
Now let's suppose in MyView (Backbone.View) I would like to trigger the event click on the button submit which is created by Jeditable.
Here's the code regarding the Backbone.View (**).
When I trigger the event "click .submitBtn" the value of $('.edit_area').text is empty string.
In order to fix this issue I implemented the following code (* **)
Do you have some smart idea to improve the code of (* **)? I don't like callback using setTimeout.
(*)
$('.edit_area').editable(function(value, settings) {
return(value);
}, {
type : 'textarea',
submit : '<div class="submitBtn">Ok</div>'
cancel : '<div class="submitBtn">Undo</div>'
});
(**)
MyView = Backbone.View.extend({
events: {
"click .edit_area" : "edit",
"click .submitBtn" : "close"
},
});
(* **)
close: function close ()
{
var that = this;
console.log($(this.el).find("[data-tid='editable']").text()); // empty string
setTimeout(function () {
console.log($(that.el).find("[data-tid='editable']").text()); // update string
that.model.save({
name: $(that.el).find("[data-tid='editable']").text()
});
}, 0);
},

in the initialize function
$('.edit_area').editable(this.close, {
type : 'textarea',
submit : 'OK',
});
Close function definition
close:function(value, settings) {
this.model.save({
name: value
});
});
Complete Code
var editableview = Backbone.View.extend({
initialize: function () {
_.bind(this.close, this);
},
render: function () {
$(this.el).find('.edit_area').editable(this.close, {
type: 'textarea',
submit: '<div class="submitBtn">Ok</div>'
cancel: '<div class="submitBtn">Undo</div>'
});
},
close: function (value, settings) {
this.model.save({
name: value
});
});
});

Var That = This is wrong. This is the DOM not the backbone view. You can do:
$('.edit_area').editable(this.close, {
type : 'textarea',
submit : 'OK',
submitdata: {view: this},
});
"view" in the hash would be the backbone view. It can be accessed in the close function.
close:function(value, settings) {
settings.submitdata.view.model.save({
name: value
});
});

"el" listener not working in Sencha Touch 2

I'm using Sencha Touch 2.0-pr3. I'm having trouble getting the element tap event to work (note that BrowsePage extends Ext.Panel). I'm confused cause this works in Sencha Touch 1. What's changed?!
var resultsPage = Ext.create('bla.myapp.BrowsePage', {
id: 'searchResults',
html: str,
listeners: {
el: {
tap: function() {
console.log('hi!');
}
}
}
})

Ext.Panel does not fire the 'tap' event.
Have a look at the Sencha Touch 2 API docs to see which events which classes fire:
http://docs.sencha.com/touch/2-0/#!/api/Ext.Panel

Someone answered my questions here: http://www.sencha.com/forum/showthread.php?161806-%E2%80%9Cel%E2%80%9D-listener-not-working-in-Sencha-Touch-2&p=691670&viewfull=1#post691670
It's not in ST2 yet, so for now override initialize() --
initialize: function() {
this.callParent();
this.element.on({
...
});
}

try this
var resultsPage = Ext.create('bla.myapp.BrowsePage', {
id: 'searchResults',
html: str,
listeners: {
tap: {
element: 'element',
fn: function(e) {
console.log('hi!');
}
}
}
})

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.

Button click event Ext JS

I have the simple form:
myForm = new Ext.form.FormPanel({
width:'100%',
frame:false,
items: [
new Ext.form.TextArea({
id:'notes',
name: 'notes',
hideLabel: true,
width:350,
height:200
})
],
buttons: [
{
text:"Save",
click: function (b,e) {
alert('x');
}
}
]
});
However I am having trouble getting the click event of the button to work. Do buttons created the following way have the same functionality of doing Ext.Button?

You either need
a) The handler option (a click shortcut)
new Ext.Button({
handler: function(){
// ....
}
});
b) Event listeners need to be registered in in a listeners block, so
new Ext.Button({
listeners: {
click: function(){
// ...
}
}
});
A) is preferred.