PDA

View Full Version : global variables



nofx
9 Feb 2012, 1:57 AM
I'm using Designer 2 to create my sencha 2 app. But now i'm in the need of using a global variable(s).
Normally i would just create another .js file called globals.js in which i put some global variables, like a url to a wsdl and include that into my index.hmtl.

But i was wondering if Designer 2 offers some kind of abillity to add global variables which can be used throughout my application.

aconran
9 Feb 2012, 9:41 AM
I would recommend against using truly global variables but I would recommend using application specific variables.

One way you could achieve this would be to go into your Application's launch method and create a global property which can be accessed throughout all of your source.

For example:


MyApp.globals = {
key: 123,
key2: 'abc'
};


The touch20/yql.xda example does something similar. You can download the sample projects from this link:
http://www.sencha.com/forum/showthread.php?152941-Sencha-Designer-2-Beta-Download-links

nofx
15 Feb 2012, 5:32 AM
I would recommend against using truly global variables but I would recommend using application specific variables.

One way you could achieve this would be to go into your Application's launch method and create a global property which can be accessed throughout all of your source.

For example:


MyApp.globals = {
key: 123,
key2: 'abc'
};


The touch20/yql.xda example does something similar. You can download the sample projects from this link:
http://www.sencha.com/forum/showthread.php?152941-Sencha-Designer-2-Beta-Download-links

Thanks, thats working fine.

I do have another problem though. I also need a few 'global' functions. I used to just add functions to my controller which i could just call like:

myApp.controller.Main.backButton();

But in the Designer tool i can only add functions based on events, like; keyUp, onItemTap etc. I can't even approach my controller anymore through "MyApp.controller.Main.backButton()" (that's how it is Ext.defined).

But sometimes i just want to call a custom function. Any idea how i'm able to do that in the Designer tool? Couldn't find the answer for this in the examples.

ssamayoa
15 Feb 2012, 9:16 AM
You can add "Basic Function" to Application, Controllers and containers.

nofx
21 Feb 2012, 1:45 AM
I just added a basic function, but now i have a new problem. How do i call it? :">

I created a controller, gave it an "userAlias" and the same "userClassName". Then i added a Basic Function to the controller with a function name.

Now i also have a list of DIVs which i load inside a panel. These DIVs have an "onclick" event which i want to use to call my function.

I tried to call the function like this:

MyApp.controller.TestController.showTest();

And even with the component query:
Ext.ComponentQuery.query('TestController')[0].showTest();

But both didn't work.. How should this be done from an "onclick" event??

aconran
21 Feb 2012, 9:15 AM
If you are within the same class, the syntax is this.showTest()

nofx
21 Feb 2012, 2:11 PM
If you are within the same class, the syntax is this.showTest()

No the problem is that i'm not in the same class. I created a "Basic Function" which i want to call.

I have a Panel on which i have some html DIV elements. I gave those DIV elements an onclick event like this:

<div onclick="call.my.basic.func()">Test<.div>

From that onclick event i want to call my "Basic Function" (which is inside a controller ofcourse). But i have no idea how to do that, and i really need this...

Any idea how to do that??

aconran
21 Feb 2012, 5:44 PM
Bind an event listener to the div you'd like via JavaScript..

eg


Ext.get('myDiv').on('click', function() {
basic.showTest();
});


Clearly you have to be able to reference both the div and then the instance of whatever you've associated with the basic function.

nofx
22 Feb 2012, 4:41 AM
Sorry i can't get your example to work. I also don't think that it fits my problem.

In short this is what's happening. I have a DataView which is connected to JSON Store. This JSON store gets dynamic data which the DataView processes. I do that by using the "itemTpl" property.

In there i have this:



<tpl for=".">
<div class="block">
<div onclick="myController.testFunc({UserGuid}, {Param1}, {Param2});">{Username}</div>
</div>
</tpl>


So as you can see i need to call my controller function from my DIV with certain parameters. The best way to do this is to directly call the function of a Controller. Is there any way to do that...??

