Question

I’m trying to create a webapp with sencha. I’ve already tweaked a lot of examples and the framework is startiong to make sense to me. There are two major things I keep bumping into though.

1.
Consider the following code:

var application;

var left = new Ext.Panel({
    fullscreen: false,
    style: "background-color:#039CF9;color:white;",
    dock: 'left',   
    html: 'left',
    width:320
});

var right = new Ext.Panel({
    fullscreen: false,
    style: "background-color:#ffffff;color:black;",
    dock: 'right',    
    html: 'right',
});

application = new Ext.Application({
    name: 'xaddict',
    launch: function() {
        this.viewport = new Ext.Panel({
            fullscreen: true,
            id    : 'mainPanel',
            layout: {type:'hbox',align:'stretch',pack:"center"},
            dockedItems :[right]
        });
    }
});

application.viewport.addDocked(left);

Somehow, if you add ‘left’ and ‘right’ to application via the attribute ‘dockedItems’ it does as it’s supposed to, but if I try to add it later on, the console says there is no ‘addDocked’ function in application.viewport. I would really like to create the application in a myapp.js and have the body code of my page add panels to this setup. Due to CMS limits, I cannot insert this new code into the existing code.

2.
Secondly. The Sencha Touch references and docs are not clear on what syntax to use when building an app. Some say Ext.Setup, others to set up an Application and there are some which tell you to extend a component and use that as a starting point. Which one is the ‘normal’ one?

Answer 1

The reason you are getting that error is because of the order your statements are executed in. The Application’s launch() method is executed after the framework and application is all loaded and ready to go (similar to onReady event). This means that the addDocked called is happening before the launch method is called and so application.viewport isn’t defined yet.

If you add a console.log into the launch method and one just before the addDocked call you will see the order happening.

You should move the application.viewport.addDocked(left); line inside your launch() method:

application = new Ext.Application({
    name: 'xaddict',
    launch: function() {
        this.viewport = new Ext.Panel({
            fullscreen: true,
            id    : 'mainPanel',
            layout: {type:'hbox',align:'stretch',pack:"center"},
            dockedItems :[right]
        });
        application.viewport.addDocked(left);
    }
});

In response to your other questions…

The current best practice is to go down the Ext.Application route and structure your application according to the MVC (Model-View-Controller) architecture. There aren’t huge numbers of resources available that go into detail about how to apply this but the Twitter and Kiva example apps do use it and are a good starting point.

I would 100% recommend extending components and keep them in their own files and building your app up using these building blocks (these will essentially become the V in your MVC). It makes maintenance much easier and just keeps things structured and organised.