We use extjs v4.2 and sencha touch v2.3
I'm currently working on a project that involves loading the controller dynamically. This works perfectly well in extjs for me, but I can't get the same functionality in sencha touch.
When i want to load a controller in extjs I use the following syntax
var controllerLookup = 'here.app.controller.' + controllerName;
AppName.app.getController(controllerLookup);
This then goes back to the server, downloads the controller and calls its init method.
I would like the exact same functionality in sencha touch. From reading the docs the syntax looks like it should work similarly, but i can't seem to get it to work. when i run the code in the console i just get an undefined. No call to the server like I do in extjs looking for the file. Can anyone see where I'm going wrong or if it's even possible to do in sencha touch.
Thanks
With the help of a post on the sencha forums (https://www.sencha.com/forum/showthread.php?198019-How-to-load-controllers-dynamically) I was able to get it to work. The controller now loads in dynamically and calls the init method
AppName
The name you used in Ext.Application when defining your application in app.js or equivalent.
Classpath
The full namespace to you controller file
function addControllerDynamicallyForMobile(classPath, config) {
var app = AppName.app.application,
config = config || {};
Ext.Loader.setConfig({ enabled: true });
Ext.require(classPath, function() {
var controllers = app.getControllerInstances();
if (!controllers[classPath]) {
var controller = Ext.create(classPath, Ext.apply({
application : app
}, config.options || {}));
controllers[classPath] = controller;
app.controllers.push(classPath);
controller.init();
if (config.callback) { config.callback.call((config.scope || this), config); }
}
});
};
calling this function
var controllerLookup = 'here.app.controller.' + controllerName;;
addControllerDynamicallyForMobile(controllerLookup)
Related
I have an ionic app that uses the set data structure in one of it's method. When I try to run the app on my android device(Android 5.0.2,API 21), I run into this error
ReferenceError: Set is not defined
at Object.myMethod
Here is a code snippet showing the line responsible for the error
myMethod: function(userid) {
var user = [];
var service = this;
var userIDs = new Set();
var promises = [];
...}
I am not a javascript guru but it seems to me that it might be a problem with the android web view on my device not having a built in implementation of the Set data structure. To further confuse matters, I tested this same app on another device(HTC One M8(Android 5.0.1,API 21)) and it worked fine with no errors shown. Does anybody know how to fix this?
You should try a polyfill for those devices that does not support Set:
https://github.com/medikoo/es6-set
It's not the most optimal option, but you could use dictionary with boolean values...
var userIDs = {};
userID["anyUserId"] = true;
Dojo 1.10+
I want to conditionally load custom module according to this post
Dojo FAQ: How can I conditionally load AMD modules?
require([
'dojo/has'
], function (has) {
var ui;
var moduleId = 'myApp/ui/';
// Assume 'has' tests for mobile and tablet
// have been defined
if (has('mobile')) {
moduleId += 'Mobile';
}
else if (has('tablet')) {
moduleId += 'Tablet';
}
else {
moduleId += 'Desktop';
}
require([moduleId], function (UiModule) {
ui = new UiModule();
ui.placeAt(document.body);
ui.startup();
});
});
However it seems dojo/has only detects certain dojo features. If that is the case is there an alternative method to detect if a custom module exists before attempting to require and then instantiate it if its a widget?
Yes, dojo/has only detects certain dojo features. But you can add your own, i was trying something like you are trying here, maybe not the best, but this work for me.
At boot time of your app, you can add you own features to dojo, i.e.
var deviceWidth = has('device-width'), hasTouch = has('touch');
has.add('mobile', (hasTouch && deviceWidth <=736));
has.add('tablet', (hasTouch && (deviceWidth > 736 && deviceWidth <=1024)));
and so on, so, later in another widget, you can require dojo/has and use the recently added features. Or event better, you can do this
require(['dojo/has!mobile?myApp/ui/Mobile:myApp/ui/Tablet'], function (UiModule) {
ui = new UiModule();
ui.placeAt(document.body);
ui.startup();
});
I've never tried nested dojo/has validations and i can not tell you if it works, but i've tried like in the example i'm giving you and it works.
Think that you can have in your project your own has lib extending the dojo version and adding all the features you want. For example:
//myApp/has.js
define(["dojo/has"], function(has){
has.add('myApp', true);
return has;
});.
Then later in your app you can include myApp/has and us it just like if it were the dojo version.
actually i'm a backend developer so be gentle if my question is so dumb :)
I have an Backbone app initialized like this:
var AgendaApp = Mn.Application.extend({
onStart: function() {
...
...
var bookings = new Bookings();
bookings.startStream({
remove: false
});
}
var agendaApp = ...
As you see bookings istance is staying inside onStart function scope. There is no chance to access them using debug console. For example i want to run something like this:
agendaApp.bookings.fetch()
What frontend developers doing at these stiuations?
Make the model a property of the app, e.g. this.bookings = new Bookings(). Then you can access it anywhere you have the app, e.g. agendaApp.bookings.fetch().
If my Jasmine test has failures, it only shows those by default. I have to click "Spec List" to see all of the tests that were run.
Can I somehow get it to always show the spec list by default?
I am using jasmine 2.1.3 with require.js as outlined in this stackoverflow question:
Getting requirejs to work with Jasmine
and this was bugging me too.
I am also using jquery so I added an event trigger after the .execute() like so:
require(specs, function (spec) {
jasmineEnv.execute();
$('.spec-list-menu').click();
});
I couldn't find any configuration for setting the default, but you can see in the jasmine-html.js file:
find('.failures-menu').onclick = function() {
setMenuModeTo('failure-list');
};
find('.spec-list-menu').onclick = function() {
setMenuModeTo('spec-list');
};
setMenuModeTo('failure-list');
if you changed it to:
find('.failures-menu').onclick = function() {
setMenuModeTo('failure-list');
};
find('.spec-list-menu').onclick = function() {
setMenuModeTo('spec-list');
};
setMenuModeTo('spec-list');
It will also set the default.
I don't really like editing libraries like that since I usually forget what I have changed when I update the library.
That was the reason I went with the jquery route.
i am not been able to open a existing Alloy controller within another controller .js file.
i have tried opening the controller using require method but returned exceptions.
// On click Function Index.js
function Done(e) {
if(($.user.value=="admin") && ($.pass.value=="123"))
{
alert($.user.value);
var ne = require('home');
ne.open();
$.index.close();
}
}
$.index.open();
Where Home is a Alloy Controller.
Exception Caught are :-
Thanks for Help.
If I understand correctly, you want to instantiate the 'home' controller and open its window.
var ne = Alloy.createController('home').getView();
ne.open();