sencha app build production works without tap events

[Nam Nguyen]

Hi all


Im new to ST2 and not sure if this is a bug, but I've really tried a lot of different things to make it work.


My app is created from scratch using the command:


sencha app create MyApp /path/to/www/myapp

It works great locally (using python on a mac) and uses carousels and images with tap events. Also I get no console warnings or errors.

When I change the index.html to use production.js and deploy I can't build at all, getting this error:


[ERROR] TypeError: 'undefined' is not a function


phantomjs://webpage.evaluate():7
phantomjs://webpage.evaluate():1
/Users/cphnmnn/Documents/Eclipse/WebApps/Playground/sdk/command/vendor/phantomjs/dependencies.js:36



When I deploy without changing anything in index.html or app.json (which mean I use the development.js) the app seems to work, but nothing happens when I click on my image.
I don't think the build has my included tap events. Cant see how it includes my app.js which now is minified.

Am I missing some build steps to deploy?

[mitchellsimoens]

You shouldn't modify index.html, to go to a production you should build

sencha app build production

I would recommend build in testing to see any errors before you jump into production

sencha app build testing

[Nam Nguyen]

Hi Mitchell

I've noticed that you reply really quick - thumbs up!

However, I've tried with the "testing" deployment which unfortunately produced the same error free result.

Also, I can see I wrote a mistake - the app.js is included fine, but it's the other js files I can't find in the resources that the client download when accessing the site.

The main thing that bugs me, is that it loads a view, that was defined in another js file than app.js, fine, but a simple call to Ext.Msg.alert when tapping on a image doesn't work....

[mitchellsimoens]

For testing I do this and it works switch tabs (which are just buttons really)

cd /path/to/sencha-touch-2.0.1.1
sencha app create MyApp ../MyApp
cd ../MyApp
--edit app.json's logger config to false
sencha app build testing

Open the testing build and I can interact with the tabs just fine.

To go further, I added a button to the first item with a simple console.log in both the handler config and tap listener and it works.

[Nam Nguyen]

Hi again

Its almost like you describe that I created my app, however I tried again with a fresh app and it worked! I've added images with tap-events that call Ext.Msg.alert, deployed to testing and it worked!

So there must be something in my real app, that the build doesn't like, but now I can keep adding small bits of my app to test.

Thanks for pointing me in the right direction! When I find then problem, I can write it here if you like?

[Nam Nguyen]

So I finally found the error, but it leaves me with a design question. I found out, that I created my panels wrong in a tab panel like this:

Ext.define("Playground.view.Main", {
extend: 'Ext.TabPanel',
requires: [
'Ext.Anim',
'Ext.Img'
],
config: {
title: 'Main',
tabBarPosition: 'bottom',
layout:{
pack:'center',
align: 'stretch'
},

defaults: {
styleHtmlContent: true
},
listeners: {
initialize: function(thisPanel, eOpts){
thisPanel.setActiveItem(0);
}
},
items: [
Ext.create('Playground.view.Info')
]
}
});

The point is, that my view 'Playground.view.Info' (which extends Panel) comes from another file to keep a better design, but when I create it like above, the alerts stops working (only when deploying worth noticing!). If I use the code directly, it works.

So is this a bug, a poor design or bad programming?

[pepperseb]

You should put items into the config curly brackets.

If you want to have your Info panel as an item, you should use its xtype.

Something like this:

Ext.define("Playground.view.Main", {

extend: 'Ext.TabPanel',

requires: [
'Ext.Anim',
'Ext.Img',
'Playground.view.Info'
], 

config: {
title: 'Main',
tabBarPosition:'bottom',
layout:{
pack:'center',
align:'stretch',

defaults: {
styleHtmlContent:true
},

items: [{
xtype: 'playground-info' // for instance. Instead of Ext.create('Playground.view.Info')
 }]
}, 

listeners: {
initialize: function(thisPanel, eOpts){
thisPanel.setActiveItem(0);
} 
});

[Nam Nguyen]

Wow, this actually solves my problem!

So the conclusion is a combination of my misuse of the syntax and a bug(?) that the deployment process is more sensitive (due to the development branch works fine).

Thanks guys!

[mitchellsimoens]

It's not really a bug, using Ext.create before Ext.application's launch method has fired will screw interactions up as things are not ready for an instance.

[Nam Nguyen]

Yes, I agree, that I didn't used it correctly.

I was just confused since I didn't got any errors or warning during development and the interactions worked fine.
But okay, it lead me to really learn about the build process :-)