Learning with the Generated app packages, makes the sample tutorials difficult

[SuperRoach]

Hello, So far I'm having a bit of difficulty learning Sencha Touch 2. I've tried a bunch of nice tutorials, however they have a steep learning curve due to the default package you have generated in Sencha touch 2.

As you know, when you do a sencha generate app namespace ../foo , it creates folders and files to give you a friendly loading screen as well as packaging support.

However, this then makes it very difficult to follow any tutorials!
For example, the Introduction to layouts tutorial.
http://www.sencha.com/learn/intro-to-layouts-in-sencha-touch-2/
IO9hj.jpg
Right at the beginning is this sample code. How can I understand and try that code? I understand I should be looking in my auto generated Main.js (and that the .create is handled automaticly in the app.js in the root) , but this doesn't work:

var red = {    style: "background-color: #B2222; color: white;",
    title: "Red",
    html: "Red"


}


Ext.define("RedditPics.view.Main", {
    extend: 'Ext.Container',
    fullscreen: true,
    layout: 'auto',
    items: [red]
});

In short, how can I properly understand running test code or the Ext.define ?

And as a small aside... can anyone recommend Sencha touch 2.0 related learning resources. I'm having a hard time finding much to get up to speed.

[jerome76]

You may have figured this out already, but Ext.define does not create an instance of the object. It 'defines' a so-called skelleton, if you wish, that can be used to create an instance, or multiple instances throughout your application.

Hence, Ext.create will 'create' and instance of that object.

The docs are very helpful too. You can search any objects, configs, or methods that are included with the associated version of ST.
http://docs.sencha.com/touch/2-0/

[SuperRoach]

This I think makes sense then.
According to http://docs.sencha.com/touch/2-0/#!/...-method-define , I would still need to create the panel that I'm making. However, in the constructor method, I could apply the sample code from the tutorial yeah?

If so, please mark this as an answered thread.

[jerome76]

I'm not sure exactly what you are asking, but using the 'constructor' function in your Ext.define will create Getters and Setters for your custom configs, as well as the constructor of the extended class.

Say you have a defined subclass of Ext.Panel and you have a few configs that are new.

Ext.define('MyApp.view.MyPanel', {
	extend: 'Ext.Panel', //extends the Panel class
	config: {
		...
		customConfig: 'some value',
		another: 20
		...
	},
	constructor: function(config){
		this.callParent(arguments);
	}
});

Using the constructor will give you the available functions (when referencing MyPanel):

getCustomConfig()
setCustomConfig(...)
getAnother()
setAnother(...)

Hope this helps.

PS: You'd have to mark the answer as best