Sencha Touch 2 Global Variables - Access everywhere - javascript

I know this question was already posted in StackOverflow but I either didnt understand or sencha changed somewhat.
My app loads a form panel for login, then I would like to save the user info that have just loged on. This way I can change my view anytime I want and still know the name of the loged in user.
Here is my main code:
//<debug>
Ext.Loader.setPath({
'Ext': 'sdk/src'
});
//</debug>
Ext.application({
name: 'APP',
loadedUser: 'the test',
requires: ['Ext.MessageBox'],
views: ['Main', 'Home', 'Login'],
models: ['User'],
stores: ['Users'],
controllers: ['Main'],
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'
},
phoneStartupScreen: 'resources/loading/Homescreen.jpg',
tabletStartupScreen: 'resources/loading/Homescreen~ipad.jpg',
setLoadedUser: function(arg) {
this.loadedUser = arg;
},
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('APP.view.Main'));
},
onUpdated: function() {
Ext.Msg.confirm("Application Update", "This application has just successfully been updated to the latest version. Reload now?", function() {
window.location.reload();
});
}
});
The 'loadedUser' its what I wanted to be my global variable, and the method setLoadedUser(arg) its suposed to change that value.
I can access 'loadedUser' no problem, but I can't change its value.
Another question: loadedUser can it be an array/data structure?

How are you accessing the function? This works for me. Remember you should access it like this:
APP.app.setLoadedUser('test');
And yes, it can be any value. :)

You can also use localStorage to, set/get Your variables:
Set it as:
localStorage.setItem('currentUserId', userID)
Get it as:
localStorage.getItem('currentUserId')
You can use it, anywhere in Your script.

Yes, the works when the function is inside of the app.js file.
It does not work if the function is inside of the controller file.
So if you have a project application called IronMan, the call from the view code to the global function, flyAway(), in your app.js file would look like:
IronMan.app.flyAway();

Related

how to get view references in SAPUI5?

Let's say I have my routes defined in my manifest.json like this
rootView: "sap.ui.core.sample.TargetsStandalone.targetsApp.view.App",
routing: {
config: {
targetsClass: "sap.m.routing.Targets",
viewPath: "sap.ui.core.sample.TargetsStandalone.targetsApp.view",
controlId: "rootControl",
controlAggregation: "pages",
viewType: "XML"
},
targets: {
page1: {
viewName: "View1",
viewLevel: 0
},
page2: {
viewName: "View2",
viewLevel: 1
}
}
}
Is there a way to retrieve the view references from the component(getOwnerComponent). What I want to do is, on the first controller I want to get a reference of label on "View2". It seems like there is no reference to the second view until I navigate to it. Is there a way to get the a reference to another view and its elements before I navigate to it?
When you navigate to a view, the runtime instantiate it. Before that, there is no view. You can even see in the network trace how the XML file of certain view is downloaded once you navigate to it for the first time, but not before.

Using ember-qunit to test controllers with a store (DS.FixtureAdapter)

I have an ember-qunit test case for a controller (using moduleFor('controller:name', ...)) that that I'd like to be able to use the moduleForModel-exclusive this.store() in order to retrieve a DS.FixtureAdapter data store. For this specific test case, I'm not trying to test the model - I just want to verify that the controller can be populated with a set of model instances and various operations can be run against that data.
I'm using coffeescript so my code looks like:
moduleFor("controller:test", 'My Controller', {
setup: ->
#store().createRecord 'test', value: 1
#store().createRecord 'test', value: 2
#subject({
model: #store().all('test')
})
teardown: -> App.reset()
}, (container, context) ->
container.register 'store:main', DS.Store
container.register 'adapter:application', DS.FixtureAdapter
context.__setup_properties__.store = -> container.lookup('store:main')
)
In the example above there is a controller named TestController and there is also a model named Test. I lifted the container.register and context.__setup_properties__.store lines from the definition of moduleForModel in ember-qunit.
The problem is that I get an error when running the ember-qunit test suite:
Setup failed on [test case name]: No model was found for 'test'
Running the actual application outside of ember-qunit works fine. Maybe there's somebody out there who's had this same issue? Or maybe I'm taking the wrong approach?
Your problem could be that your test model has not been registered in the container, so it cannot be resolved.
You could register manually during your test module callbacks:
container.register('model:test', TestModel)
Or use the needs property of the moduleFor impl:
moduleForComponent('controller:test', 'My Controller', {
// specify the other units that are required for this test
needs: ['model:test'],
setup: {...},
teardown: {...}
});

