I'm building a application with Sencha Touch 2
I want to run some code at the moment where Controllers have not been initialized yet but our app requires have already been loaded.
Looking at the Ext.app.Application source code I would really like to intercept the onProfilesLoaded call. But I just don't know how to do it.
Ok, I think I figured it out on my own. Apparently you can use the override functionality to intercept.
Ext.define('MyApp.AppOverrides', {
override: 'Ext.app.Application',
onProfilesLoaded: function(){
alert('Hey Mum, I just intercepted the call!');
this.callParent(arguments);
}
});
Related
In a big application, i now need to access some data (json api call) from asynchronously (before, those data were accessed synchronously).
I would like not to have to change components implementation to now handle this async behaviour (too risky).
I thought about $routeProvider's "resolve" feature (with promises) that helps to abstract this async behaviour out from the components/controllers.
Unfortunately i am absolutely not using routing in any way.
Is there an implementation for that? If not, where could i start?
EDIT:
how i was before (jsonData were not loaded synchronously but it was transparent thanks to systemJS features, SystemJS, Which we are throwing in garbage now, hence the question):
https://plnkr.co/edit/BSreVYNAr7sijYwEpb5G?p=preview
How i am now:
https://plnkr.co/edit/WnX0ynOqkZsmEzIxl1SI?p=preview
Watch the console to see an example of the problems that can occur now.
I kind of made it work by going like that, but i'm not completely satisfied with it (watch the config block):
https://plnkr.co/edit/P9Rv6rnboFlaFZ0OARNG?p=preview
$provide.value('$provide', $provide);
$routeProvider.otherwise({
template: '<test></test>',
controller: function ($provide, myJsonData1) {
$provide.value('myJsonData', myJsonData1);
},
resolve: {
myJsonData1: function(){
return getMyJsonData();
}
}
});
Hope this helps :)
I have a requirement that I want to add namespaces in requires conditionally.
e.g. In below example I want to add 'views.popupgrid' name space on specific condition. Currently it's always loaded.
requires: ['Ext.window.MessageBox','views.popupgrid','user.MyUser' ]
Conditional dependencies are not supported by the Sencha toolchain. While you would be able to write in a text editor of your choice
requires:[
(location.hash=='#test')?'testpopup':'normalpopup'
]
and this would work in the uncompiled version, Sencha Cmd would not be able to compile it correctly, and would throw errors.
Therefore, Sencha Architect does not support this syntax.
What you can do, while staying Standards-compliant: you can use Ext.Loader.loadScript, e.g. like this:
Ext.define('MyForm',{
extend: 'Ext.form.Panel'
initComponent:function() {
var me = this;
me.callParent(arguments);
if(x==3) Ext.Loader.loadScript({
url:'MyCustomFormComponent.js',
onLoad:function(){
me.add({
xtype:'mycustomformcomponent'
});
})
});
}
})
Please note that in this case you will always have to deliver MyCustomFormComponent.js alongside the minified app.js, because the dependency cannot be resolved by the toolchain. Also, depending on the connection, there may be a visible delay before the resource is loaded and the component is added to the form.
It is usually faster and smoother to always load the dependency, especially if you intend to deliver the app as a single minified javascript file (e.g. using Sencha Cmd).
I'm working in a Sencha application.
I've created a couple of Utilities classes as singleton components (helpers, services, etc).
I'm using alternateClassName to have a shorter name for those classes.
It works perfect, but stop working after compiling for production.
I don't know why, and need help to get this working!
Looks to the following example:
I've created a demo application using sencha cmd for simplicity. The application is "Demo".
The whole application is as default, but I've added a util folder inside app, with a single file Helper.js. This is the code:
Ext.define('Demo.util.Helper', {
singleton: true,
alternateClassName: 'Helper',
test: function () {
alert('It works !');
}
});
Then, I just need to update app.js to require this new file, and update the launch function to call test method after add the main view. So here is the code to use in app.js:
requires: [
'Ext.MessageBox',
'Demo.util.Helper'
],
The launch function:
launch: function () {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('Demo.view.Main'));
Helper.test();
},
Now, if I try the example, after load the app, an alert msg is shown successfully.
But after compile it using sencha cmd
sencha app build production
I get this error:
I know the problem is with alternate class name, because if I use the full name (instead of alternate class name), it works anyway. But I want to use alternate class name, otherwise it doesn't make any sense.
Any idea on what's wrong with compiled version ?
TIA!
Milton
After some time, we realized that Sencha has a bug when compiles singleton classes for production (works on testing also).
The solution was to remove the singleton flag, and create application variable for all of the singleton classes, in the launch method.
For example:
Demo.Helper = Ext.create('Helper');
Hope this help!
UPDATE
Last version of Sencha Cmd is full of freaking bugs!
I found a lot of other issues after fixing this ones, and finally, I found this link http://www.sencha.com/forum/showthread.php?288972-MyAppName.app-not-working-on-build-production&p=1064635
So I've inherited this extjs 4.1.3 project and I'm trying to understand it.
I've noticed that there are both Ext.require and Ext.define requires EVERYWHERE. The code is made of a lot of boilerplate code from sencha docs and I feel there is a lot of redundancy. It makes a whole lot of clutter and I feel like its wrong that when I add a file, I have to add it more than once (to Ext.require and Ext.define requires).
Couple of questions:
1) How can I tell if a require is actually ... required? From my understanding, it only tells the web page to load something now or later (this might be related to question 3). Am I guaranteed to see warnings from Ext saying "you should include abc" if those files are needed?
2) Is there any difference between Ext.require and Ext.define requires? Do I need both? If I only need one, is one more "standard" than the other?
3) What exactly does "Ext.Loader.setConfig({enabled: true});" do? I am guessing that lets ext dynamically load things if I don't specifically require them. Shouldn't I not need requires at all then? I'm not saying this is good practice, but is it true? Actually, if anything, isn't using this bad practice? You'll end up losing track of dependencies if you don't have them written down. Or do you "trust" Ext.Loader to take care of everything relating to dependencies so that you don't even have to worry about it.
The reason I ask because I thought this was true, but after the below experience, I am thinking it is not.
I thought I figured this out, but apparently my interpretation of Ext.Loader (Question 3) is wrong because if I comment out all of my requires, I get
[07:15:05.577] Error: [Ext.createByAlias] Cannot create an
instance of unrecognized alias: layout.border
If I take out 'Ext.layout.*. How come this isn't loaded dynamically if have Ext.Loader.setConfig({enabled: true})?
TLDR: I don't know when it is safe/good practice to use Ext.require/Ext.define requires. If I don't see any warnings and my app works, does that mean I'm good or is there still a chance something is being "loaded" as well as it could be? And what does Ext.Loader.setConfig({enabled: true}) do?
EDIT: Here is an example: the app.js file. It just feels to wordy doesn't it?
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', 'ux');
Ext.require([
'Ext.layout.*',
'Ext.ux.*',
'Ext.grid.*',
'APP.controller.Controller',
'APP.view.MapPanel',
'APP.view.FilterPanel',
'APP.view.Viewport'
]);
var start_app = function() {
var app = Ext.application({
name: 'APP',
appFolder: 'app',
requires: [
],
autoCreateViewport: true,
uses: [
'APP.controller.Controller',
'APP.view.MapPanel',
'APP.view.FilterPanel',
'APP.view.Viewport'
],
launch: function() {
},
controllers: [
'APP.controller.Controller'
]
});
}
In the above code you only need controllers:['Controller']. In turn, in the controller file you need views:[], stores:[] and models:[] depending on what you want the controller to pull from the server.
Another example: Let's say you code a grid and it uses number column, so you need requires:['Ext.grid.column.Number' in the grid config.
What I do is that I put there minimum I think is required, and then I watch the console. Either I get an error and I fix it or I get "Synchronous Loading" warning that I also fix.
For more details see: http://www.sencha.com/blog/countdown-to-ext-js-4-dynamic-loading-and-new-class-system
So today I just came across the 'live()' function that binds any future and past elements to the whatever event you choose, such as 'onclick'.
Right now I'm having to set up buttons like the following each time I load a new button via ajax ...
$('a.btn.plus').button({icons:{primary:'ui-icon-plusthick'}});
$('a.btn.pencil').button({icons:{primary:'ui-icon ui-icon-pencil'}});
$('a.btn.bigx').button({icons:{primary:'ui-icon ui-icon-closethick'}});
So, instead of calling these lines each time I use ajax to add a new button, is there a similar way to tell JQuery to setup my buttons ANYTIME I add new ones?
Thanks for any help!
Mmh not really. But there is the function .ajaxSuccess() which is triggered whenever an Ajax call is successful. So you could do:
$('body').ajaxSuccess(function() {
$('a.btn.plus').button({icons:{primary:'ui-icon-plusthick'}});
$('a.btn.pencil').button({icons:{primary:'ui-icon ui-icon-pencil'}});
$('a.btn.bigx').button({icons:{primary:'ui-icon ui-icon-closethick'}});
});
But this will run on any links with the classes, not only on the new ones. But if you append them on a time (i.e. not multiple a.btn.plus at once) you might be able to use the :last selector (a.btn.plus:last).
You can also create a function and just that from your callback functions:
function links() {
$('a.btn.plus').button({icons:{primary:'ui-icon-plusthick'}});
$('a.btn.pencil').button({icons:{primary:'ui-icon ui-icon-pencil'}});
$('a.btn.bigx').button({icons:{primary:'ui-icon ui-icon-closethick'}});
}
and in the Ajax call:
$.ajax({
//...
success: function(msg){
links();
}
});
This way you can pass the parent element to the function in order to find the link only inside this element (so the code would only work on the new links).
A last option would be generate a custom event but in the end this would be similar to just doing a function call in your case so you gain not much.
You can use delegate in your success function too
$("body").delegate("a.btn", "hover", function(){
$(this).toggleClass("hover");
});
There is a Jquery Plugin called livequery which covers your requirements.
I like to think of this plugin as Jquery .live() but without the need for an event ('click') etc.
You can find more info here//
Jquery - Live Query Plugin