1. #1
    Sencha User
    Join Date
    Aug 2012
    Location
    Australia
    Posts
    8
    Vote Rating
    0
    SuperRoach is on a distinguished road

      0  

    Default Answered: Learning with the Generated app packages, makes the sample tutorials difficult

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


    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:

    Code:
    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.

  2. 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/

  3. #2
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Vote Rating
    99
    Answers
    132
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      1  

    Default


    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/

  4. #3
    Sencha User
    Join Date
    Aug 2012
    Location
    Australia
    Posts
    8
    Vote Rating
    0
    SuperRoach is on a distinguished road

      0  

    Default


    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.

  5. #4
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Vote Rating
    99
    Answers
    132
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      1  

    Default


    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.
    Code:
    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):
    Code:
    getCustomConfig()
    setCustomConfig(...)
    getAnother()
    setAnother(...)
    Hope this helps.

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

Thread Participants: 1

Tags for this Thread