On your example i have no idea where to define the 'event listener'. How to make it work when the amount of DIVs are dynamic. How to pass the needed params from the event listener to the Controller.
And in 'basic.showTest()', i have no idea where 'basic' comes from. I tried to replace that with the name of my controller, but that's "undefined".

Anyway, i'd rather call my Controller function directly. I really hope that this is possible..

aconran
22 Feb 2012, 9:02 AM
The pseudo code which you have posted above will have severe memory leaks.

You do not want to attach event handlers via DOM level 0 event handling "onclick" attributes. Instead you want to subscribe to the DataView's click event which uses dom event delegation. It will determine which record you clicked on and you can read the guid and additional parameters out of it.

ehanan
23 Feb 2012, 6:51 PM
Aaron,

I have the same problem, let say that you define a basic function in the aplicaciĆ³n, it ask you in the component config 2 things: fn and param

Then in the code of thet function you put what is the function and if you see the code will be like this:


Ext.Loader.setConfig({ enabled: true
});


Ext.application({
views: [
'MyPanel'
],


autoCreateViewport: true,


name: 'MyApp',


launch: function() {


},


mensaje: function(texto, texto2) {
function mensaje (texto,texto2) {console.log(texto+" "+texto2)};
}


});

So you have the function mensaje defined in your app,

The question is how you can call your function?

Thanks

datosula
21 Mar 2012, 8:43 AM
Hi all,

I have the same problem, have you found solution how to call function defined in App ?

Thanks ahead

CasualGamer
22 Mar 2012, 9:17 AM
I'm about 3 days into trying out Sencha. Here's how I got around it.


In the application's launch function, I defined a function like so:

TestLogin.basicFunc = function(cookieName)
{
alert(cookieName);
};

And from somewhere else in my code, I called it like so: (where 'TestLogin' is the name of my application)

TestLogin.basicFunc("kablooey");

mcbl
22 May 2012, 4:17 AM
If you are not in the same class, how to do that?

For example, to call a controller's function that is in another controller's function, how to achieve it?

mcbl
22 May 2012, 4:21 AM
This is hard coding Sencha, it's mean to be used in another way. Isn't it, Sencha Pro?

TestLogin.basicFunc = function(cookieName)
{
alert(cookieName);
};

You define a function as a global function (application scope). It's generally not recommended.

If you do that with hundreds of function, it's absolutely bad optimized. Memory is crucial in JS!

ssamayoa
22 May 2012, 4:51 AM
If you are not in the same class, how to do that?

For example, to call a controller's function that is in another controller's function, how to achieve it?

var controller = this.getController("SomeController");
controller.someFunction();

mcbl
22 May 2012, 5:06 AM
Tried with,

this.getController("MyController").myFunction();

Where MyController is my controller's userClassName, myFunction() is a basic function in this controller. This code snippet runs in a view on a button's handler.

..but it doesn't work!

Error: this.getController("MyController") fails

ssamayoa
22 May 2012, 6:40 AM
This code snippet runs in a view on a button's handler.


What you mean?
"basic function" is in the controller or in the component?

If later be sure that wont work, getController() is a Controller class method.

mcbl
22 May 2012, 6:53 AM
Basic functions doesn't exist in component in Sencha Architect. My basic function is in the controller.

ssamayoa
22 May 2012, 7:01 AM
Basic functions doesn't exist in component in Sencha Architect. My basic function is in the controller.

Check your code: spelling, case, etc.

Also check function call context.

Be sure that such way of calling methods from one controller to another works.

Regards.

brunp
2 Jan 2014, 8:22 AM
I would recommend against using truly global variables but I would recommend using application specific variables.

One way you could achieve this would be to go into your Application's launch method and create a global property which can be accessed throughout all of your source.

For example:


MyApp.globals = {
key: 123,
key2: 'abc'
};


The touch20/yql.xda example does something similar. You can download the sample projects from this link:
http://www.sencha.com/forum/showthread.php?152941-Sencha-Designer-2-Beta-Download-links

How do you access these global properties from an event such as when you click a button? I think I added the parameters properly? I replaced "MyApp.globals", with the name of my application that I defined --> "<AppName>.globals", and when I try to access it in the js event function, I get an error saying that "<AppName>.globals does not exist.???

Paul