Hierarchy
Ext.BaseExt.app.ControllerExt.app.ApplicationInherited mixins
Requires
Files
Ext.app.Application defines the set of Models, Controllers, Profiles, Stores and Views that an application consists of. It automatically loads all of those dependencies and can optionally specify a launch function that will be called when everything is ready.
Sample usage:
Ext.application({
name: 'MyApp',
models: ['User', 'Group'],
stores: ['Users'],
controllers: ['Users'],
views: ['Main', 'ShowUser'],
launch: function() {
Ext.create('MyApp.view.Main');
}
});
Creating an Application instance is the only time in Sencha Touch that we don't use Ext.create to create the new instance. Instead, the Ext.application function instantiates an Ext.app.Application internally, automatically loading the Ext.app.Application class if it is not present on the page already and hooking in to Ext.onReady before creating the instance itself. An alternative is to use Ext.create inside an Ext.onReady callback, but Ext.application is preferred.
Application follows a simple convention when it comes to specifying the controllers, views, models, stores and profiles it requires. By default it expects each of them to be found inside the app/controller, app/view, app/model, app/store and app/profile directories in your app - if you follow this convention you can just specify the last part of each class name and Application will figure out the rest for you:
Ext.application({
name: 'MyApp',
controllers: ['Users'],
models: ['User', 'Group'],
stores: ['Users'],
views: ['Main', 'ShowUser']
});
The example above will load 6 files:
For larger apps it's common to split the models, views and controllers into subfolders to keep the project organized. This is especially true of views - it's not unheard of for large apps to have over a hundred separate view classes so organizing them into folders can make maintenance much simpler.
To specify dependencies in subfolders just use a period (".") to specify the folder:
Ext.application({
name: 'MyApp',
controllers: ['Users', 'nested.MyController'],
views: ['products.Show', 'products.Edit', 'user.Login']
});
In this case these 5 files will be loaded:
Note that we can mix and match within each configuration here - for each model, view, controller, profile or store you can specify either just the final part of the class name (if you follow the directory conventions), or the full class name.
Finally, we can specify application dependencies from outside our application by fully-qualifying the classes we want to load. A common use case for this is sharing authentication logic between multiple applications. Perhaps you have several apps that login via a common user database and you want to share that code between them. An easy way to do this is to create a folder alongside your app folder and then add its contents as dependencies for your app.
For example, let's say our shared login code contains a login controller, a user model and a login form view. We want to use all of these in our application:
Ext.Loader.setPath({
'Auth': 'Auth'
});
Ext.application({
views: ['Auth.view.LoginForm', 'Welcome'],
controllers: ['Auth.controller.Sessions', 'Main'],
models: ['Auth.model.User']
});
This will load the following files:
The first three were loaded from outside our application, the last two from the application itself. Note how we can still mix and match application files and external dependency files.
Note that to enable the loading of external dependencies we just have to tell the Loader where to find those files, which is what we do with the Ext.Loader.setPath call above. In this case we're telling the Loader to find any class starting with the 'Auth' namespace inside our 'Auth' folder. This means we can drop our common Auth code into our application alongside the app folder and the framework will be able to figure out how to load everything.
Each Application can define a launch function, which is called as soon as all of your app's classes have been loaded and the app is ready to be launched. This is usually the best place to put any application startup logic, typically creating the main view structure for your app.
In addition to the Application launch function, there are two other places you can put app startup logic. Firstly, each Controller is able to define an init function, which is called before the Application launch function. Secondly, if you are using Device Profiles, each Profile can define a launch function, which is called after the Controller init functions but before the Application launch function.
Note that only the active Profile has its launch function called - for example if you define profiles for Phone and Tablet and then launch the app on a tablet, only the Tablet Profile's launch function is called.
When using Profiles it is common to place most of the bootup logic inside the Profile launch function because each Profile has a different set of views that need to be constructed at startup.
iOS devices allow your users to add your app to their home screen for easy access. iOS allows you to customize several aspects of this, including the icon that will appear on the home screen and the startup image. These can be specified in the Ext.application setup block:
Ext.application({
name: 'MyApp',
icon: 'resources/img/icon.png',
isIconPrecomposed: false,
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'640x1096': 'resources/startup/640x1096.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
}
});
When the user adds your app to the home screen, your resources/img/icon.png file will be used as the application icon. We also used the isIconPrecomposed configuration to turn off the gloss effect that is automatically added to icons in iOS. Finally we used the startupImage configuration to provide the images that will be displayed while your application is starting up. See also statusBarStyle.
If you are not already familiar with writing applications with Sencha Touch we recommend reading the intro to applications guide, which lays out the core principles of writing apps with Sencha Touch.
The path to the directory which contains all application's classes. This path will be registered via Ext.Loader.setPath for the namespace specified in the name config.
Defaults to: 'app'
The Application instance this Controller is attached to. This is automatically provided when using the MVC architecture so should rarely need to be set directly.
Defaults to: {}
Provides a mapping of Controller functions to filter functions that are run before them when dispatched to from a route. These are usually used to run pre-processing functions like authentication before a certain function is executed. They are only called when dispatching from a route. Example usage:
Ext.define('MyApp.controller.Products', {
config: {
before: {
editProduct: 'authenticate'
},
routes: {
'product/edit/:id': 'editProduct'
}
},
//this is not directly because our before filter is called first
editProduct: function() {
//... performs the product editing logic
},
//this is run before editProduct
authenticate: function(action) {
MyApp.authenticate({
success: function() {
action.resume();
},
failure: function() {
Ext.Msg.alert('Not Logged In', "You can't do that, you're not logged in");
}
});
}
});
Defaults to: {}
The event name to bubble, or an Array of event names.
The event name to bubble, or an Array of event names.
Provides a mapping of Controller functions that should be called whenever certain Component events are fired. The Components can be specified using ComponentQuery selectors or refs. Example usage:
control: {
'button[action=logout]': {
tap: 'doLogout'
},
main: {
activeitemchange: 'doUpdate'
}
}
The first item uses a ComponentQuery selector to run the Controller's doLogout function whenever any Button with action=logout is tapped on. The second calls the Controller's doUpdate function whenever the activeitemchange event is fired by the Component referenced by our 'main' ref. In this case main is a tab panel (see refs for how to set that reference up).
Defaults to: {}
Used internally as the collection of instantiated controllers. Use getController instead.
Defaults to: []
The set of controllers to load for this Application. Each controller is expected to exist inside the app/controller directory and define a class following the convention AppName.controller.ControllerName. For example, in the code below, the classes AppName.controller.Users, AppName.controller.Groups and AppName.controller.Products will be loaded. Note that we are able to specify either the full class name (as with AppName.controller.Products) or just the final part of the class name and leave Application to automatically prepend AppName.controller.' to each:
controllers: [
'Users',
'Groups',
'AppName.controller.Products',
'SomeCustomNamespace.controller.Orders'
]
Defaults to: []
The Profile that is currently active for the Application. This is set once, automatically by the Application before launch.
Private config to disable loading of Profiles at application construct time. This is used by Sencha's unit test suite to test Application.js in isolation and is likely to be removed in favor of a more pleasing solution by the time you use it.
Defaults to: true
If set to false
, the 'gloss' effect added to home screen icons on
iOS devices will be removed.
This cfg has been deprecated since 2.0.0
Please use the isIconPrecomposed configuration instead.
The global History instance attached to this Application. For more information, see Routing, Deep Linking, and the Back Button.
Defaults to: {}
Specifies a set of URLs to the application icon for different device form factors. This icon is displayed when the application is added to the device's Home Screen.
Ext.setup({
icon: {
57: 'resources/icons/Icon.png',
72: 'resources/icons/Icon~ipad.png',
114: 'resources/icons/Icon@2x.png',
144: 'resources/icons/Icon~ipad@2x.png'
},
onReady: function() {
// ...
}
});
Each key represents the dimension of the icon as a square shape. For example: '57' is the key for a 57 x 57 icon image. Here is the breakdown of each dimension and its device target:
Note that the dimensions of the icon images must be exactly 57x57, 72x72, 114x114 and 144x144 respectively.
It is highly recommended that you provide all these different sizes to accommodate a full range of devices currently available. However if you only have one icon in one size, make it 57x57 in size and specify it as a string value. This same icon will be used on all supported devices.
Ext.application({
icon: 'resources/icons/Icon.png',
launch: function() {
// ...
}
});
Called by the Controller's application to initialize the Controller. This is always called before the Application launches, giving the Controller a chance to run any pre-launch logic. See also launch, which is called after the Application's launch function
true
to not having a glossy effect added to the icon by the OS, which will preserve its exact look. This currently
only applies to iOS devices.
An optional function that will be called when the Application is ready to be launched. This is normally used to render any initial UI required by your application
Overrides: Ext.app.Controller.launch
A config object containing one or more event handlers to be added to this object during initialization. This
should be a valid listeners config
object as specified in the addListener example for attaching
multiple handlers at once.
See the Event guide for more
Note: It is bad practice to specify a listener's config
when you are defining a class using Ext.define()
.
Instead, only specify listeners when you are instantiating your class with Ext.create()
.
The set of models to load for this Application. Each model is expected to exist inside the app/model directory and define a class following the convention AppName.model.ModelName. For example, in the code below, the classes AppName.model.User, AppName.model.Group and AppName.model.Product will be loaded. Note that we are able to specify either the full class name (as with AppName.model.Product) or just the final part of the class name and leave Application to automatically prepend AppName.model. to each:
models: [
'User',
'Group',
'AppName.model.Product',
'SomeCustomNamespace.model.Order'
]
Defaults to: []
The name of the Application. This should be a single word without spaces or periods because it is used as the Application's global namespace. All classes in your application should be namespaced under the Application's name - for example if your application name is 'MyApp', your classes should be named 'MyApp.model.User', 'MyApp.controller.Users', 'MyApp.view.Main' etc
Path to the .png image file to use when your app is added to the home screen on an iOS phone device (iPhone or iPod).
This cfg has been deprecated since 2.0.0
Please use the icon configuration instead.
Path to the .png image file that will be displayed while the app is starting up once it has been added to the home screen of an iOS phone device (iPhone or iPod). This .png file should be 320px wide and 460px high.
This cfg has been deprecated since 2.0.0
Please use the startupImage configuration instead.
Used internally as the collection of instantiated profiles.
Defaults to: []
The set of profiles to load for this Application. Each profile is expected to exist inside the app/profile directory and define a class following the convention AppName.profile.ProfileName. For example, in the code below, the classes AppName.profile.Phone and AppName.profile.Tablet will be loaded. Note that we are able to specify either the full class name (as with AppName.profile.Tablet) or just the final part of the class name and leave Application to automatically prepend AppName.profile.' to each:
profiles: [
'Phone',
'AppName.profile.Tablet',
'SomeCustomNamespace.profile.Desktop'
]
Defaults to: []
A collection of named ComponentQuery selectors that makes it easy to get references to key Components on your page. Example usage:
refs: {
main: '#mainTabPanel',
loginButton: '#loginWindow button[action=login]',
infoPanel: {
selector: 'infopanel',
xtype: 'infopanel',
autoCreate: true
}
}
The first two are simple ComponentQuery selectors, the third (infoPanel) also passes in the autoCreate and xtype options, which will first run the ComponentQuery to see if a Component matching that selector exists on the page. If not, it will automatically create one using the xtype provided:
someControllerFunction: function() {
//if the info panel didn't exist before, calling its getter will instantiate
//it automatically and return the new instance
this.getInfoPanel().show();
}
Defaults to: {}
An array of extra dependencies, to be required after this application's name config has been processed properly, but before anything else to ensure overrides get executed first.
Defaults to: []
The global Router instance attached to this Application.
Defaults to: {}
Provides a mapping of urls to Controller actions. Whenever the specified url is matched in the address bar, the specified Controller action is called. Example usage:
routes: {
'login': 'showLogin',
'users/:id': 'showUserById'
}
The first route will match against http://myapp.com/#login and call the Controller's showLogin function. The second route contains a wildcard (':id') and will match all urls like http://myapp.com/#users/123, calling the showUserById function with the matched ID as the first argument.
Defaults to: {}
Specifies a set of URLs to the application startup images for different device form factors. This image is displayed when the application is being launched from the Home Screen icon. Note that this currently only applies to iOS devices.
Ext.application({
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'640x1096': 'resources/startup/640x1096.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},
launch: function() {
// ...
}
});
Each key represents the dimension of the image. For example: '320x460' is the key for a 320px x 460px image. Here is the breakdown of each dimension and its device target:
Please note that there's no automatic fallback mechanism for the startup images. In other words, if you don't specify a valid image for a certain device, nothing will be displayed while the application is being launched on that device.
Allows you to set the style of the status bar when your app is added to the home screen on iOS devices. Alternative is to set to 'black-translucent', which turns the status bar semi-transparent and overlaps the app content. This is usually not a good option for web apps
Defaults to: 'black'
The set of stores to load for this Application. Each store is expected to exist inside the app/store directory and define a class following the convention AppName.store.StoreName. For example, in the code below, the AppName.store.Users class will be loaded. Note that we are able to specify either the full class name (as with AppName.store.Groups) or just the final part of the class name and leave Application to automatically prepend AppName.store.' to each:
stores: [
'Users',
'AppName.store.Groups',
'SomeCustomNamespace.store.Orders'
]
Defaults to: []
Path to the .png image file to use when your app is added to the home screen on an iOS tablet device (iPad).
This cfg has been deprecated since 2.0.0
Please use the icon configuration instead.
Path to the .png image file that will be displayed while the app is starting up once it has been added to the home screen of an iOS tablet device (iPad). This .png file should be 768px wide and 1004px high.
This cfg has been deprecated since 2.0.0
Please use the startupImage configuration instead.
A string to determine the variation on the current theme being used. This string will be prefixed by themeVariationPrefix and the resulting string will be added to the HTML tag of your application. If a function is provided that function must return a string.
//This will result in 'x-theme-variation-dark' being added as a class to the html tag of your application MyApp.app.setThemeVariation("dark");
Used only with themeVariation this prefix will be added before the variation as a class on the HTML tag of your application.
Defaults to: Ext.baseCSSPrefix + 'theme-variation-'
This is only used with themeVariation. The Class provided will be added to the HTML tag then removed once the transition is complete. The duration of this delayed removal is parsed from the class itself, for example if the class has the property 'transition: color 4s, background 6s, background-color 1s' the delay will be 6s (the largest time used in that class.
The set of views to load for this Application. Each view is expected to exist inside the app/view directory and define a class following the convention AppName.view.ViewName. For example, in the code below, the classes AppName.view.Users, AppName.view.Groups and AppName.view.Products will be loaded. Note that we are able to specify either the full class name (as with AppName.view.Products) or just the final part of the class name and leave Application to automatically prepend AppName.view. to each:
views: [
'Users',
'Groups',
'AppName.view.Products',
'SomeCustomNamespace.view.Orders'
]
Defaults to: []
Defaults to: {id: 'observable', hooks: {destroy: 'destroy'}}
Overrides: Ext.mixin.Sortable.mixinConfig
Get the reference to the current class from which this object was instantiated. Unlike statics,
this.self
is scope-dependent and it's meant to be used for dynamic inheritance. See statics
for a detailed comparison
Ext.define('My.Cat', {
statics: {
speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
},
constructor: function() {
alert(this.self.speciesName); // dependent on 'this'
},
clone: function() {
return new this.self();
}
});
Ext.define('My.SnowLeopard', {
extend: 'My.Cat',
statics: {
speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'
}
});
var cat = new My.Cat(); // alerts 'Cat'
var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard'
var clone = snowLeopard.clone();
alert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'
Constructs a new Application instance.
Overrides: Ext.app.Controller.constructor
Appends an after-event handler.
Same as addListener with order
set to 'after'
.
The name of the event to listen for.
The method the event invokes.
The scope for fn
.
An object containing handler configuration.
Appends a before-event handler. Returning false
from the handler will stop the event.
Same as addListener with order
set to 'before'
.
The name of the event to listen for.
The method the event invokes.
The scope for fn
.
An object containing handler configuration.
Adds the specified events to the list of events which this Observable may fire.
This method has been deprecated since 2.0
It's no longer needed to add events before firing.
Appends an event handler to this object. You can review the available handlers by looking at the 'events' section of the documentation for the component you are working with.
Using the options argument, it is possible to combine different types of listeners:
A delayed, one-time listener:
container.addListener('tap', this.handleTap, this, {
single: true,
delay: 100
});
The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example:
container.addListener({
tap : this.onTap,
swipe: this.onSwipe,
scope: this // Important. Ensure "this" is correct during handler execution
});
One can also specify options for each event handler separately:
container.addListener({
tap : { fn: this.onTap, scope: this, single: true },
swipe: { fn: button.onSwipe, scope: button }
});
See the Events Guide for more.
The name of the event to listen for. May also be an object who's property names are event names.
The method the event invokes. Will be called with arguments given to
fireEvent plus the options
parameter described below.
The scope (this
reference) in which the handler function is executed. If
omitted, defaults to the object which fired the event.
An object containing handler configuration.
This object may contain any of the following properties:
The scope (this
reference) in which the handler function is executed. If omitted, defaults to the object
which fired the event.
The number of milliseconds to delay the invocation of the handler after the event fires.
true
to add a handler to handle just the next firing of the event, and then remove itself.
The order of when the listener should be added into the listener queue.
If you set an order of before
and the event you are listening to is preventable, you can return false
and it will stop the event.
Available options are before
, current
and after
.
Defaults to: current
Causes the handler to be delayed by the specified number of milliseconds. If the event fires again within that time, the original handler is not invoked, but the new handler is scheduled in its place.
Allows you to add a listener onto a element of this component using the elements reference.
Ext.create('Ext.Component', {
listeners: {
element: 'element',
tap: function() {
alert('element tap!');
}
}
});
All components have the element
reference, which is the outer most element of the component. Ext.Container also has the
innerElement
element which contains all children. In most cases element
is adequate.
Uses Ext.ComponentQuery to delegate events to a specified query selector within this item.
// Create a container with a two children; a button and a toolbar
var container = Ext.create('Ext.Container', {
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'My Toolbar'
},
{
xtype: 'button',
text: 'My Button'
}
]
});
container.addListener({
// Ext.Buttons have an xtype of 'button', so we use that are a selector for our delegate
delegate: 'button',
tap: function() {
alert('Button tapped!');
}
});
The order of when the listener should be added into the listener queue.
Possible values are before
, current
and after
.
Defaults to: 'current'
Adds listeners to any Observable object (or Element) which are automatically removed when this Component is destroyed.
This method has been deprecated since 2.0
All listeners are now automatically managed where necessary. Simply use addListener.
The item to which to add a listener/listeners.
The event name, or an object containing event name properties.
If the eventName
parameter was an event name, this is the handler function.
If the eventName
parameter was an event name, this is the scope in which
the handler function is executed.
If the eventName
parameter was an event name, this is the
addListener options.
Massages the before filters into an array of function references for each controller action
As a convenience developers can locally qualify controller names (e.g. 'MyController' vs 'MyApp.controller.MyController'). This just makes sure everything ends up fully qualified
As a convenience developers can locally qualify model names (e.g. 'MyModel' vs 'MyApp.model.MyModel'). This just makes sure everything ends up fully qualified
Checks that the name configuration has any whitespace, and trims them if found.
As a convenience developers can locally qualify profile names (e.g. 'MyProfile' vs 'MyApp.profile.MyProfile'). This just makes sure everything ends up fully qualified
Adds any routes specified in this Controller to the global Application router
As a convenience developers can locally qualify store names (e.g. 'MyStore' vs 'MyApp.store.MyStore'). This just makes sure everything ends up fully qualified
As a convenience developers can locally qualify view names (e.g. 'MyView' vs 'MyApp.view.MyView'). This just makes sure everything ends up fully qualified
Call the original method that was previously overridden with override,
This method is deprecated as callParent does the same thing.
Ext.define('My.Cat', {
constructor: function() {
alert("I'm a cat!");
}
});
My.Cat.override({
constructor: function() {
alert("I'm going to be a cat!");
var instance = this.callOverridden();
alert("Meeeeoooowwww");
return instance;
}
});
var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
// alerts "I'm a cat!"
// alerts "Meeeeoooowwww"
The arguments, either an array or the arguments
object
from the current method, for example: this.callOverridden(arguments)
Returns the result of calling the overridden method
Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see Ext.define).
Ext.define('My.Base', {
constructor: function (x) {
this.x = x;
},
statics: {
method: function (x) {
return x;
}
}
});
Ext.define('My.Derived', {
extend: 'My.Base',
constructor: function () {
this.callParent([21]);
}
});
var obj = new My.Derived();
alert(obj.x); // alerts 21
This can be used with an override as follows:
Ext.define('My.DerivedOverride', {
override: 'My.Derived',
constructor: function (x) {
this.callParent([x*2]); // calls original My.Derived constructor
}
});
var obj = new My.Derived();
alert(obj.x); // now alerts 42
This also works with static methods.
Ext.define('My.Derived2', {
extend: 'My.Base',
statics: {
method: function (x) {
return this.callParent([x*2]); // calls My.Base.method
}
}
});
alert(My.Base.method(10)); // alerts 10
alert(My.Derived2.method(10)); // alerts 20
Lastly, it also works with overridden static methods.
Ext.define('My.Derived2Override', {
override: 'My.Derived2',
statics: {
method: function (x) {
return this.callParent([x*2]); // calls My.Derived2.method
}
}
});
alert(My.Derived2.method(10)); // now alerts 40
To override a method and replace it and also call the superclass method, use callSuper. This is often done to patch a method to fix a bug.
The arguments, either an array or the arguments
object
from the current method, for example: this.callParent(arguments)
Returns the result of calling the parent method
This method is used by an override to call the superclass method but bypass any overridden method. This is often done to "patch" a method that contains a bug but for whatever reason cannot be fixed directly.
Consider:
Ext.define('Ext.some.Class', {
method: function () {
console.log('Good');
}
});
Ext.define('Ext.some.DerivedClass', {
method: function () {
console.log('Bad');
// ... logic but with a bug ...
this.callParent();
}
});
To patch the bug in DerivedClass.method
, the typical solution is to create an
override:
Ext.define('App.paches.DerivedClass', {
override: 'Ext.some.DerivedClass',
method: function () {
console.log('Fixed');
// ... logic but with bug fixed ...
this.callSuper();
}
});
The patch method cannot use callParent
to call the superclass method
since
that would call the overridden method containing the bug. In other words, the
above patch would only produce "Fixed" then "Good" in the console log, whereas,
using callParent
would produce "Fixed" then "Bad" then "Good".
The arguments, either an array or the arguments
object
from the current method, for example: this.callSuper(arguments)
Returns the result of calling the superclass method
Dispatches a given Ext.app.Action to the relevant Controller instance. This is not usually called directly by the developer, instead Sencha Touch's History support picks up on changes to the browser's url and calls dispatch automatically.
The action to dispatch.
Sets the browser's url to the action's url.
Defaults to: true
Executes an Ext.app.Action by giving it the correct before filters and kicking off execution
Fires the specified event with the passed parameters and execute a function (action)
at the end if there are no listeners that return false
.
The name of the event to fire.
Arguments to pass to handers.
Action.
Scope of fn.
Fires the specified event with the passed parameters (minus the event name, plus the options
object passed
to addListener).
The first argument is the name of the event. Every other argument passed will be available when you listen for the event.
Firstly, we set up a listener for our new event.
this.on('myevent', function(arg1, arg2, arg3, arg4, options, e) {
console.log(arg1); // true
console.log(arg2); // 2
console.log(arg3); // { test: 'foo' }
console.log(arg4); // 14
console.log(options); // the options added when adding the listener
console.log(e); // the event object with information about the event
});
And then we can fire off the event.
this.fireEvent('myevent', true, 2, { test: 'foo' }, 14);
An event may be set to bubble up an Observable parent hierarchy by calling enableBubble.
The name of the event to fire.
Variable number of parameters are passed to handlers.
Returns false
if any of the handlers return false
.
Gathers up all of the previously computed MVCS dependencies into a single array that we can pass to Ext.require.
Returns the Controller instance for the given controller name.
The name of the Controller.
Optional profile name. If passed, this is the same as calling
getController('profileName.controllerName')
.
controller instance or undefined.
Overrides: Ext.app.Controller.getController
Returns the fully qualified name for any class name variant. This is used to find the FQ name for the model, view, controller, store and profiles listed in a Controller or Application.
The array of strings to get the FQ name for
If the name happens to be an application class, add it to this namespace
The fully-qualified name of the class
Retrieves the id of this component. Will autogenerate an id if one has not already been set.
id
Initialize configuration for this class. a typical example:
Ext.define('My.awesome.Class', {
// The default config
config: {
name: 'Awesome',
isAwesome: true
},
constructor: function(config) {
this.initConfig(config);
}
});
var awesome = new My.awesome.Class({
name: 'Super Awesome'
});
alert(awesome.getName()); // 'Super Awesome'
mixins The mixin prototypes as key - value pairs
Called once all of our controllers have been loaded
Should be called after dependencies are loaded, instantiates all of the Stores specified in the stores
config. For each item in the stores array we make sure the Store is instantiated. When strings are specified,
the corresponding app/store/StoreName.js was loaded so we now instantiate a MyApp.store.StoreName
, giving it the
id StoreName
.
Controllers can also specify dependencies, so we grab them all here and require them.
Alias for addManagedListener.
This method has been deprecated since 2.0.0
This is now done automatically
The item to which to add a listener/listeners.
The event name, or an object containing event name properties.
If the eventName
parameter was an event name, this is the handler function.
If the eventName
parameter was an event name, this is the scope in which
the handler function is executed.
If the eventName
parameter was an event name, this is the
addListener options.
Alias for removeManagedListener.
This method has been deprecated since 2.0.0
This is now done automatically
The item to which to add a listener/listeners.
The event name, or an object containing event name properties.
If the eventName
parameter was an event name, this is the handler function.
If the eventName
parameter was an event name, this is the scope in which
the handler function is executed.
Alias for addListener.
The name of the event to listen for. May also be an object who's property names are event names.
The method the event invokes. Will be called with arguments given to
fireEvent plus the options
parameter described below.
The scope (this
reference) in which the handler function is executed. If
omitted, defaults to the object which fired the event.
An object containing handler configuration.
This object may contain any of the following properties:
The scope (this
reference) in which the handler function is executed. If omitted, defaults to the object
which fired the event.
The number of milliseconds to delay the invocation of the handler after the event fires.
true
to add a handler to handle just the next firing of the event, and then remove itself.
The order of when the listener should be added into the listener queue.
If you set an order of before
and the event you are listening to is preventable, you can return false
and it will stop the event.
Available options are before
, current
and after
.
Defaults to: current
Causes the handler to be delayed by the specified number of milliseconds. If the event fires again within that time, the original handler is not invoked, but the new handler is scheduled in its place.
Allows you to add a listener onto a element of this component using the elements reference.
Ext.create('Ext.Component', {
listeners: {
element: 'element',
tap: function() {
alert('element tap!');
}
}
});
All components have the element
reference, which is the outer most element of the component. Ext.Container also has the
innerElement
element which contains all children. In most cases element
is adequate.
Uses Ext.ComponentQuery to delegate events to a specified query selector within this item.
// Create a container with a two children; a button and a toolbar
var container = Ext.create('Ext.Container', {
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'My Toolbar'
},
{
xtype: 'button',
text: 'My Button'
}
]
});
container.addListener({
// Ext.Buttons have an xtype of 'button', so we use that are a selector for our delegate
delegate: 'button',
tap: function() {
alert('Button tapped!');
}
});
The order of when the listener should be added into the listener queue.
Possible values are before
, current
and after
.
Defaults to: 'current'
Callback that is invoked when all of the Application, Controller and Profile dependencies have been loaded. Launches the controllers, then the profile and application.
Callback that is invoked when all of the configured Profiles have been loaded. Detects the current profile and gathers any additional dependencies from that profile, then loads all of those dependencies.
Redirects the browser to the given url. This only affects the url after the '#'. You can pass in either a String or a Model instance - if a Model instance is defined its toUrl function is called, which returns a string representing the url for that model. Internally, this uses your application's Router to decode the url into a matching controller action and then calls dispatch.
The String url to redirect to.
Overrides: Ext.app.Controller.redirectTo
Removes a before-event handler.
Same as removeListener with order
set to 'after'
.
The name of the event the handler was associated with.
The handler to remove.
The scope originally specified for fn
.
Extra options object.
Removes a before-event handler.
Same as removeListener with order
set to 'before'
.
The name of the event the handler was associated with.
The handler to remove.
The scope originally specified for fn
.
Extra options object.
Removes an event handler.
The type of event the handler was associated with.
The handler to remove. This must be a reference to the function passed into the addListener call.
The scope originally specified for the handler. It must be the same as the scope argument specified in the original call to addListener or the listener will not be removed.
Extra options object. See addListener for details.
The order of the listener to remove.
Possible values are before
, current
and after
.
Defaults to: 'current'
Adds listeners to any Observable object (or Element) which are automatically removed when this Component is destroyed.
This method has been deprecated since 2.0
All listeners are now automatically managed where necessary. Simply use removeListener.
The item to which to add a listener/listeners.
The event name, or an object containing event name properties.
If the eventName
parameter was an event name, this is the handler function.
If the eventName
parameter was an event name, this is the scope in which
the handler function is executed.
Resumes firing events (see suspendEvents).
Pass as true to discard any queued events.
Get the reference to the class from which this object was instantiated. Note that unlike self,
this.statics()
is scope-independent and it always returns the class from which it was called, regardless of what
this
points to during run-time
Ext.define('My.Cat', {
statics: {
totalCreated: 0,
speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
},
constructor: function() {
var statics = this.statics();
alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to
// equivalent to: My.Cat.speciesName
alert(this.self.speciesName); // dependent on 'this'
statics.totalCreated++;
},
clone: function() {
var cloned = new this.self(); // dependent on 'this'
cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName
return cloned;
}
});
Ext.define('My.SnowLeopard', {
extend: 'My.Cat',
statics: {
speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'
},
constructor: function() {
this.callParent();
}
});
var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat'
var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard'
var clone = snowLeopard.clone();
alert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'
alert(clone.groupName); // alerts 'Cat'
alert(My.Cat.totalCreated); // alerts 3
Suspends the firing of all events.
All events will be queued but you can discard the queued events by passing false in the resumeEvents call
Alias for removeListener.
The type of event the handler was associated with.
The handler to remove. This must be a reference to the function passed into the addListener call.
The scope originally specified for the handler. It must be the same as the scope argument specified in the original call to addListener or the listener will not be removed.
Extra options object. See addListener for details.
The order of the listener to remove.
Possible values are before
, current
and after
.
Defaults to: 'current'
Makes sure the app namespace exists, sets the app
property of the namespace to this application and sets its
loading path (checks to make sure the path hadn't already been set via Ext.Loader.setPath)
Add methods / properties to the prototype of this class.
Ext.define('My.awesome.Cat', {
constructor: function() {
// ...
}
});
My.awesome.Cat.addMembers({
meow: function() {
alert('Meowww...');
}
});
var kitty = new My.awesome.Cat();
kitty.meow();
Add / override static properties of this class.
Ext.define('My.cool.Class', {
// this.se
});
My.cool.Class.addStatics({
someProperty: 'someValue', // My.cool.Class.someProperty = 'someValue'
method1: function() { }, // My.cool.Class.method1 = function() { ... };
method2: function() { } // My.cool.Class.method2 = function() { ... };
});
this
Borrow another class' members to the prototype of this class.
Ext.define('Bank', {
money: '$$$',
printMoney: function() {
alert('$$$$$$$');
}
});
Ext.define('Thief', {
// ...
});
Thief.borrow(Bank, ['money', 'printMoney']);
var steve = new Thief();
alert(steve.money); // alerts '$$$'
steve.printMoney(); // alerts '$$$$$$$'
The class to borrow members from
The names of the members to borrow
this
Create a new instance of this Class.
Ext.define('My.cool.Class', {
// ...
});
My.cool.Class.create({
someConfig: true
});
All parameters are passed to the constructor of the class.
the created instance.
Create aliases for existing prototype methods. Example:
Ext.define('My.cool.Class', {
method1: function() { },
method2: function() { }
});
var test = new My.cool.Class();
My.cool.Class.createAlias({
method3: 'method1',
method4: 'method2'
});
test.method3(); // test.method1()
My.cool.Class.createAlias('method5', 'method3');
test.method5(); // test.method3() -> test.method1()
The new method name, or an object to set multiple aliases. See flexSetter
The original method name
Get the current class' name in string format.
Ext.define('My.cool.Class', {
constructor: function() {
alert(this.self.getName()); // alerts 'My.cool.Class'
}
});
My.cool.Class.getName(); // 'My.cool.Class'
className
Override members of this class. Overridden methods can be invoked via callParent.
Ext.define('My.Cat', {
constructor: function() {
alert("I'm a cat!");
}
});
My.Cat.override({
constructor: function() {
alert("I'm going to be a cat!");
var instance = this.callParent(arguments);
alert("Meeeeoooowwww");
return instance;
}
});
var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
// alerts "I'm a cat!"
// alerts "Meeeeoooowwww"
As of 2.1, direct use of this method is deprecated. Use Ext.define instead:
Ext.define('My.CatOverride', {
override: 'My.Cat',
constructor: function() {
alert("I'm going to be a cat!");
var instance = this.callParent(arguments);
alert("Meeeeoooowwww");
return instance;
}
});
The above accomplishes the same result but can be managed by the Ext.Loader which can properly order the override and its target class and the build process can determine whether the override is needed based on the required state of the target class (My.Cat).
This method has been deprecated since 2.1.0
Please use Ext.define instead
The properties to add to this class. This should be specified as an object literal containing one or more properties.
this class