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..
Related
I'm a bit confused by the Sencha Touch documentation. In their Create your first app tutorial, they show a bit of code to create a panel:
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [
{
title: 'Home',
iconCls: 'home',
html: 'Welcome'
}
]
});
}
});
In the code, the fullscreen and items properties are at the base level of the json being passed in, but when you look at the api documentation for Ext.tab.Panel, both properties are found under the 'Configs' section and not the 'Properties' section.
I know that there are instances where I would need to put json encoded properties in a config property. Like this:
Ext.define('User', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' }
]
}
});
How do I determine what should go into the config property and what shouldn't? I'm having a hard time trying to find the explanation in the documentation.
Additional clarification to selected Answer:
In the first instance where we're using Ext.create("Ext.tab.Panel",... We're creating an instance of the Panel class. We're applying the configs directly to the instance of the Panel that will be created.
In the second instance where we're using Ext.define('User', { extend: 'Ext.data.Model', ..., we're creating a class called User by extending the class Model. The properties defined in the config property will be used to configure the Model class while any other properties outside of the config property will be used to configure the User class.
The braces are the configuration you're passing to create an instance. You're passing fullscreen & items as configurations to the tab panel. You're passing title, iconCls & html to the panel.
You only need to use the config block when defining your own classes, not instantiating them.
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.
i try migrate a developement environment to production with SDK Sencha tool.
But the proccess of building exclude of the "app-all.js" all models and stores defined in my App folder.
Only loads views and controllers. Any ideas why does this happen ?
Regards !.
Edit form more info:
For example mi cocina.js works as an app.js:
Ext.Loader.setConfig({
enabled : true,
paths: {
Ext: 'vendor/ext/src',
My: 'app'
}
});
Ext.application({
name: 'Alnitak',
appFolder: 'app',
controllers: ['Env','Cocina'],
launch: function(){
...
}
});
An the cocina controller:
Ext.define('Alnitak.controller.Cocina', {
extend: 'Ext.app.Controller',
store: [
'PlatosArmados',
'Niveles',
'Submenues',
'AlumnosPlato'
],
model: [
'PlatoArmado',
'Nivel',
'Submenu',
'AlumnoPlato'
],
views: [
'grid.PlatoArmado',
'grid.AlumnoPlato'
],
init: function() { ...}
});
What i have modify ?
Assuming you mean Sencha Command and not SDK, you have to change a few things:
Specify all your js paths in .sencha/app/sencha.cfg (parent folder is enough)
Build a new template app (http://docs.sencha.com/cmd/) and follow the pattern, not the Sencha Architect pattern for the Loader you use above. Sencha Cmd has its own way of handling javascript loading. You would not need to specify the paths with Ext.Loader.setConfig()
If you want to use the Architect pattern though, here's the guide.
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
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.