PDA

View Full Version : Shared Functions



adossaji
14 Jul 2015, 12:01 PM
Hi all,

I am trying to call a function from a "shared.js" file. Essentially, I want to be able to access functions from anywhere. I also want my calls to load automatically. For example, If I have an AJAX function in my shared file. Several pages use the same function and will load the function when I reload the page.

Here is some code:

Application.js

/** * The main application class. An instance of this class is created by app.js when it
* calls Ext.application(). This is the ideal place to handle application launch and
* initialization details.
*/
Ext.define('CPT.Application', {
extend: 'Ext.app.Application',


name: 'CPT',


stores: [
'CPT.shared.Shared'
],


views: [
'CPT.view.login.Login',
'CPT.view.main.Main'
],
launch: function () {


// It's important to note that this type of application could use
// any type of storage, i.e., Cookies, LocalStorage, etc.
var loggedIn;


// Check to see the current value of the localStorage key
loggedIn = localStorage.getItem("LoggedIn");


// This ternary operator determines the value of the TutorialLoggedIn key.
// If TutorialLoggedIn isn't true, we display the login window,
// otherwise, we display the main view
Ext.widget(loggedIn ? 'app-main' : 'login');


},


onAppUpdate: function () {
Ext.Msg.confirm('Application Update', 'This application has an update, reload?',
function (choice) {
if (choice === 'yes') {
window.location.reload();
}
}
);
}
});

Shared.js

Ext.define('CPT.shared.Shared', { extend: 'Ext.app.ViewController',
alias: 'controller.shared',


rpc: function rpc(config) {
var method = config.method,
headers = {
'X-Application-Name' : 'CPT'
};


Ext.Ajax.request({
url : 'link here' + config.url,
method : method,
headers : headers,
jsonData : config.params,
success : function (response) {
var data = Ext.JSON.decode(response.responseText);
localStorage.setItem("SessionId", data.session_id);
var o = Ext.decode(response.responseText);
if (config.callback) {
config.callback(o);
}
else {
console.dir(o);
}
},
failure : function (response) {
var o = Ext.decode(response.responseText);
console.dir(o);
if (config.callback) {
config.callback(o);
}
}
});
}


});

StatusController.js

/** * This class is the controller for the main view for the application. It is specified as
* the "controller" of the Main view class.
*
* TODO - Replace this content of this view to suite the needs of your application.
*/
Ext.define('CPT.view.status.StatusController', {
extend: 'Ext.app.ViewController',
alias: 'controller.status',


requires: [
'CPT.shared.Shared'
],


function rpc({
url: 'user/session/',
params: {
email: *email*,
password: *password*
}
});


});

TampaBay55
14 Jul 2015, 12:49 PM
Create an instance of the controller in your Application.js:


...
requires: [
'CPT.shared.Shared',
'CPT.view.status.StatusController'
],
launch: function() {
// It's important to note that this type of application could use
// any type of storage, i.e., Cookies, LocalStorage, etc.
var loggedIn;


// Check to see the current value of the localStorage key
loggedIn = localStorage.getItem("LoggedIn");


//Create an instance of the shared controller
var sharedFn = this.getController('CPT.shared.Shared');


// This ternary operator determines the value of the TutorialLoggedIn key.
// If TutorialLoggedIn isn't true, we display the login window,
// otherwise, we display the main view
Ext.widget(loggedIn ? 'app-main' : 'login');
},



