There will be many instances where you don’t want to use the Sencha data model just to store some variables – there are a couple of ways to do so within Sencha Architect that are easy to do.

The first one is simply to add an external javascript file to the project’s Resources. Anything in your JS will be available to the entire app. While this works it has the potential to get messy so you’ll want to namespace everything in your custom.js document to prevent cluttering up the global namespace.

Sure that works in a pinch but lets try to add the desired global variable to the app’s namespace instead. This is essentially just like adding a custom property to any component but in this case you’re going to add it to the application itself. The app is represented by the “Application” root node in the Project Inspector. Once added the only issue then is to discover how to reference the “variable” (in quotes because what we’re really doing is adding a custom property to our Ext.application config object). Its not really an issue since as you’ll see its quite simple to determine.

To demonstrate, I have a simple app that will display a single button. When that button is pressed it will display our new property and then increment it. So then, our app looks like this:

architect_global_variables_01

To begin lets create a new Ext.application property that we’ll call “myNumber”. Locate the Application node in the Project Inspector and select it. The config panel updates to reveal the application’s config options. Enter the text “myNumber” in the filter field as illustrated below:

architect_global_variables_02

Next, click the “Add” button to the right of the filter text field. You will see this:

architect_global_variables_03

You’ve just created a custom property called “myNumber”. Now lets give it a value, in its default state the type of the property is a string as indicated by the icon to the left of the property (a circle with three horizontal dots). We want to change this to a number. Click the icon and select the “number” data type. The type icon should now contain a hash (#).

architect_global_variables_04

Next, set the value of the “myNumber” property to 0 (zero).

You may have noticed the other data types that were available for you to choose from – you can set the value to be an array of strings or objects or whatever may be necessary to meet your particular needs. For now, we just want our “myNumber” property to hold the number 0.

Ok, lets start wiring things up. Lets add a simple event to our button. Select the button from the Project Inspector. Its config will appear – click the “plus icon” found to the right of “Event Bindings”.

architect_global_variables_05

Select “Basic Event Binding” from the options that appear. You will be asked to “Choose an event by name” – type the word “tap”, then click the finish button. You now have this:

architect_global_variables_06

You have bound a tap event to the button. The next step is to add the logic which includes referencing our myNumber “Global variable”. Double-click the tap event beneath the button in the Project Inspector. The code view for the event appears.

architect_global_variables_07

Add this code (note the comments):

// this is the reference to your global variable:
var myGlobal = MyApp.app.myNumber;

// next lets populate the text field with the value of myNumber:
Ext.getCmp('myvalue').setValue(myGlobal);

// finally, we increment our global variable:
MyApp.app.myNumber++;

You should have the following:

architect_global_variables_08

Ok, so this is how we figure out how to reference our custom property – the name of your app can be found in the Application config – click the Application node in the Project Inspector panel and then scroll through the Application Configs until you find the “Name” property – in this case it’s value is “MyApp”. So then, any properties that you add in this fashion can be access via this syntax [ApplicationName].app.[variableName]. In this case it is MyApp.app.myNumber.

Note that the new property won’t actually be added unless you give it a default value so be sure to do so to save yourself some frustration.

All done, each time the button is tapped we update the text field with the current myNumber value as well as increment the myNumber property’s value.