Using SenCha with Cordova, no app content shows

Night Digger

unread,

Mar 13, 2014, 8:50:57 PM3/13/14

to phon...@googlegroups.com

I am using SenCha Touch 2.3.1 with SenCha CMD 4.0.2.67 in conjunction with Cordova 3.4.
The purpose of my doing is to know how to use SenCha tools to create the mobile app and then using SenCha CMD + Cordova to build and run on Android and Windows Phone 8 platforms.(I have set up both environment on my PC and managed to build and run my mobile app just with Cordova for Android and WP8).

Now, I followed the tutorial on SenCha about creating the 1st app(http://docs.sencha.com/touch/2.3.0/#!/guide/first_app), encountered many odd crashes but fortunately, I somehow fixed all of them(I'm surprised by myself).The learning procedure is very exciting for me so far and I found that SenCha CMD and even starts WP and Android emulators!
Now the problem is : when I execute the command: -> sencha app build -run native Both platforms have my app generated and run, but the panels I created under SenCha, do not show up. What I get is the launching screen with 4 flashing dots. It supposes to show a UI which has 3 tabPanels.

Here is my app.js:

Code:

launch: function () {        // Destroy the #appLoadingIndicator element        Ext.fly('appLoadingIndicator').destroy();        Ext.create("Ext.tab.Panel", {            fullscreen: true,            tabBarPosition: "bottom",            items: [                {                    title: 'Home',                    iconCls: 'home',                    cls: 'home',                    html: [                         '<img src="http://staging.sencha.com/img/sencha.png" />',                        '<h1>Welcome to Sencha Touch</h1>',                        "<p>You're creating the Getting Started app. This demonstrates how ",                        "to use tabs, lists, and forms to create a simple app.</p>",                        '<h2>Sencha Touch</h2>'                    ].join("")                },                { // the 2nd item}, {// the 3rd one}

And here is what the SenCha generated under MyApp/cordova/platforms/wp8 in index.html

Code:

<!DOCTYPE HTML><html manifest="" lang="en-US"><head>    <meta charset="UTF-8">    <title>MySenCha</title>    <style type="text/css">        /**         * Example of an initial loading indicator.         * It is recommended to keep this as minimal as possible to provide instant feedback         * while other resources are still being loaded for the first time         */        html, body {            height: 100%;            background-color: #1985D0;        }        #appLoadingIndicator {            position: absolute;              // many lines of generated css            }        }    </style>    <!-- The line below must be kept intact for Sencha Command to build your application -->    <script type="text/javascript">(function(e){var c=e.document.head||e.document.getElementsByTagName("head")[0],b=e.Ext;if(typeof b=="undefined"){e.Ext=b={}}function d(f){document.write(f)}function a(f,g){var h=document.createElement("meta");h.setAttribute("name",f);h.setAttribute("content",g);c.appendChild(h)}b.blink=function(q){var k=q.js||[],o=q.css||[],m,n,p,h,l,g;if(navigator.userAgent.match(/IEMobile\/10\.0/)){var j=document.createElement("style");j.appendChild(document.createTextNode("@media screen and (orientation: portrait) {@-ms-viewport {width: 320px !important;}}@media screen and (orientation: landscape) {@-ms-viewport {width: 560px !important;}}"));document.getElementsByTagName("head")[0].appendChild(j)}a("viewport","width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no");a("apple-mobile-web-app-capable","yes");a("apple-touch-fullscreen","yes");b.microloaded=true;var f=window.Ext.filterPlatform=function(u){var D=false,s=navigator.userAgent,w,A;u=[].concat(u);function z(E){var i=/Mobile(\/|\s)/.test(E);return/(iPhone|iPod)/.test(E)||(!/(Silk)/.test(E)&&(/(Android)/.test(E)&&(/(Android 2)/.test(E)||i)))||(/(BlackBerry|BB)/.test(E)&&i)||/(Windows Phone)/.test(E)}function y(i){return !z(i)&&(/iPad/.test(i)||/Android|Silk/.test(i)||/(RIM Tablet OS)/.test(i)||(/MSIE 10/.test(i)&&/; Touch/.test(i)))}var r=window.location.search.substr(1),t=r.split("&"),v={},B,x;for(x=0;x<t.length;x++){var C=t[x].split("=");v[C[0]]=C[1]}B=v.platform;if(B){return u.indexOf(B)!=-1}for(w=0,A=u.length;w<A;w++){switch(u[w]){case"phone":D=z(s);break;case"tablet":D=y(s);break;case"desktop":D=!z(s)&&!y(s);break;case"ios":D=/(iPad|iPhone|iPod)/.test(s);break;case"android":D=/(Android|Silk)/.test(s);break;case"blackberry":D=/(BlackBerry|BB)/.test(s);break;case"safari":D=/Safari/.test(s)&&!(/(BlackBerry|BB)/.test(s));break;case"chrome":D=/Chrome/.test(s);break;case"ie10":D=/MSIE 10/.test(s);break;case"windows":D=/MSIE 10/.test(s)||/Trident/.test(s);break;case"tizen":D=/Tizen/.test(s);break;case"firefox":D=/Firefox/.test(s)}if(D){return true}}return false};for(m=0,n=o.length;m<n;m++){p=o[m];if(typeof p!="string"){h=p.platform;g=p.exclude;l=p.theme;p=p.path}if(h){if(!f(h)||f(g)){continue}if(!b.theme){b.theme={}}if(!b.theme.name){b.theme.name=l||"Default"}}d('<link rel="stylesheet" href="'+p+'">')}for(m=0,n=k.length;m<n;m++){p=k[m];if(typeof p!="string"){h=p.platform;g=p.exclude;p=p.path}if(h){if(!f(h)||f(g)){continue}}d('<script src="'+p+'"><\/script>')}}})(this);Ext.blink({id:"19f378b6-7681-4874-9579-87ab900c2cde",js:[{path:"cordova.js",remote:true},{path:"app.js",update:"delta"}],css:[{path:"resources/css/app.css",update:"delta"}]});</script></head><body>    <div id="appLoadingIndicator">        <div></div>        <div></div>        <div></div>    </div></body></html>

As you can see here "Ext.Blink(id......., .... ,...., js:[xxxx,'app.js'])".
So here is the app.js under wp8/www folder

Code:

(function(){var global=this,...many code more than 570000 letters, so I have to cut the m down..................if(window.scrollY!==0){window.scrollTo(0,0)}}})}}});Ext.define("Ext.viewport.WindowsPhone",{requires:[],alternateClassName:"Ext.viewport.WP",extend:Ext.viewport.Default,config:{translatable:{translationMethod:"csstransform"}},initialize:function(){var a=function(d){var c=d.srcElement.nodeName.toUpperCase(),b=["INPUT","TEXTAREA"];if(b.indexOf(c)==-1){return false}};document.body.addEventListener("onselectstart",a);this.callParent(arguments)},supportsOrientation:function(){return false},onResize:function(){this.waitUntil(function(){var c=this.windowWidth,f=this.windowHeight,e=this.getWindowWidth(),a=this.getWindowHeight(),d=this.getOrientation(),b=this.determineOrientation();return((c!==e&&f!==a)&&d!==b)},function(){var b=this.getOrientation(),a=this.determineOrientation();this.fireOrientationChangeEvent(a,b)},Ext.emptyFn,250)}});Ext.define("Ext.viewport.Viewport",{constructor:function(b){var c=Ext.os.name,d,a;switch(c){case"Android":d=(Ext.browser.name=="ChromeMobile")?"Default":"Android";break;case"iOS":d="Ios";break;case"Windows":d=(Ext.browser.name=="IE")?"WindowsPhone":"Default";break;case"WindowsPhone":d="WindowsPhone";break;default:d="Default";break}a=Ext.create("Ext.viewport."+d,b);return a}});Ext.define("MySenCha.view.Main",{extend:Ext.tab.Panel,xtype:"main",config:{tabBarPosition:"bottom",items:[{title:"My Home",iconCls:"home",styleHtmlContent:true,scrollable:true,items:{docked:"top",xtype:"titlebar",title:"Welcome to Sencha Touch 2"},html:["You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ","contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ","and refresh to change what's rendered here."].join("")},{title:"Get Started",iconCls:"action",items:[{docked:"top",xtype:"titlebar",title:"Getting Started"},{xtype:"video",url:"http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c",posterUrl:"http://b.vimeocdn.com/ts/261/062/261062119_640.jpg"}]}]}});Ext.application({name:"MySenCha",views:["Main"],icon:{"57":"resources/icons/Icon.png","72":"resources/icons/Icon~ipad.png","114":"resources/icons/Ic...@2x.png","144":"resources/icons/Icon~ip...@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(){Ext.fly("appLoadingIndicator").destroy();Ext.create("Ext.tab.Panel",{fullscreen:true,tabBarPosition:"bottom",items:[{title:"Home",iconCls:"home",cls:"home",html:['<img src="http://staging.sencha.com/img/sencha.png" />',"<h1>Welcome to Sencha Touch</h1>","<p>You're creating the Getting Started app. This demonstrates how ","to use tabs, lists, and forms to create a simple app.</p>","<h2>Sencha Touch</h2>"].join("")},{xtype:"nestedlist",title:"Blog",iconCls:"star",displayField:"title",store:{type:"tree",fields:["title","link","author","contentSnippet","content",{name:"leaf",defaultValue:true}],root:{leaf:false},proxy:{type:"jsonp",url:"https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog",reader:{type:"json",rootProperty:"responseData.feed.entries"}}},detailCard:{xtype:"panel",scrollable:true,styleHtmlContent:true},listeners:{itemtap:function(e,d,a,c,b){this.getDetailCard().setHtml(b.get("content"))}}},{title:"Contact",iconCls:"user",xtype:"formpanel",url:"contact.php",layout:"vbox",items:[{xtype:"fieldset",title:"Contact Us",instructions:"(email address is optional)",height:285,items:[{xtype:"textfield",label:"Name"},{xtype:"emailfield",label:"Email"},{xtype:"textareafield",label:"Message"}]},{xtype:"button",text:"Send",ui:"confirm",handler:function(){this.up("formpanel").submit()}}]}]})},onUpdated:function(){Ext.Msg.confirm("Application Update","This application has just successfully been updated to the latest version. Reload now?",function(a){if(a==="yes"){window.location.reload()}})}});

If you could read to here, I thank you. I finally found where my code, as you might see that my code has been included in the app.js under wp8/www folder.
But when I tried to run from the index.html or deploy the app onto my device, I only got Cordova splash screen and a blue screen, no my tab panels at all.

I also checked the log generated during building and running my app and found that when running WP8 app, it said :
[TypeError: undefined is not a function]

Then I when to the generated index.html and did find many of them.
I feel like I am very close to the final success of my learning.
Could someone please help me. I thank you very much!

Night Digger

unread,

Mar 13, 2014, 8:52:55 PM3/13/14

to phon...@googlegroups.com

Here is an update:

Now, I followed someone's instruction.
1. I did the sencha app build production successfully.
2. Copied all files under MySenCha\build\production\MySenCha to the folder MySenCha\cordova\www

Click image for larger version

Name: insidesencha.png
Views: 2
Size: 12.2 KB
ID: 48281

3. ran cordova platform add wp8 (I'd like try this first, as launching Android emulator is extremely slow(about 5 mins....))
When I did this command line, the creation was successful with a warning as you can see below:

Code:

F:\Workplace\MySenCha\cordova>cordova platform add wp8
Checking wp8 requirements...
Creating wp8 project...
platformRoot = C:\Users\franv_000\.cordova\lib\wp\cordova\3.4.0\wp8
repoRoot = C:\Users\franv_000\.cordova\lib\wp\cordova\3.4.0
Creating Cordova-WP8 Project:
        App Name : MySenCha
        Namespace : com.wintech.MySenCha
        Path : F:\Workplace\MySenCha\cordova\platforms\wp8
CREATE SUCCESS : F:\Workplace\MySenCha\cordova\platforms\wp8
Preparing wp8 project
[TypeError: undefined is not a function]

4. ran cordova run wp8,
I got the app deployed on the WP8 emulator and when app launched inside it, it just stays there, it should then displaying a tabPlanel container which has 3 tabPanels inside.
I also quoted the log in the hope that you could spot something wrong.
(I do see the error at the last line of the log: The system cannot find the file specified.)

Click image for larger version

Name: QQ截图20140314005811.png
Views: 2
Size: 15.6 KB
ID: 48283

Code:

F:\Workplace\MySenCha\cordova>cordova run wp8
Preparing wp8 project
[TypeError: undefined is not a function]
Running command: cmd args=["/c","F:\\Workplace\\MySenCha\\cordova\\platforms\\wp8\\cordova\\run"]
WARNING: [ --target=<ID> | --emulator | --device ] not specified, defaulting to --emulator
WARNING: [ --debug | --release | --nobuild ] not specified, defaulting to --debug.


Cleaning cordova project...
Building Cordova-WP8 Project:
        Configuration : Debug
        Directory : F:\Workplace\MySenCha\cordova\platforms\wp8
Building the projects in this solution one at a time. To enable parallel build, please add the "/m" switch.
  MySenCha -> F:\Workplace\MySenCha\cordova\platforms\wp8\Bin\Debug\com.wintech.MySenCha.dll
  Begin application manifest generation
  Application manifest generation completed successfully
  Begin Xap packaging
BUILD SUCCESS.


CordovaDeploy.exe not found, attempting to build CordovaDeploy.exe...
Microsoft (R) Build Engine version 4.0.30319.33440
[Microsoft .NET Framework, version 4.0.30319.34011]
Copyright (C) Microsoft Corporation. All rights reserved.


Building the projects in this solution one at a time. To enable parallel build, please add the "/m" switch.
Build started 3/14/2014 12:54:08 AM.
Project "F:\Workplace\MySenCha\cordova\platforms\wp8\cordova\lib\CordovaDeploy\CordovaDeploy.sln" on node 1 (default targets).
ValidateSolutionConfiguration:
  Building solution configuration "Debug|x86".
Project "F:\Workplace\MySenCha\cordova\platforms\wp8\cordova\lib\CordovaDeploy\CordovaDeploy.sln" (1) is building "F:\Workplace\MySenCha\cordova\platforms\wp8\c
ordova\lib\CordovaDeploy\CordovaDeploy\CordovaDeploy.csproj" (2) on node 1 (default targets).
PrepareForBuild:
  Creating directory "bin\Debug\".
  Creating directory "obj\x86\Debug\".
ResolveAssemblyReferences:
  Consider app.config remapping of assembly "Microsoft.SmartDevice.Connectivity, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" from Version "10.0.0.0" [C:\W
INDOWS\Microsoft.Net\assembly\GAC_MSIL\Microsoft.SmartDevice.Connectivity\v4.0_10.0.0.0__b03f5f7f11d50a3a\Microsoft.SmartDevice.Connectivity.dll] to Version "11
.0.0.0" [C:\WINDOWS\Microsoft.Net\assembly\GAC_MSIL\Microsoft.Smartdevice.Connectivity\v4.0_11.0.0.0__b03f5f7f11d50a3a\Microsoft.Smartdevice.Connectivity.dll] t
o solve conflict and get rid of warning.
C:\Windows\Microsoft.NET\Framework\v4.0.30319\Microsoft.Common.targets(1605,5): warning MSB3247: Found conflicts between different versions of the same dependen
t assembly. [F:\Workplace\MySenCha\cordova\platforms\wp8\cordova\lib\CordovaDeploy\CordovaDeploy\CordovaDeploy.csproj]
GenerateTargetFrameworkMonikerAttribute:
Skipping target "GenerateTargetFrameworkMonikerAttribute" because all output files are up-to-date with respect to the input files.
CoreCompile:
  C:\Windows\Microsoft.NET\Framework\v4.0.30319\Csc.exe /noconfig /nowarn:1701,1702 /nostdlib+ /platform:x86 /errorreport:prompt /warn:4 /define:DEBUG;TRACE /ma
in:CordovaDeploy.DeployTool /highentropyva+ /reference:"C:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\.NETFramework\v4.5\Microsoft.CSharp.dll"
 /reference:C:\WINDOWS\Microsoft.Net\assembly\GAC_MSIL\Microsoft.Smartdevice.Connectivity\v4.0_11.0.0.0__b03f5f7f11d50a3a\Microsoft.Smartdevice.Connectivity.dll
 /reference:C:\WINDOWS\Microsoft.Net\assembly\GAC_MSIL\Microsoft.Smartdevice.Connectivity.Interface\v4.0_11.0.0.0__b03f5f7f11d50a3a\Microsoft.Smartdevice.Connec
tivity.Interface.dll /reference:C:\WINDOWS\Microsoft.Net\assembly\GAC_MSIL\Microsoft.Smartdevice.MultiTargeting.Connectivity\v4.0_11.0.0.0__b03f5f7f11d50a3a\Mic
rosoft.Smartdevice.MultiTargeting.Connectivity.dll /reference:"C:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\.NETFramework\v4.5\mscorlib.dll"
/reference:"C:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\.NETFramework\v4.5\System.Core.dll" /reference:"C:\Program Files (x86)\Reference Ass
emblies\Microsoft\Framework\.NETFramework\v4.5\System.Data.DataSetExtensions.dll" /reference:"C:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\.N
ETFramework\v4.5\System.Data.dll" /reference:"C:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\.NETFramework\v4.5\System.dll" /reference:"C:\Prog
ram Files (x86)\Reference Assemblies\Microsoft\Framework\.NETFramework\v4.5\System.Xml.dll" /reference:"C:\Program Files (x86)\Reference Assemblies\Microsoft\Fr
amework\.NETFramework\v4.5\System.Xml.Linq.dll" /debug+ /debug:full /filealign:512 /optimize- /out:obj\x86\Debug\CordovaDeploy.exe /subsystemversion:6.00 /targe
t:exe /utf8output Program.cs Properties\AssemblyInfo.cs "C:\Users\franv_000\AppData\Local\Temp\.NETFramework,Version=v4.5.AssemblyAttributes.cs"
Program.cs(284,46): warning CS0168: The variable 'ex' is declared but never used [F:\Workplace\MySenCha\cordova\platforms\wp8\cordova\lib\CordovaDeploy\CordovaD
eploy\CordovaDeploy.csproj]
_CopyAppConfigFile:
  Copying file from "app.config" to "bin\Debug\CordovaDeploy.exe.config".
CopyFilesToOutputDirectory:
  Copying file from "obj\x86\Debug\CordovaDeploy.exe" to "bin\Debug\CordovaDeploy.exe".
  CordovaDeploy -> F:\Workplace\MySenCha\cordova\platforms\wp8\cordova\lib\CordovaDeploy\CordovaDeploy\bin\Debug\CordovaDeploy.exe
  Copying file from "obj\x86\Debug\CordovaDeploy.pdb" to "bin\Debug\CordovaDeploy.pdb".
Done Building Project "F:\Workplace\MySenCha\cordova\platforms\wp8\cordova\lib\CordovaDeploy\CordovaDeploy\CordovaDeploy.csproj" (default targets).
Done Building Project "F:\Workplace\MySenCha\cordova\platforms\wp8\cordova\lib\CordovaDeploy\CordovaDeploy.sln" (default targets).


Build succeeded.


"F:\Workplace\MySenCha\cordova\platforms\wp8\cordova\lib\CordovaDeploy\CordovaDeploy.sln" (default target) (1) ->
"F:\Workplace\MySenCha\cordova\platforms\wp8\cordova\lib\CordovaDeploy\CordovaDeploy\CordovaDeploy.csproj" (default target) (2) ->
(ResolveAssemblyReferences target) ->
  C:\Windows\Microsoft.NET\Framework\v4.0.30319\Microsoft.Common.targets(1605,5): warning MSB3247: Found conflicts between different versions of the same depend
ent assembly. [F:\Workplace\MySenCha\cordova\platforms\wp8\cordova\lib\CordovaDeploy\CordovaDeploy\CordovaDeploy.csproj]




"F:\Workplace\MySenCha\cordova\platforms\wp8\cordova\lib\CordovaDeploy\CordovaDeploy.sln" (default target) (1) ->
"F:\Workplace\MySenCha\cordova\platforms\wp8\cordova\lib\CordovaDeploy\CordovaDeploy\CordovaDeploy.csproj" (default target) (2) ->
(CoreCompile target) ->
  Program.cs(284,46): warning CS0168: The variable 'ex' is declared but never used [F:\Workplace\MySenCha\cordova\platforms\wp8\cordova\lib\CordovaDeploy\Cordov
aDeploy\CordovaDeploy.csproj]


    2 Warning(s)
    0 Error(s)


Time Elapsed 00:00:00.29


CordovaDeploy.exe compiled, SUCCESS.
Deploying to emulator ...
Connecting to device :: 5E7661DF-D928-40ff-B747-A4B1957194F9 : Emulator WVGA 512MB
Installing app on Emulator WVGA 512MB
Launching app on Emulator WVGA 512MB
The system cannot find the file specified.

I highly appreciate any help and suggestions for me to overcome my 1st-time difficulties and really hope at the end of today before going to sleep, I could see my 1st Cordova/SenCha app runs on the emulator.

Thank you !

Night Digger

unread,

Mar 13, 2014, 9:07:22 PM3/13/14

to phon...@googlegroups.com

Also, I did find the article about using SenCha with PhoneGap and followed its instructions, but still the result is same.

Here is the article http://phonegap.com/blog/2013/11/20/SenchaPhoneGap/

Someone please help.

I think both PhoneGap/Cordova and SenCha Touch are great frameworks for mobile app developers, but there should be a document which has detailed and up-to-date instructions for our developers.

Anyone please replies to this post if you think you would need the knowledge mentioned in my post and I thank you for your help.

Night Digger

unread,

Mar 14, 2014, 5:27:10 AM3/14/14

to phon...@googlegroups.com

Hello???? Can someone help please???????

sheps-ii

unread,

Mar 14, 2014, 5:31:36 AM3/14/14

to phon...@googlegroups.com

tl;dr - forgive me please.

Are you aware of this article?

http://docs.sencha.com/touch/2.3.0/#!/guide/cordova

On Friday, 14 March 2014 09:27:10 UTC, Night Digger wrote:

Hello???? Can someone help please???????

Night Digger

unread,

Mar 14, 2014, 5:37:12 AM3/14/14

to phon...@googlegroups.com

Hi sheps-ii,

Thank you for your reply. Finally saw someone responding.

Yes, I saw that article as well and did exactly what it instructs but still the problem persists.

Night Digger

unread,

Mar 14, 2014, 6:45:59 AM3/14/14

to phon...@googlegroups.com

Anyone anyone please!~~~~ help

Saulo Mendes Martins

unread,

Mar 14, 2014, 7:24:57 AM3/14/14

to phon...@googlegroups.com

Hello!

Night Digger!

I have problem on xcode 5.1 too. But i found this on phonegap official blog: http://shazronatadobe.wordpress.com/2014/03/12/xcode-5-1-and-cordova-ios/

Do you make a research there?

On Friday, March 14, 2014 7:45:59 AM UTC-3, Night Digger wrote:

Anyone anyone please!~~~~ help

Night Digger

unread,

Mar 14, 2014, 8:25:15 PM3/14/14

to phon...@googlegroups.com

Hi Saulo,

Thank you for your reply.

However, I think the post you referred does not relate to my question.

Cheers

Reply all

Reply to author

Forward