You can remove the requirement from your statusController (it's pulled into Aapplication.js).

Your statusController.js:


/** * This class is the controller for the main view for the application. It is specified as
* the "controller" of the Main view class.
*
* TODO - Replace this content of this view to suite the needs of your application.
*/
Ext.define('CPT.view.status.StatusController', {
extend: 'Ext.app.ViewController',
alias: 'controller.status',

someMethod: function(){
sharedFn.rpc({
...
})
}
});


The functions become available to any of the controller instansiated under the Application.js

adossaji
14 Jul 2015, 1:11 PM
Thank you for your help TampaBay55.

I am getting an error:

Uncaught TypeError: controller.doInit is not a function.

LoginController.js


Ext.define('CPT.view.login.LoginController', {
extend: 'Ext.app.ViewController',
alias: 'controller.login',


onLoginClick : function () {


sharedFn.rpc({
url: 'user/session/',
params: {
email: 'user',
password: 'pass'
}
});


// This would be the ideal location to verify the user's credentials via
// a server-side lookup. We'll just move forward for the sake of this example.


// Set the localStorage value to true
localStorage.setItem("LoggedIn", true);


// Remove Login Window
this.getView().destroy();


// Add the main view to the viewport
Ext.widget('app-main');


}






});

Shared.js


Ext.define('CPT.shared.Shared', {
extend: 'Ext.app.ViewController',
alias: 'controller.shared',


rpc: function (config) {
var method = config.method,
headers = {
'X-Application-Name' : 'CPT'
};


Ext.Ajax.request({
url : 'LINKHERE' + config.url,
method : method,
headers : headers,
jsonData : config.params,
success : function (response) {
var data = Ext.JSON.decode(response.responseText);
localStorage.setItem("SessionId", data.session_id);
var o = Ext.decode(response.responseText);
if (config.callback) {
config.callback(o);
}
else {
console.dir(o);
}
},
failure : function (response) {
var o = Ext.decode(response.responseText);
console.dir(o);
if (config.callback) {
config.callback(o);
}
}
});
}


});

Application.js


/**
* The main application class. An instance of this class is created by app.js when it
* calls Ext.application(). This is the ideal place to handle application launch and
* initialization details.
*/
Ext.define('CPT.Application', {
extend: 'Ext.app.Application',


name: 'CPT',


stores: [
'CPT.shared.Shared',
'CPT.view.status.StatusController',
'CPT.view.login.LoginController'
],


views: [
'CPT.view.login.Login',
'CPT.view.main.Main'
],
launch: function () {


// It's important to note that this type of application could use
// any type of storage, i.e., Cookies, LocalStorage, etc.
var loggedIn;


// Check to see the current value of the localStorage key
loggedIn = localStorage.getItem("LoggedIn");


//Create an instance of the shared controller
var sharedFn = this.getController('CPT.shared.Shared');


// This ternary operator determines the value of the TutorialLoggedIn key.
// If TutorialLoggedIn isn't true, we display the login window,
// otherwise, we display the main view
Ext.widget(loggedIn ? 'app-main' : 'login');


},


onAppUpdate: function () {
Ext.Msg.confirm('Application Update', 'This application has an update, reload?',
function (choice) {
if (choice === 'yes') {
window.location.reload();
}
}
);
}
});

TampaBay55
14 Jul 2015, 1:14 PM
Is CPT.shared.Shared a store??

TampaBay55
14 Jul 2015, 1:19 PM
You have it listed in your stores for the application.

adossaji
14 Jul 2015, 1:39 PM
I changed my Application.js file to this...





/**
* The main application class. An instance of this class is created by app.js when it
* calls Ext.application(). This is the ideal place to handle application launch and
* initialization details.
*/
Ext.define('CPT.Application', {
extend: 'Ext.app.Application',

name: 'CPT',

// models: [],

// stores: [],

views: [
'CPT.view.login.Login',
'CPT.view.main.Main'
],

required: [
'CPT.shared.Shared',
'CPT.view.status.StatusController',
'CPT.view.login.LoginController'
],

launch: function () {

// Check to see the current value of the localStorage key
var loggedIn = localStorage.getItem("LoggedIn");

//Create an instance of the shared controller
var sharedFn = this.getController('CPT.shared.Shared');

console.log('Application.js:');
console.log(sharedFn.rpc);

// This ternary operator determines the value of the TutorialLoggedIn key.
// If TutorialLoggedIn isn't true, we display the login window,
// otherwise, we display the main view
Ext.widget(loggedIn ? 'app-main' : 'login');

},

onAppUpdate: function () {
Ext.Msg.confirm('Application Update', 'This application has an update, reload?',
function (choice) {
if (choice === 'yes') {
window.location.reload();
}
}
);
}
});


But it still says Uncaught ReferenceError: sharedFn is not defined.

Edit:

I used this statement in my LoginController to get sharedFn





var sharedFn = CPT.app.getController('CPT.shared.Shared');

vsppwrx12
4 May 2016, 7:07 AM
Thank you for your help TampaBay55.

I am getting an error:

Uncaught TypeError: controller.doInit is not a function.

LoginController.js


Ext.define('CPT.view.login.LoginController', {
extend: 'Ext.app.ViewController',
alias: 'controller.login',


onLoginClick : function () {


sharedFn.rpc({
url: 'user/session/',
params: {
email: 'user',
password: 'pass'
}
});


// This would be the ideal location to verify the user's credentials via
// a server-side lookup. We'll just move forward for the sake of this example.


// Set the localStorage value to true
localStorage.setItem("LoggedIn", true);


// Remove Login Window
this.getView().destroy();


// Add the main view to the viewport
Ext.widget('app-main');


}






});

Shared.js


Ext.define('CPT.shared.Shared', {
extend: 'Ext.app.ViewController',
alias: 'controller.shared',


rpc: function (config) {
var method = config.method,
headers = {
'X-Application-Name' : 'CPT'
};


Ext.Ajax.request({
url : 'LINKHERE' + config.url,
method : method,
headers : headers,
jsonData : config.params,
success : function (response) {
var data = Ext.JSON.decode(response.responseText);
localStorage.setItem("SessionId", data.session_id);
var o = Ext.decode(response.responseText);
if (config.callback) {
config.callback(o);
}
else {
console.dir(o);
}
},
failure : function (response) {
var o = Ext.decode(response.responseText);
console.dir(o);
if (config.callback) {
config.callback(o);
}
}
});
}


});

Application.js


/**
* The main application class. An instance of this class is created by app.js when it
* calls Ext.application(). This is the ideal place to handle application launch and
* initialization details.
*/
Ext.define('CPT.Application', {
extend: 'Ext.app.Application',


name: 'CPT',


stores: [
'CPT.shared.Shared',
'CPT.view.status.StatusController',
'CPT.view.login.LoginController'
],


views: [
'CPT.view.login.Login',
'CPT.view.main.Main'
],
launch: function () {


// It's important to note that this type of application could use
// any type of storage, i.e., Cookies, LocalStorage, etc.
var loggedIn;


// Check to see the current value of the localStorage key
loggedIn = localStorage.getItem("LoggedIn");


//Create an instance of the shared controller
var sharedFn = this.getController('CPT.shared.Shared');


// This ternary operator determines the value of the TutorialLoggedIn key.
// If TutorialLoggedIn isn't true, we display the login window,
// otherwise, we display the main view
Ext.widget(loggedIn ? 'app-main' : 'login');


},


onAppUpdate: function () {
Ext.Msg.confirm('Application Update', 'This application has an update, reload?',
function (choice) {
if (choice === 'yes') {
window.location.reload();
}
}
);
}
});

Same issue here.

I'm getting "Uncaught TypeError: controller.doInit is not a function()" when calling MyApp.app.getController("MyApp.view.settings.SettingsController").

If I instead use the controller's alias of "settings" and call MyApp.app.getController("settings"), I get "Uncaught TypeError: c.getModuleClassName is not a function()".