How to declare Global Functions/Variables in Sencha App? | Techbirds

Posted on: February 7, 2018 /

Categories: Mobile Applications

Posted on: December 30, 2013 /

Categories: Mobile Applications / Author Name: devashish.techbirds

1. How to declare Global variables and function in sencha App. Step 1 :- Make a class Global.js in /app/util/

Step 2 :- define class Global

Ext.define(‘MyApp.util.Global’, {

singleton : true,

config : {

//global vars here

myGlobalVar : ‘greatApp’,

constructor : function(config) {

this.initConfig(config);

this.callParent([config]);

myGlobalFunction: function(param){

alert(‘My Global Function: ‘+param);

}

});

Above defining constructor is mandatory Step 3:- To access this in any of your other sencha class

first mention this class in app.js

Ext.require([ ‘MyApp.util.Global’ ]);

Ext.require([

‘MyApp.util.Global’

]);

to use variable in your class variable:

assignment

MyApp.util.Global.setMyGlobalVar(“My Global Value”);

fetching

alert(“my global value: “+MyApp.util.Global.getMyGlobalVar());

function:

MyApp.util.Global.myGlobalFunction(myGlobalVar);

2. Controlling back event in Ext.NestedList(this is not hardware button of device.)

https://docs.sencha.com/touch/2-0/#!/api/Ext.navigation.View-event-back

the above event

back: ‘myBackHandler’

and in your controller declare function ‘myBackHandler’
if you want to completely hide the back button just simply use:

Ext.select(‘.x-button-back’).hide();

3. Controlling Hardware Back Button
first add listener

document.addEventListener(“backbutton”, Ext.bind(callBackButton, this), false);

then define ‘callBackButton’ in the same scope or globally to prevent default functionality of back button

I am declaring it in my Global.js

Ext.define(‘MyApp.util.Global’, { singleton : true, config : { //global vars here myGlobalVar : ‘greatApp’, }, constructor : function(config) { this.initConfig(config); this.callParent([config]); }, myGlobalFunction: function(param){ alert(‘My Global Function: ‘+param); }, callBackButton: function(event){ event.defaultPrevented;// this will remove the call to default functionality of hardware back button. } });