Global variable sencha touch 2.1
Hi I need to define a global variable to use in anywhere of my application. I declare a global variable baseUrl in my app.js. Please see below app.js
//<debug>
Ext.Loader.setPath({
'Ext': 'touch/src',//Location of the sencha touch source files
'bluebutton': 'app',
});
//</debug>
Ext.application({
name: 'bluebutton',//Application Path, all classes in you app. For eg blueButton.view.Main.case sensitive
views: ['Main',
'BlueButton.CouponMain',
'BlueButton.CouponList',
'BlueButton.CouponList2',
'BlueButton.CouponList3',
'BlueButton.TransactionMain',
],
stores : [
'BlueButton.GlobalVariable',
],
models : ['BlueButton.GlobalVariable',
'BlueButton.MemberDetail',
],
controllers: ['Main',
'BlueButton.MemberList',
],
requires: [
'Ext.MessageBox',
],
icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/[email protected]',
'144': 'resources/icons/[email protected]'
},
isIconPrecomposed: true,
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},
//--Global value--
baseUrl: 'http://192.168.251.108:8080',
//--Global value--
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
var LoginLS = Ext.getStore('LoginLS');
LoginLS.load();
var record = LoginLS.getAt(0);
if(record != undefined){
var sessionId = record.get('sessionId');
if (sessionId !=undefined){
var mainView = Ext.getCmp("mainview");
if(!mainView){
mainView = Ext.create('bluebutton.view.Main');
}
Ext.Viewport.setActiveItem(mainView);
}
else
{
var loginView = Ext.getCmp("loginview");
if(!loginView){
loginView = Ext.create('bluebutton.view.Login');
}
Ext.Viewport.setActiveItem(loginView);
}
}
else{
var loginView = Ext.getCmp("loginview");
if(!loginView){
loginView = Ext.create('bluebutton.view.Login');
}
Ext.Viewport.setActiveItem(loginView);
// //--Disable this line --
// var mainView = Ext.getCmp("mainview");
// if(!mainView){
// mainView = Ext.create('bluebutton.view.Main');
// }
// Ext.Viewport.setActiveItem(mainView);
// //--Disable this line --
}
// Ext.create('bluebutton.view.TopMenuList');
},
init: function () {
this.callParent(arguments);
},
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function(buttonId) {
if (buttonId === 'yes') {
window.location.reload();
}
}
);
}
});
model.js
Ext.define('bluebutton.model.BlueButton.CouponList', {
extend: 'Ext.data.Model',
config: {
idProperty: 'couponId',
fields: [
{ name: 'couponId' },
{ name: 'couponName' },
{ name: 'description' },
{ name: 'amount' },
{ name: 'couponType' },
{ name: 'merchant_bbID' },
{ name: 'sessionId' },
{ name: 'deviceId' },
],
proxy: {
type: 'rest',
url: bluebutton.app.baseUrl +'/WebCommon/rest/BBWebService/getCouponList',
actionMethods: {
create: 'POST',
read: 'GET',
update: 'PUT',
destroy: 'DELETE'
},
noCache: false, // get rid of the '_dc' url parameter
extraParams: {
sessionId: "1",
merchant_bbID: "merchant1",
},
// timeout:1000,
// listeners: {
// exception: function(proxy, response, operation) {
// alert("Connection Problem");
// Ext.Viewport.setMasked(false); // hide the load screen
//
// }
// },
reader: {
type: 'json',
rootProperty: 'couponList'
},
writer: {
type: 'json',
},
}
}
});
Then I used basedUrl in my model.js. It can work when I use browser to view. But when I use sencha app build testing to compile my apps,
I used browser to open and it showed me an error message Uncaught TypeError: Cannot read property 'baseUrl' of undefined . Any idea?
Answer
When you make the production build, all the files in your sencha app will be minified and thus the global variables may lose the context.
There are several ways to declare global variables in your sencha app
-> 1st Approach
Declare a global variables in util/Config.js
util/Config.js
Ext.define('APP.util.Config', {
singleton : true,
alias : 'widget.appConfigUtil',
config : {
baseUrl : 'xx.xx.xx.xxx',
},
constructor: function(config) {
this.initConfig(config);
this.callParent([config]);
}
})
Changes in app.js
requires : [ 'App.util.Config']
Now, you can use it in your application like as below.
var baseUrl = App.util.Config.getBaseUrl();
2nd Approach->
Declare global variables in your .js files before the class definition
var baseUrl;
Ext.define('classname,{Other things });