As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I am very new to Sencha Touch framework, want to start with Sencha Touch 2.0 but not able to find any tutorial showing an application built using MVC Pattern and specifically in Sencha Touch version 2.0.
This is probably one of the earliest tutorials so be patient and know that things may change by the final release sees the light of day.
For MVC you're gonna want to set your folder structure first. Something like this:
MyApp
app
controller
model
profile
store
view
touch2
app.js
index.html
Now, let's start with a sample app.
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sample App</title>
<link rel="stylesheet" href="touch2/resources/css/sencha-touch.css" type="text/css" title="senchatouch" id="senchatouch" />
<link rel="stylesheet" href="touch2/resources/css/android.css" type="text/css" title="android" id="android" disabled="true" />
<link rel="stylesheet" href="touch2/resources/css/apple.css" type="text/css" title="apple" id="apple" disabled="true" />
<link rel="stylesheet" href="touch2/resources/css/bb6.css" type="text/css" title="blackberry" id="blackberry" disabled="true" />
<link rel="stylesheet" href="styles/main.css" type="text/css">
<script type="text/javascript" src="touch2/sencha-touch-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
app.js
Ext.Loader.setConfig({
enabled : true
});
Ext.application({
name: 'MyApp',
profiles: ['Tablet'],
views: [
// common Tablet & Phone views
],
models: [
],
controllers: [
'Main'
],
launch:function(){
Ext.Viewport.add(Ext.create('MyApp.view.Main'));
//Ext.Viewport.add(Ext.create('MyApp.view.tablet.Main'));
}
});
Good, now you have the two pivotal files in place and Ext.Loader will fetch framework components as needed for easier debugging.
First you set up your app's namespace (MyApp). That means that all your future classes will be defined under MyApp namespace.
Then you have defined the two main profiles. Tablet and Phone. They tell your app how to behave in different environments. Specify as many (or none) here.
Next, you've set up views, models, and controllers that are shared between the two profiles. They don't care whether you're using the app on a phone or a tablet.
Let's continue with our Tablet profile
app/profile/Tablet.js
Ext.define('MyApp.profile.Tablet', {
extend: 'Ext.app.Profile',
config: {
views: [
'Main'
]
},
isActive: function() {
return !Ext.os.is('Phone');
},
launch: function() {
Ext.create('MyApp.view.tablet.Main');
}
});
Pretty self-explanatory. Config object hold your views/models/controllers that are specific to the profile. They won't be used (included) if you're running the app on a smartphone.
isActive method needs to return true or false after evaluating the environment. I specifically said that Tablets are all non-phones. Logically that's incorrect, but I decided to play this way for simplicity. The more correct way would be
return Ext.os.is('Tablet') || Ext.os.is('Desktop');
The final bit of a profile is the launch method. It tells the app what to do when the app is launched in particular profile. MyApp will create the main view in Ext.Viewport.
Note that Ext.Viewport is an instance of Ext.Container that has already been added to DOM on app start.
Let's create our first view. It can be whatever widget you want, and I chose NavigationView.
app/views/Main.js
Ext.define('MyApp.view.Main', {
extend: 'Ext.navigation.View',
config: {
fullscreen : true,
items: [
{
title: 'My Great App'
}
]
}
});
It's fullscreen (100% width&height) and it immediately creates a TitleBar with title My Great App.
Have you noticed that we just defined MyApp.view.Main, but the app is going to expect MyApp.view.tablet.Main? Exactly because I wanted to show how you can reuse views between profiles. It's only useful if we're changing bits of them depending on the profile.
app/views/tablet/Main.js
Ext.define('MyApp.view.tablet.Main', {
extend: 'MyApp.view.Main',
initialize: function() {
this.add({
xtype : 'button',
action : 'coolBtn',
text : 'Running on a tablet'
});
this.callParent();
}
});
This looks great already. Just for the sake of extending I added additional button to the NavigationView. I'm going to set up a controller that will work with the button
app/controller/Main.js
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
coolButton: 'button[action=coolBtn]'
},
control: {
coolButton: {
tap: 'onCoolButtonTap'
}
},
routes: {
'show/:id' : 'showItem'
}
},
onCoolButtonTap: function(button) {
console.log(button === this.getCoolButton());
},
showItem: function(id) {
console.log('Showing item',id);
}
});
This is the awesome part, right here. Refs give us a quick access to components based on component query rules (button[action=coolBtn] means find my a xtype = button cmp that has property action = coolBtn). Refs add getter methods, too, as seen in onCoolButtonTap example.
Then I control the button and tell the app to monitor the tap event and assign a handler to it.
Another smart addition to the MVC pattern are routes. They will detect "commands" in your URI path, e.g. http://localhost/#show/7482 and execute them through the provided showItem handler.
Summary
I think that now you have the basic idea of how to start with your MVC app. With some curiosity you can expand the knowledge and create awesome apps.
Note that I've written this out of my head and haven't tested. Let me know if you find a typo or something.
Here are two videos from the sencha 2011 conference:
SenchaCon 2011: MVC in Depth Part 1
https://vimeo.com/33311074
and
SenchaCon 2011: MVC in Depth Part 2
https://vimeo.com/33430731
Also you can check their blog for other short tutorials.
Another video to better understand Sencha Touch 2
SenchaCon 2011: The Sencha Class System https://vimeo.com/33437222
Make sure you are using the Beta1 realease as it has the latest set of examples. If you take a look at the jog-with-friends example you can see how the class system works.
The first thing to understand is the application structure which consists of controllers, models, stores and views and how they are defined inside of Ext.Application...
They are still working on documentation and tutorials are scant, i learned the new class system from just looking at the sample app, take a look it will probably help to get you underway
Also the documentatikn for the class system is here: http://docs.sencha.com/touch/2-0/#!/guide/class_system
Edit: After posting this I saw that Beta2 is now released
Related
as i attempt to load modules with the creation of a gridx/grid, my script goes to that strange place where errors are handled by code that looks like gobbledy gook.
if i create the grid without the modules attribute the rows are displayed just fine. i am coding with worklight 6.1 in rational app developer 9.1, using dojo 1.9 that's (delivered with RAD).
my dojo includes are specified like this:
function dojoInit() {
require([ "dojo/ready", "dojo/parser", "dojox/mobile", "dojo/dom",
"dijit/registry", "dojox/mobile/ScrollableView",
"dojox/mobile/Heading", "dojox/mobile/ScrollablePane",
"dojox/mobile/Pane", "dojox/mobile/TextArea", "dojox/mobile/ContentPane",
"dojo/Deferred", "dojo/store/Memory",
"gridx/Grid", "gridx/core/model/cache/Sync", "dojox/mobile/Container",
"gridx/modules/SingleSort"],
function(ready) { ...
Here are my stylesheet links:
<link rel="stylesheet" href="css/dojo.css" />
<link rel="stylesheet" href="css/claro.css" />
<link rel="stylesheet" href="css/document.css" />
<link rel="stylesheet" href="css/Gridx.css" />
<link rel="stylesheet" href="css/Gridx_rtl.css" />
i moved the css files from gridx/resources/claro/Gridx.css and other locations within the dojo toolkit library to a known relative location, temporarily, in order to eliminate the possibility that the css files could not be resolved. and i am specifying just the 'claro' class in the div wherein this grid is placed. there is no difference in the behavior of the grid in either case.
My grid is created like this:
toStore=new dojo.store.Memory({ idProperty: 'PICYNO', data: resultSet });
toColumns=[
{ id: 'PICYNO', field: 'PICYNO', name: 'Cycle' , width: '80px' , editable: true },
{ id: 'PIDSC1', field: 'PIDSC1', name: 'Description' , width: '300px', editable: true },
{ id: 'PICYCS', field: 'PICYCS', name: 'Status' , width: '60px' , editable: true },
{ id: 'PPICSDJ',field: 'PPICSDJ', name: 'Date' , width: '80px' , editable: true },
{ id: 'PICYIT', field: 'PICYIT', name: 'Items' , width: '60px' , editable: true },
{ id: 'PICYLO', field: 'PICYLO', name: 'Locations' , width: '60px' , editable: true }
];
var cacheClass = "gridx/core/model/cache/Sync";
var tsGrid = new gridx.Grid({
id: 'idHeaderGrid',
cacheClass: cacheClass,
store: toStore,
// modules:[modules.SingleSort, modules.SelectRow],
// modules:[gridx.modules.SingleSort],
// modules:[gridx/modules/SingleSort],
// modules: [ SingleSort ],
// modules: [ Sort ],
structure: toColumns
});
tsGrid.placeAt('idGridContentPane');
tsGrid.startup();
if i comment all the lines that specifiy 'modules:' as you see, then the grid is displayed (but it's ugly, as if the stylesheets weren't applied at all.)
if i try any variation of specifying the standard sort module, this function will tank. i know it's probably because i'm not specifying my environment correctly, but i can't see how.
Any known problems with any of the versions that i'm using? any suggestion is appreciated.
--------- Updated ------------
I have progressed to the extent that i can display a grid, but the formatting is still off.
Based on the results of experimenting with a non-worklight project where i was able to materialize the grid with modules, and also realizing that with either type of project (web or worklight), i was able to resolve dojo and Gridx objects even though the javascript resources are configured differently, i decided to try a local require statement to specify the dojo modules in the immediate context and it worked. The original dojo configuration in worklight was ocnfigured in the main.js object that's automatically generated with a worklight application. it looked like this:
function wlCommonInit() {
require([ "layers/core-web-layer", "layers/mobile-ui-layer" ], dojoInit);
}
function dojoInit() {
require([ "dojo/ready", "dojo/parser", "dojox/mobile", "dojo/dom",
"dijit/registry", "dojox/mobile/ScrollableView",
"dojox/mobile/Heading", "dojox/mobile/ScrollablePane",
"dojox/mobile/Pane", "dojox/mobile/TextArea", "dojox/mobile/ContentPane",
"dojo/Deferred", "dojo/store/Memory", "dojox/mobile/Container",
"gridx/modules/SingleSort", "gridx/modules/ColumnResizer", "gridx/modules/RowHeader"
],
function(ready) {
ready(function() {
ccInit();
});
});
}
I removed the module declarations from the main.js and added them in the ccInit.js application where the grid is created, like this:
function populateGrid() {
require([
'dojo/store/Memory',
'gridx/Grid',
'gridx/core/model/cache/Sync',
'gridx/modules/SingleSort',
'gridx/modules/ColumnResizer',
'gridx/modules/RowHeader'
], function(Store, Grid, Cache, Sort, ColumnResizer, RowHeader) {
. . .
var tsGrid = new gridx.Grid({
id: 'idHeaderGrid',
cacheClass: Cache,
store: toStore,
modules: [ Sort, ColumnResizer, RowHeader ],
structure: toColumns,
selectRowTriggerOnCell: true
});
...
The grid is created successfully when it is created within an immediate require context as shown. Lots of dojo calls and even a grid without modules will work if i use the non-immediate approach.
The syles are still messed up, though. Column headings are blank and the table looks nothing like a claro-styled grid. I am sure that i have set up the css includes in the html header correctly (using my working web project as a model). Is there some worklight initialization or 'skin' overlay that's messing this up?
Thanks for any comment.
--- workaround is to refer to all classes, locally.
I solved the problem with stylesheets by creating the gridx.css in the common\css folder, then I edited it by replacing each #import with a copy/paste of the imported css source. So my gridx.css is a merge of all the source code from all the imports. i point to that css\gridx in my header link and i get reasonable results.
So in summary, i had to explicitly require the gridx classes in the custom function rather than in the dojo require statement in the main.js. And i had to merge all of the gridx styles and refer to them locally as well. The problem where gridx.css and other style sheets are not resolved through relative path includes that point to the dojo toolkit seems like a bug. Those stylesheets seem to be loaded in the run-time-generated server as evidenced by the console messages that look like this:
Failed to load resource: the server responded with a status of 404 (Not Found) http://myWLdevServer.mycomputer.local:10080/JustGridx/apps/services/preview/JustGridx/common/0/default/dojo/gridx/resources/claro/Gridx.css
If a developer is supposed to do some kind of server config to point to those CSS files, then I'm not seeing it.
I am leaving this post as unsolved in case someone agrees with me that this is a bug at worst or is not intuitive and should be documented at best.
From the comments by user3208130:
Sorry for not following up for all this time. i did finally work
around the problem by not importing anything. I copied the main
gridx.css from gridx\resources into my project, and then for each of
the imports listed in that file, i copy/pasted the source from the
various locations within the gridx collection as well as all of the
claro css files since gridx only uses that font. i had to turn off
theme switching depending on the device since claro looks awful on
windows8 and android otherwise.
I know this makes no sense, but i tried every variation of relative and explicit path that i could imagine for the import
statements in both of the html header and within the main css files
and nothing else worked. i suspected that the css files are not copied
automatically when device environments are created but i couldn't
prove that.
Hi I am looking for tutorial based on Dojo 1.8.
What I am looking for is:- create and instantiate widget pragmatically after dojo page fully loaded and parsed, triggered after dojo/on button. I am not sure of which tutorial in Dojo website, for me to learn.
Please advise.
Thanks in advance.
Clement
There isn't one tutorial that fully answer all your question but the following will be helpful:
Dojo Events tutorial and dojo/on reference
dojo/ready reference
dojo/parser reference
To capture both the full loading of the page and parsing you need to use a combination of dojo/ready and dojo/parser. (I'm assuming that the parsing you refer to is the dojo widget parser, rather than the standard browser parsing of HTML).
To run code after parsing you'll need to add parseOnLoad: false to your dojoConfig and run the parser manually; otherwise, there is no way of capturing when it is complete.
<script type="text/javascript" async="true">
require([
"dojo/ready",
"dojo/parser",
"dojo/on,
"dojo/query"
], function(
ready, parser, on, $
){
ready(function(){
// Only run after the page is fully loaded
parser.parse().then(function(instances){
// Only run after parser has parsed the page
var myButton = $("#myButtonid"); // Find your button
if(myButton.length > 0){ // Check button is found
on(myButton[0], "click", function(evt){
// ... add your code here to create and
// instantiate widget
});
}
});
});
}
</script>
Don't forget that you need to turn off automatic parsing of widgets in you dojoConfig, hence, something like this (in the head):
<script type="text/javascript">
dojoConfig= {
"parseOnLoad": false,
"async": true
// ...other settings
};
</script>
I need some help as well as some advice on how to use Dojo correctly in my project. At the moment, this is what I'm doing:
Say I setup a project named 'Test'. Test.html is the first file hit, and in that file I have the following:
<script type="text/javascript" data-dojo-config="isDebug: false, async: true, parseOnLoad: true" src="dojo/dojo.js"></script>
<script type="text/javascript" src="dojo/core-web-layer.js"></script>
<script type="text/javascript" src="dojo/mobile-ui-layer.js"></script>
<script type="text/javascript" src="dojo/mobile-compat-layer.js"></script>
<script type="text/javascript">
require(
// Set of module identifiers
[ "dojo", "dojox/mobile/parser", "dojox/mobile/SwapView", "dojox/mobile", "dojox/mobile/compat", "dojox/mobile/deviceTheme", "dojox/mobile/ScrollableView" ],
// Callback function, invoked on dependencies evaluation results
function(dojo) {
dojo.ready(function() {});
});
</script>
I also have this in Test.js:
require([ "dojo", "dojox/mobile/parser", "dojox/mobile/deviceTheme",
"dojox/mobile/ScrollableView", "dojox/mobile/compat", "dojox/mobile",
"dojox/mobile/Button", "dojox/mobile/View", "dojox/mobile/Heading",
"dojox/mobile/TabBarButton", "dojox/mobile/TabBar",
"dojox/mobile/TextBox", "dojox/mobile/RoundRectList",
"dojox/mobile/ListItem", "dojox/mobile/Button",
"dojox/mobile/SpinWheel", "dojox/mobile/SpinWheelSlot",
"dojox/mobile/IconContainer", "dojox/mobile/SwapView" ],
function(dojo, parser) {
dojo.ready(function() {
});
});
Now, when I click a on one of my buttons, it triggers the WL.Page.Load method and my pagePort div now shows my new page inside of my Test.html page (let's say this is Page2.html), however, there's a problem. The Dojo stuff works fine on page one, but now it doesn't work on page two. I'm not sure what's happening behind the scenes but I feel I'm missing a step (do I need to unload Dojo? Declare it again in the next page?).
If somebody could help me get Dojo working on this second page so I'm able to use Dojo on further pages (after learning what I'm doing wrong) I would be really grateful!
My best guess based on the info you've given is that Page2.html is not really inside Test.html and its a new page. In this case you will need to have the script references in Page2 as well.
If you're testing your code in a web browser you can view the Console and hopefully gain some insight as to what exactly is going wrong.
You can also try working with the Worklight logger to help locate the problem.
http://wpcertification.blogspot.com/2012/03/enabling-debuglog-console-in-worklight.html
Here is a general link for "Problem Determination" from IBM as well
http://publib.boulder.ibm.com/infocenter/ieduasst/v1r1m0/index.jsp?topic=/com.ibm.iea.worklight/worklight/5.0/Problem_Determination/IMFV50_ProblemDetermination/player.html
As Nick said if you load totally different HTML page you will have that page to declare the classes your are using. In dojox/mobile/tests see test_IconContainer.html for example.
That said you could proceed differently by for example having your alternate views defined in the same HTML or as your are in Worklight by using the fragment mechanism (see https://www.ibm.com/developerworks/mobile/worklight/getting-started/ modules 60.1, 2 and 3).
I'm working on a project that requires that some custom Dojo widgets (i.e., widgets we have written ourselves) are loaded from another server. Despite my best efforts over several days, I cannot seem to get Dojo to load the widgets.
Dojo is loaded from the Google CDN, the widget is loaded from www.example.com, and the website is located at www.foo.com.
I cannot post the actual project files (this is a project for a company), but I have reproduced the error with smaller test files.
Test.html (on www.foo.com):
<html>
<div id="content"></div>
<script>
var djConfig = {
isDebug: true,
modulePaths: {
'com.example': 'http://example.com/some/path/com.example'
}
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.4.3/dojo/dojo.xd.js.uncompressed.js"></script>
<script type="text/javascript">
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.addOnLoad(function() {
dojo.require("com.example.widget.Test", false);
dojo.addOnLoad(function() {
new com.example.widget.Test().placeAt(dojo.byId('content'));
});
});
</script>
</html>
Test.xd.js (at www.example.com/some/path/com.example/widget/Test.xd.js):
dojo.provide("com.example.widget.Test");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.declare("com.example.widget.Test", [dijit._Widget, dijit._Templated], {
templateString: "<div dojoAttachPoint=\"div\">This is a test</div>",
postCreate: function() {
console.log("In postCreate");
console.log(this.div);
this.div.innerHTML += '!!!';
}
});
In Firebug, I am seeing an error after a delay of a few seconds saying that the cross-domain resource com.example.widget.Test cannot be loaded. However, in the 'Net' tab I am able to see that Test.xd.js is successfully downloaded, and I am able to set a breakpoint and see that the dojo.declare executes and completes without error.
I appreciate any help. Please let me know if there is any other information I can provide.
There is a different way for handling the module declarations in XD-loader. This is due to how the loader handles 'module-ready' event. You will most likely experience, that the dojo.addOnLoad never runs, since it 'knows' that certainly - some required modules are not declared.
Even so, they may very well be declared - and the change in 1.7+ versions of dojotoolkit seem to reckognize that fact. The reason for this, i believe, is that the mechanism for 'module-ready' is not implemented correctly in your myModule.xd.js modules.
It is basically a 'header' or 'closure' of the declaration, involving a few steps - wrapping everything in your basic module from dojo.provide and eof
Standard example boiler module file '{{modulePath}}/my/Tree.js'
dojo.provide("my.Tree");
dojo.require("dijit.Tree");
dojo.declare("my.Tree", dijit.Tree, {
// class definition
});
X-Domain example boiler module file '{{modulePath}}/my/Tree.xd.js
dojo._xdResourceLoaded(function(){
return {
depends: [
["provide", "my.Tree"],
["require", "dijit.Tree"]
],
defineResource: function(dojo) {
///////////////////////////////
/// Begin standard declaration
dojo.provide("my.Tree");
dojo.require("dijit.Tree");
dojo.declare("my.Tree", dijit.Tree, {
// class definition
});
/// End standard declaration
///////////////////////////////
}
}
})();
I want to use a simple Sencha Touch keypad plugin.
The plugin code can be found over here.
The keypad can be created in an html file under tags as follows:
<script>
Ext.setup({
onReady: function () {
var basic = new Ext.ux.Keypad();
basic.render('keypad');
}
});
</script>
<div id="keypad"/>
Alternatively, it can be used in a Sencha container as follows too:
...
items:[
{
xtype: 'keypad'
}
]
However, I am not able to get it to work the latter way. I'm new to Sencha and I think I'm not placing the files at the right places or not including them properly. I have already included the following in my index.html:
<script type="text/javascript" charset="utf-8" src="js/sencha-touch-1.1.1/sencha-touch.js"></script>
<link rel="stylesheet" type="text/css" href="js/sencha-touch-1.1.1/resources/css/sencha-touch.css">
<script src="js/Keypad.js" type="text/javascript" charset="utf-8"></script>
Can someone let me know what modifications are necessary in which files so that I can use the keypad plugin directly in a container?
in your app.js file you need to set path for the plugin folder in the loader...
put the ux (plugin)folder where your app.js is located...
in app.js set the following
Ext.Loader.setPath('Ext.ux', 'ux');
On the view where you are using the numpad you need to specify a
requires: ['Ext.ux.NumPad' ...] //All plugin related files
Also ensure that the CSS files are in the proper location...
Hope it helps...