Confuse with the Ext.application(..) & Ext.onReady(..) ?? Read more …
Ext.application
What differences between Ext.application(..) & Ext.onReady(..)? Basically both syntax execute the code when the page is ready.
Ext.application(…) take 1 parameter :
- config – Object
Ext.application is a mvc approach to start up an application on a single page, it has the ability to ensure all the given dependencies and configuration is loaded. Configuration refer to models: [''], controllers: [''] and etc javascript is required by the application.
Dig into source code
-
-
Ext.application=function(a){
-
Ext.require("Ext.app.Application");
-
Ext.onReady(function(){
-
Ext.create("Ext.app.Application",a)
-
})
-
};
-
From the source code and the explanation by sencha doc, Ext.onReady(..) performs add new listener to be executed when all required scripts are fully loaded.
Ext.onReady(…) take 3 parameters :
- Function – a called back function
- Object – scope of execution for callback function
- Boolean – boolean value to represent wait for document ready
Basically it doesn’t care the dependencies library as long as page is ready. Unless we provided Ext.required(..) before the statement to ensure all the dependencies libary is loaded.
Example – Ext.onReady(..)
Ext.onReady(..) detect the page is loaded and DOM is ready for a UI. It has less memory consume and suit for simple UI display and has better performance.
-
-
Ext.onReady(function() {
-
var window = Ext.createWidget(‘window’, {
-
width : 500,
-
height : 300,
-
layout : {
-
type : ‘border’,
-
padding : 5
-
},
-
title : ‘Hello dialog’,
-
items : [{
-
title : ‘Nagivateion’,
-
collapsible : true,
-
region : ‘west’,
-
width : 200,
-
html : ‘Hello’,
-
split : true
-
},{
-
title : ‘TabPanel’,
-
region : ‘center’
-
}]
-
});
-
window.show();
-
});
-
Analyze Ext.onReady(..) behaviour
1) Open the firefox and install the firebug browse to the http://localhost/example/
2) Click on the console from the firebug you will notices a lot of the message are show.
3) Observe the console that all the required library will loaded when it’s needed.
Analyze Ext.application(..) behaviour
-
-
Ext.application
-
({
-
name : ‘Example’,
-
launch: function() {
-
var window = Ext.createWidget(‘window’, {
-
width : 500,
-
height : 300,
-
layout : {
-
type : ‘border’,
-
padding : 5
-
},
-
title : ‘Hello dialog’,
-
items : [{
-
title : ‘Nagivateion’,
-
collapsible : true,
-
region : ‘west’,
-
width : 200,
-
html : ‘Hello’,
-
split : true
-
},{
-
title : ‘TabPanel’,
-
region : ‘center’
-
}]
-
});
-
window.show();
-
}
-
});
Replace the code and observe the browser console again. Only ‘Ext.layout.container.Border’ is loaded in dynamic.
If you want to ensure everything is loaded, you can add the Ext.required(..) before the name attribute, observe the console again, no library will dynamic loading in this time.
-
name : ‘Example’,
-
requires : [‘Ext.layout.container.Border’],
-
launch: function() {
-
…
Conclusion
Use Ext.application if you have a mvc application and display on the single page.
Use Ext.onReady(..) for performance and only few component display. Such as with any existing HTML page you had for simple UI interaction.
A typical example are show in below “Button click” on this page
-
-
Ext.get(‘ext’).on(‘click’, function(){
-
alert("You clicked the button");
-
});
-
-
-
Ext.onReady(function() {
-
Ext.get(‘window’).on(‘click’, function(){
-
width:400,
-
height:200,
-
title:"Ext Window",
-
html: " ExtJs window "
-
});
-
win.show();
-
});
-
});
-
Download the example here
Posted in 
