I'm using this tutorial to create a slide navigation using sencha touch
http://innofied.com/simplest-slide-navigation-with-sencha-touch-2-2/
When implementing this in ibm worklight i dont know how to use app.js in worklight
THE app.js :
Ext.application({
name: 'SlideNav',
requires: [
'Ext.MessageBox'
],
views: [
'Viewport',
'Main',
'Navigation'
],
controllers : ['App'],
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'
},
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'
},
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('SlideNav.view.Viewport'));
},
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();
}
}
);
}
});
On worklight we have one main file that we use to initiate the app :
main.js:
window.$ = WLJQ;
function wlCommonInit(){
initializeSenchaApp();
}
function initializeSenchaApp(){
WL.Logger.debug("Initializing Sencha Touch code");
Ext.application({
name: 'Ersal',
views: ['Login','Home'],
controllers: ['Login'],
launch: function () {
Ext.Viewport.add([
{ xtype: 'loginview' },
{ xtype: 'mainmenuview' }
]);
//Ext.create('Ersal.view.Login');
}
});
}
It's not necessary to work with the app.js. You can only edit your main.js and add your medels, controllers and views.
Here is the code:
function wlCommonInit(){
initializeSenchaApp();
}
function initializeSenchaApp(){
WL.Logger.debug("Initializing Sencha Touch code");
Ext.application({
name: 'YouApp',
requires: ['Ext.Menu', 'YouApp.components.MenuButton'],
views: ['Home'],
models: ['Movie'],
controllers: ['Home'],
launch: function () {
Ext.getBody().removeCls('loading');
Ext.Viewport.add([
{ xtype: 'mainmenuview' },
]);
}
});
}
Wish it helps
It is not necessarily to create a separate app.js file, it is sufficient to use an existing main.js file.
If you want to include sencha plug-in in your application you have to set the loader path in main.js file as like this:
Ext.Loader.setPath({
'Ext.ux':'ux'
});
If you want to use the content of App.js in main.js, you have to load app.js before main.js in your HTML file, so make sure the ordering is correct. If it says that Ext is undefined, it probably is because you have the <script> tag that loads main.js before the one for App.js, so if that is the case, switch them around.
Related
I am using angularJS to load forms and having 2 issues
JS files loads before templateUrl
When I move to new View then JavaScript functions in old views are also accessible.
Please have a look at attached code:
.state('index.categdashboard', {
url: "/categdashboard",
templateUrl: "views/categdashboard.html",
data: { pageTitle: 'Category wise Headcount - Dashboard' },
controller: 'getCategoryWiseSummary',
resolve: {
loadPlugin: function ($ocLazyLoad) {
return $ocLazyLoad.load([
{
files: [
// Row 1
'js/categdashboard/categdashboard.js',
],
cache: false
}
]);
}
}
})
I have tried
$(document).ready(function () {
but it also did not worked
I declared a new controller in my new view and called the JavaScript functions from it.
angular
.controller('MainDashboardCtrl', MainDashboardCtrl)
function MainDashboardCtrl(){
// Called functions here
}
<div ng-controller="MainDashboardCtrl as MDCtrl">
</div>
I am trying with EXT JS 4, Sencha Touch 2.0 and WebORB.
What I am trying to build a store in MVC of Sencha Touch through Ext dynamically.
I have called the below javascript function as below in the section in Index.html:
<script src="sencha-touch-all.js"></script>
<script src="webORB.js"></script>
<script>
var dataFetched;
var dataGet=function(){
<!-- Class Name and URL are replaced in the original program-->
this.proxy = webORB.bind("ClassName", "URL");
dataFetched=this.proxy.GetClassList(1301722);
//console.log(dataFetched);
}
</script>
<script src="app.js">
</script>
The following is my app.js
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'SBR',
controllers: [
'Main','Blog','Comments'
],
views : [
'Home','Blog', 'Comments'
],
models : ['Comments'],
stores: ['Comments'],
launch: function(){
dataGet();
console.log(dataFetched);
Ext.create('SBR.view.Viewport');
}
});
The following is my Comment.js - Store
Ext.define('SBR.store.Comments',{
extend: 'Ext.data.Store',
config: {
model: 'SBR.model.Comments',
data: dataFetched
}
});
The following is Comment.js - Model
Ext.define('SBR.model.Comments',{
extend: 'Ext.data.Model',
config: {
//fields: ['subject','body']
fields: ['bookImageUrl','authorFirstName','authorLastName']
}
})
The following is the Comment.js - View
Ext.define('SBR.view.Comments',{
extend: 'Ext.List',
xtype: 'commentspage',
config:{
title: 'Comments',
iconCls: 'star',
//indexBar: true,
store : 'Comments',
itemTpl: '{authorLastName}',
onItemDisclosure: function(item) {
console.log('Disclose more info on' + " " + item.data.subject);
}
}
});
If I define the store with static Json Data it is working fine, but when I try to access it with WebORB it does not.
The console entries are done before it shows data to the console. Why it is not showing any data in the comment's view or my approach is entirely wrong for collecting and loading data through WebORB to the store?
Oh Yes... I got it....
I just changed the following:
I transferred the function dataget() from index.html to Comments.js-Store and called the same function inside the config of the same file like:
data: dataGet()
Thats it...it worked..
Ext.define('MyApp.view.TopToolbar', {
extend: 'Ext.container.Container',
alias: 'widget.toptoolbar',
initComponent: function() {
Ext.applyIf(this, {
layout: 'fit',
cls : 'x-bottombar',
html : 'HTML FRAGMENT'
});
this.callParent(arguments);
}
});
Originally this component had contained a small fragment of html but now its going to be significantly increased. So I'd like to move it to an external file but I found no way in the docs to do this. Is there a way to do this? I don't want to have a big chunk of html in my js.
Use the loader configuration on the component:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-loader
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.ComponentLoader
How does one enable the loader when using ext.application?
Ext.application({
name: 'App',
launch: function () {
Ext.Loader.setConfig({enabled:true});
Ext.Loader.setPath('App','js/App');
Ext.create('App.view.SomeView');//this blows up in my face
}
});
This is what I'm currently doing, and its trying to open:
./App/view/SomeView
instead of
./js/App/view/SomeView
you can add appFolder like this:
Ext.Loader.setConfig({enabled:true});
Ext.application({
name: 'App',
appFolder: 'js/App', // maybe '/js/App'
launch: function () {
Ext.create('App.view.SomeView');
}
});
Maybe your code would work too, but you have to move your loader config out of launch() method because it fires after application is created and I guess that causes your problem.
In the 4.0.2a docs: http://docs.sencha.com/ext-js/4-0/#/...pp.Application
I see this:
Ext.application({
name: 'MyApp',
launch: function() {
Ext.create('Ext.container.Viewport', {
items: {
html: 'My App'
}
});
}
});
"This does several things. First it creates a global variable called 'MyApp' - all of your Application's classes (such as its Models, Views and Controllers) will reside under this single namespace, which drastically lowers the chances of colliding global variables."
When I run this code, I do not see a global variable called MyApp... does anybody else have this problem?
Here is my entire app (in a single HTML page):
<!DOCTYPE html>
<html>
<head>
<title>Testing ExtJS 4</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script>
<script type="text/javascript">
Ext.application({
name: 'MyApp',
launch: function() {
Ext.create('Ext.container.Viewport', {
items: {
html: 'My App'
}
});
}
});
Ext.onReady(function() {
alert(typeof MyApp);
});
</script>
</head>
<body></body>
</html>
it's not working because as the api states (guide/mvc application architecture):
"... All Ext JS 4 applications should only use a single global variable, with all of the application's classes nested inside it...".
If you try with this code:
Ext.application({
name: 'MyApp',
appFolder: '/app',
autoCreateViewport: true,
launch: function() {
console.log(MyApp);
}
});
you will see that the global variable exists. You don't need to access the application from any other place than the application itself
I get the same error, and here are what I found.
In index.html:
Ext.Loader.setConfig({enabled:true});
Ext.application({
name: 'MyApp',
controllers: ['Test'],
launch: function() {
Ext.create('Ext.container.Viewport', {
items: {
html: 'My App'
}
});
}
});
Ext.onReady(function() {
alert(typeof MyApp);
});
Create a small controller: app/controller/Test.js (/app has the same parent folder as /extjs)
Ext.define('MyApp.controller.Test', {
extend: 'Ext.app.Controller',
init: function() {
console.log('The controller was initialised');
}
});
When running, in Firebug you will see the MyApp global variable. However, a messagebox of 'undefined' still appeared for alert statement.
IMHO MyApp is an object to "maintains references to all of the models, views and controllers used by the app". Maybe extjs use some type of class "Dynamic loading"; so it will not create that global variable until there is something (controllers, views, models) to contain inside (I am not sure of this). In this case the variable must be created to contain the controller Test. However, I cannot explain the 'undefined' message for alert. Maybe at that time the Ext object is ready but "Dynamic loading" to create the viewport and the variable MyApp is not finished (not sure).
Hope this help.