Develop Reference

calling wrong method ExtJS

I have this piece of code :
listeners:
{
beforerender: function()
{
if (importButton == true)
{
this.menu.add(
{
text: 'Import',
iconCls: 'importIcon',
listeners:
{
click: new ifAuthorizing('import')
}
})
}
this.menu.add(
{
text: 'Consultation',
iconCls: 'searchIcon',
listeners:
{
click: menuConsultation
}
})
}
}
that is supposed to add items to a menu when some conditions are OK.
It's working, the button are well added if the conditions matches.
The problem is coming from the
listeners:
{
click: new ifAuthorizing('import')
}
This listener is supposed to be appended to the menu item, but it is triggered during the beforerender event of its parent.
function ifAuthorizing(arg) {
console.log('import')
}
The 'import' is displayed in the console logs during the beforerender event, and then if I click on the menu item that is supposed to have a click method, nothing happens.
I would like to know why.

new ifAuthorizing('import')
Here operator new tries to create an object and interpretes ifAuthorizing as a constructor. The constructor is called immediately, that's why it fires on beforeRender event. As a result you get some object which is not a copy of function ifAuthorizing, so it can't be called on menu item's event with the desired result.

stickit doesn't save values from autocomplete fields

I have plugged autocomplete after in initialize function as advised from stickit documentation.
Almost hello world world example:
MyApp.Views.Form = Backbone.View.extend({
el: "#my-form",
bindings: {
"#postcode_with_suburbs": {
observe: "postcode",
initialize: function($el, model, options) {
$el.autocomplete({
source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ]
})
},
onSet: function(val, options) {
return $("#postcode_with_suburbs").val();
}
},
},
events: {
"click #form-submit" : "submit",
},
initialize : function() {
this.listenTo(this.model, "change");
this.render();
},
render: function() {
this.$el.html(JST['backbone/templates/car_insurance/form']);
this.stickit();
return this;
}
});
So the problem is whenever a user fills the form and autocomletes the postcode by clicking the autocomplete value it is not saved to the model attribute. Saved as ja instead of java
However scrolling down with a keyboard over the options from an autocomplete, the values is set properly to the attribute of a model. Saved as java

The stickit bindings does bind an event listener for change input keyup events on bound DOM element of type <input>. Uses the listener to update the model attribute. The element postcode_with_suburbs, in your case, being an input type should fire change event when user selects one of the option from drop down. I don't know why it is not firing the event. Try this fiddle here See the changes
select: function(event, ui) {
$(this).trigger("change", event);
}
In select event callback of autocomplete, I'm triggering change event explicitly on the element. You can also configure events: [autocompleteselect] instead of select callback.

Jquery Event handler not working when calling from page

I have written an event to save the data in a widget.js file & the handler is on the page. There is no error or exception is coming but the handler is not getting called. Please help.
Widget.js :
(function ($, undefined) {
$.widget('ui.discussionwidget', {
options: {
userID: 'arti.agarwa',
title: "",
width: "",
containerClass: ".ui-content-gutter"
},
saveData: function (userName, msg, parentID) {
//Save Discussion History
$.event.trigger({
type: "sendMessage",
userName: userName,
message: msg,
parentID: parentID,
timeStamp: new Date()
});
},
});})(jQuery);
Page Script :
$(document).ready(function () {
$('#discussionwidget').live("sendMessage", sendMessageHandler);
// sendMessage event handler
function sendMessageHandler(e) {
debugger;
alert(1);
}});

Looks like event delegation is not working fine with global events
$('#discussionwidget').on("sendMessage", sendMessageHandler);
Demo: Fiddle

I can see two possible problems:
Your widget has class discussionwidget but you are binding with id discussionwidget.
You are creating the widget dynamically with javascript? May be the event is being bound before the widget is created.
Try to fix both.

How to implement delete per row for backgrid

I've been trying to implement a "delete" button for backgrid rows. A solution seems to be described here:
How to add a custom delete option for backgrid rows
However, I don't seem to get it working. Here is what I tried:
var DeleteCell = Backgrid.Cell.extend({
template: _.template('<button>Delete</button>'),
events: {
"click": "deleteRow"
},
deleteRow: function (e) {
console.log("Hello");
e.preventDefault();
this.model.collection.remove(this.model);
},
render: function () {
this.el.html(this.template());
this.delegateEvents();
return this;
}
});
and then using it like
var columns = [{
name: "id", // The key of the model attribute
label: "ID", // The name to display in the header
editable: false, // By default every cell in a column is editable, but *ID* shouldn't be
renderable: false,
// Defines a cell type, and ID is displayed as an integer without the ',' separating 1000s.
cell: Backgrid.IntegerCell.extend({
orderSeparator: ''
})
}, {
name: "weight",
label: "Hello",
cell: DeleteCell
},{
name: "datemeasured",
label: "DateMeasured",
// The cell type can be a reference of a Backgrid.Cell subclass, any Backgrid.Cell subclass instances like *id* above, or a string
cell: "datetime" // This is converted to "StringCell" and a corresponding class in the Backgrid package namespace is looked up
},{
name: "weight",
label: "Weight",
cell: "number" // An integer cell is a number cell that displays humanized integers
}];
what I get is an error:
TypeError: this.el.html is not a function
[Break On This Error]
this.el.html(this.template());
Any suggestions?
Thanks & cheers

You are getting an exception because your trying to call the function on the wrong view property. Backbone views have two different ways to access it's el, either directly in the DOM or as a jQuery object as follows:
this.el - This is a direct reference to the DOM element.
this.$el - The jQuery object for the DOM element.
Its important to remember, that you need to call functions like append() and html() on the $el property as they are jQuery functions.

dcarson is correct of course but just to very plainly spell out the code for the render function that I was able to use to get this to work correctly, with this.$el substitued for this.el:
render: function () {
this.$el.html(this.template());
this.delegateEvents();
return this;
}

Double click event on Panel

I saw in some source code (few days ago) that a program had a dblclick event or something like that on the panel.
If you look a the docs
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Panel
under events, there are no events for clicking.
I think I saw something like
ondblclick
and then
fn: function(){...}
Why it's not in documentation and how can I fire the dblclick event on the panel?

In addition to #sra answer I would say that it is possible to assign handlers to Component's dom using element option when assigning listener:
var panel = Ext.create('Ext.panel.Panel', {
// ...
listeners: {
dblclick: function() {
// handle event
},
element: 'body'
}
});
demo

The following example will work. The double click event will get fired by the Ext.Element which can be fetched after rendering from the body param of the panel. In the example I override the afterRender method cause there is no need to register a event for that. There I register a listener to the Ext.Element of the current panel.
Ext.define('Ext.ux.panel.DCPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.dcpanel',
initComponent: function() {
this.callParent(arguments);
},
afterRender: function() {
var me = this;
me.body.on('dblclick', function() { alert('hit'); }, me);
me.callParent();
}
});
Ext.create('Ext.ux.panel.DCPanel', {
width: 300,
height: 300,
title: 'Demo',
html: 'this is my data',
renderTo: Ext.getBody()
});