call a view from controller in secha touch MVC pattern

I want to render a view which I create when the button on another view is clicked.
Here is my controller code, and I am following the MVC architecture
Ext.define('demo.controller.LoginController' , {
extend: 'Ext.app.Controller',
config: {
refs:{
loginAction: 'button[action=login]'
},
control:{
loginAction: {
tap:'loginProcess'
}
}
},
loginProcess:function(button,e,opts){
// Render View here
}
});
I have searched and I came across getMainView().push() and Ext.ViewPoart.add() but it's not working. According to the MVC pattern how should call this view from a controller?
EDIT
code of profilecontainer
Ext.define('demo.view.ProfileContainer',{
extend:'Ext.Panel',
xtype:'profilecontainer',
requires: [
'Ext.Label'
],
config: {
items:[{
xtype:'label',
html:'hi'
}]
}
});
Both of the ways you have tried should work, if you set them up correctly.
First, getMainView().push(newView) will work if mainView is an Ext.navigation.View. See the docs for this method here: http://docs.sencha.com/touch/2.2.1/#!/api/Ext.navigation.View-method-push
You can also use Ext.Viewport.setActiveItem(newView), assuming you have no typos (your post says ViewPoart). (Ext.Viewport.add will add the panel to the Viewport, but not set it as the active Card in the layout)
If neither of these are working, then you probably are not configuring your controller correctly. If that is the case, ensure that your loginProcess method is being called. If it is not, then your selector, button[action=login], is not correct.

Where do I put my global helper functions if they are needed before Ext.application() is being executed?

Let's say we have
Ext.application({
name: 'APP',
//this is my global helper method.
determineSomething: function() {
return true;
}
});
and a view that should access the method determineSomething():
Ext.define('APP.view.Main', {
extend: 'Ext.Panel',
config: {
myConfigValue : APP.app.determineSomething()
}});
This will work fine as long as you use the Sencha class loading system (because the js-file with this Main-View is loaded by Sencha after APP is available.).
But now let's say we want to minify our script. This means that the browser parses the Main.js file before the Sencha application is loaded. But at this time APP is not yet ready and we can not access it.
One solution would be to simply make a non ext config class / array / whatever with the method but is this a nice solution? What would be a clean solution for this problem?
I would keep my helper functions into a singleton Helper class which gets instantiated whenever app is loaded. For example this is how my helper class look like:
Ext.define('MyntraTabApp.util.Helper', {
singleton : true,
alternateClassName : 'Helper',
determineSomething : function(){
// do something
}
});
I can use it like this wherever I want
Helper.determineSomething();

How to access extjs controllers from console

It'd be super useful if I could access instances of my views and controllers in my ext.js application from Chrome's console. Does anyone have a clue how to do this?
coffeescript:
window.cms = Ext.create 'Ext.app.Application',
name: 'CMS'
controllers: [
'MyController'
...
It would seem that cms.getController('MyController') would do what I want, but I get a constructor back instead of the instance I'm looking for.
You need to create an application instance reference in the Application. Like this:
Ext.application({
name: 'CMS',
controllers: ['MyController'],
launch:function () {
CMS.app = this;
...
}
});
then you can use
CMS.app.getController('MyController') ...
You can use:
CMS.getApplication().controllers.get('ControllerName')
then you will get the actual instance of the controller
I don't think you get a constructor, it's just that chrome shows constructor when you call console.log on an Ext-JS object

Categories