I am using ExtJS 4 for my Web application development. I need to fire extjs event many time. Till now I did all stuffs without adding scope while firing event. It's working fine, but want to know what is purpose of third parameter which is scope and also it's optional. I am giving two snap-shots here. can Anyone help me to understand scope, the third parameter of on method? Thanks in advance. Sorry for my English.
store.on('load',function(store, records, successful, eOpts){
/**do some stuff here..*/
});
store.on('load',function(store, records, successful, eOpts){
/**do some stuff here..*/
},[scope]); //scope added
Look:
...
store.on({
load: {
fn: this.someFn,
scope: window
}
});
...
someFn: function(...) {
console.log(this); // output: "Window /_display/" in FF
}
If you configure scope as scope: store, then "this" in someFn === store.
E.t.c.
With your code:
store.on('load',function(store, records, successful, eOpts){
console.log(this); // output: Object { your_component_instance }
});
store.on('load',function(store, records, successful, eOpts){
console.log(this); // output: Object { store_instance }
}, store); //scope added
Related
I'm trying to add a clientEvent filter to an already working AJAX fullCalendar. The idea is to allow the visitor to filter the events already displayed by selecting a choice in a droping list.
The code is currently as follows:
jQuery(document).ready(function($) {
$('#calendar').fullCalendar({
events: function(start, end, timezone, callback) {
$.post(
MyAjax.ajaxurl,
{
action: 'get_fullcalendar',
data: {
slotbegin: start.unix(), // données à compléter
slotend: end.unix()
}
},
function( events ) {
callback( events );
}
);
},
eventRender: function(event, element) {
element.qtip({
id: 'eventdetails',
content: {
text: event.image + event.description,
title: event.title
},
});
}
});
$("#cible_select").change(function() {
var cible = $(this).val()
var events = $('#calendar').fullCalendar('clientEvents', function(evt) {
return evt.public_cible == cible;
});
});
});
The fullCalendar works OK by itself. But I don't know how to integrate the clientEvents bit so it is used when the user makes change to the #cible_select selector.
I've been trying many things for the past hours, and would appreciate some help to solve this issue.
Thanks a lot for any hint.
This function might help you. call this function where ever you want.
function parseClientEvents(/*pass params here*/){
var clientArr = $('#calendar').fullCalendar('clientEvents');
for(i in clientArr){
console.log(clientArr[i]);
//all your logic goes here.
}
return true;
}
I seem to have misunderstood the way clientEvents works. I thought it would re-display the whole calendar with the selected events only, but that's not the case.
removeEvents works to hide/suppress events one doesn't want any more, but those are not available on the client side any more, so refetchEvents has to be used if the user changes his mind and makes another choice.
removeEventSource works only if you have a limited number of sources, and I want to be able to combine several filters, so there is quite a number of combinations.
So, I'm completely rethinking my filtering strategy: clientEvents is definitely not the way to toggle on/off events on a multicriteria basis.
I am experimenting with the new way of handling page events in jqM and have run into a curious issue. When handling the pagecontainerbeforechange event
$(document).on('pagecontainerbeforechange',function(e,u){test(e,u,'changing');})
function test(e,u,msg){console.log($(u.toPage));}
Attempting to put a jQuery object wrapper around u.toPage - as done above - produces strange behavior.
Check out this fiddle to see what I mean
Click on the Second Page button and then view the console. Nothing will happen (the second page is not shown) and you will see a message along the lines of *Uncaught error:syntax error, unrecognized expression http://jsfiddle.net/egn7g5xb/1/show/#second
Now comment out Line 7 and run the fiddle again. No such issue this time and the second page gets shown.
Perhaps someone here might be able to explain what is going on here?
On initial run, jQuery Mobile creates a fake page before navigating to first page in DOM. At that stage, pagecontainerbeforechange fires twice and returns .toPage as an object.
Later on, upon navigating to other pages, it fires twice again; however, it returns a string first time (URL/hash) and second time it returns an object which is the page itself.
Therefore, when using that event, you have to determine whether .toPage is an object or a string.
$(document).on("pagecontainerbeforechange", function (e, data) {
if (typeof data.toPage == "string") {
/* parse url */
}
if (typeof data.toPage == "object") {
/* manipulate page navigating to */
}
});
Note that pagecontainerbeforetransition is similar to beforechange, however, it fires once and returns .toPage as an object.
First, create your pagecontainer events within $(document).on("pagecreate", "#first", function(){ .. }).
Then the selector for these events should be $(":mobile-pagecontainer") or $("body") NOT $(document).
function test(e,u,msg)
{
console.log(msg);
var IsJQ = u.toPage instanceof $;
console.log(IsJQ);
if (IsJQ){
console.log(u.toPage.data());
} else {
console.log(u.toPage);
}
console.log('---');
}
$(document).on("pagecreate", "#first", function(){
$(":mobile-pagecontainer").on('pagecontainerbeforechange', function (e, u) {
test(e,u,'changing');
});
$(":mobile-pagecontainer").on('pagecontainerchange',function(e,u){
test(e,u,'changed');
});
});
Updated FIDDLE
I have a BackboneJS App where I fetch a bunch of collections. Now I want to apply some sort of loader to indicate that the collection is loading and the user gets to know that something is happening. So I want to use the .ajaxStart() and .ajaxStop()-method. So I was thinking about something like this:
this.artistsCollection.fetch(
$(document).ajaxStart(function () {
console.log('ajax start');
$('.someDiv').addClass('TEST');
}),
$(document).ajaxStop(function () {
console.log('ajax stop');
// stop doing stuff
})
);
Issue is that first time I trigger the .fetch() my console says ajax stop and the class is not applied!?!? Second time I trigger the .fetch() it works like it should and the class gets applied. Does anyone know whats the issue?
Please help anyone?
You're passing the returned result of adding the two event handlers with jQuery as parameters to the Collection fetch method. The Backbone Collection fetch method receives an options object which can include a success callback (see documentation).
I think if you move the listeners out of the method call it should work as you expect:
// Global AJAX listeners
$(document).ajaxStart(function () {
console.log('ajax start');
// do stuff
});
$(document).ajaxStop(function () {
console.log('ajax stop');
// stop doing stuff
});
this.artistsCollection.fetch();
Note: I'm a total ignoramus regarding javascript.
I've broken my ExtJS 4.1 MVC app out into several controllers like:
/app/controller/Auth
| |Quiz
| |Result
| |Blah...
|model/...
I want to respond to an "event", not a DOM Event, rather a Ext.form.action.Submit.success event by calling functions in both my Auth and Quiz controllers. The summarized code for the first part is here:
// File: app/controller/Auth.js
attemptLogin : function() {
var form = Ext.ComponentQuery.query('#loginpanel')[0].form;
if (form.isValid()) {
form.submit({
success : function(form, action) {
// THIS IS THE FUNCTION FROM THE CURRENT CONTROLLER
Assessor.controller.Auth.prototype.finishLogin();
// THIS IS THE FUNCTION FROM THE OTHER CONTROLLER
Assessor.controller.Quiz.prototype.setupAssessment();
},
This works but feels wrong. Is there a proper way to do this? It seems like I should fire a unique event that is listened to by both controllers, but I can't understand how to do that with Ext.Event. Any guidance?
Thanks! I'm really grateful for all the great ideas and advice.
It makes sense to me to fire a custom event from the form and simply listen to it in both your controllers, like what you said here:
It seems like I should fire a unique event that is listened to by both
controllers
// File: app/controller/Auth.js
attemptLogin : function() {
var form = Ext.ComponentQuery.down('#loginpanel').form;
if (form.isValid()) {
form.submit({
success : function(form, action) {
// fire the event from the form panel
form.owner.fireEvent('loginsuccess', form.owner);
},
Then in each of your controllers you can listen to it with Controller#control, like this:
Ext.define('YourApp.controller.Auth', {
extend: 'Ext.app.Controller',
init: function() {
var me = this;
me.control({
'#loginpanel': {
loginsuccess: me.someHandler
}
});
},
someHandler: function(form) {
//whatever needs to be done
console.log(form);
}
}
And then add the same thing to your Quiz controller:
Ext.define('YourApp.controller.Quiz', {
extend: 'Ext.app.Controller',
init: function() {
var me = this;
me.control({
'#loginpanel': {
loginsuccess: me.someOtherHandler
}
});
},
someOtherHandler: function(form) {
//whatever needs to be done
console.log(form);
}
}
I've used this approach successfully in 4.1.0 and 4.1.1
It really should be
Assessor.controller.Auth.prototype.finishLogin.apply(this, arguments)
or something along these lines (in order to have a correct this reference that points to the 'owner' of the method, the controller object)
However, why do you use this unorthodox way to call the current controller's method. Just set the scope for the success callback, then call this.finishLogin().
form.submit({
success : function(form, action) {
// THIS IS THE FUNCTION FROM THE CURRENT CONTROLLER
this.finishLogin();
...
},
scope: this
});
Also, you can retrieve another controller instance using Controller#getController.
this.getController('Assessor.controller.quiz').setupAssignment();
Then, if your controller methods are not depending on each other, you could make them both listen to the same event.
Another solution is to fire a custom event once the login is finished. You could do that on the application object
this.application.fireEvent('logincomplete');
and in your controller's init method:
this.application.mon('logincomplete', this.setupAssignment, this);
Please note that you cannot listen to those events via Controller#control - see Alexander Tokarev's blog post for a patch to Ext to achieve this.
There is no standard way to fire events between controllers, but it's possible with some custom hacks. See my recent blog post.
I have also been looking for this and all you need is Asanda.app.getController('quiz').setupAssignment();, where Asanda is the name of your app
You should use a MessageBus if you have to send events between controllers:
Ext.define('MyApp.utils.MessageBus', {
extend : 'Ext.util.Observable'
});
store the message bus in a global var
MsgBus = Ext.create('MyApp.utils.MessageBus');
Where you have to send events:
MsgBus.fireEvent('eventName',eventArg_1,eventArg_2);
Where you have to receive events:
MsgBus.on('eventName', functionHandler,scope); //scope is not mandatory
...
functionHandler:function(eventArg_1,eventArg_2){
...
//do whatever you want
...
}
I'm getting an error when parsing checkboxes in a table that is loaded with AJAX, but I get an error saying the widget with that id is already registered:
"Error('Tried to register widget with id==userListUncheckAll but that id is already registered')"
And I'm guessing this happens because we take out the current table, then replace it with what ever we get back from the AJAX call, and thus the element id's would be the same. Is there a way to "unregister" the widgets or something similar?
I found the answer for this myself, so I'll put it here for others:
If you have a set of id's that you know will need to be "unregistered", create an array of the id names:
try {
dojo.parser.parse();
} catch (e) {
var ids = ['id1', 'id2', 'id3'];
dijit.registry.forEach(function(widget) {
//remove this check if you want to unregister all widgets
if (dojo.indexOf(ids, id) {
widget.destroyRecursive();
}
});
dojo.parser.parse();
}
Works like a charm.
Get the parent node that you are inserting the AJAX content into and parse ONLY this node. You are getting this error because other widgets in your DOM are getting parsed twice. Something like this:
require(["dojo/dom", "dojo/parser", "dojo/_base/xhr"/*, etc */ ],
function(dom, parser, xhr) {
var request = xhr.get({
// your details here
});
request.then(function(data) {
// transform data if necessary
var parentNode = dom.byId("/* parent id */");
parentNode.innerHTML = data;
// This is where the widgets get built!
parser.parse(parentNode); // or parser.parse("/* parent id */");
}, function(err) {
// handle error
});
});
Also, make sure you include the right dojo / dijit modules. A common mistake is to forget to include the modules for the widgets that you are trying to insert. For example, if you are using TabContainer, add "dijit/layout/TabContainer" to the list of required modules.
Within the Dojo Parser documentation is included this code snipet:
dojo.xhrGet({
url: "widgets.html",
load: function(data){
dojo.byId("container").innerHTML = data;
dojo.parser.parse("container");
}
})
I applied in my code and works fine.