Rick Hoving
Rick Hoving

Reputation: 3575

Fastest way of rendering a Sencha Touch 2 application

I'm building a Sencha Touch 2 application and I was wondering how to built the application. Do I use Ext.create to seperately create the objects and then put that object as an item of another object. Or do I create an object set the properties and render everything at once. So the question is, what is faster, this:

 Ext.application({
    autosCreateViewport: true,
    useLoadMask: true,
    launch: function(){
        var titleBar = {
            id: 'mainNavigationBar',
            xtype : 'titlebar',
            layout: 'hbox',
            docked: 'top',
            title : 'cSenchaTitleBar',
            items:[]
        };

        var panel ={html:"test",xtype:"panel"}

        containerPanel = Ext.create('Ext.Container', {
            id: 'appContgdfsainer',
            xtype: "mainview",
            fullscreen: true,
            items: [titleBar, panel]

        });
    },
});

Or this:

Ext.application({
    autosCreateViewport: true,
    useLoadMask: true,
    launch: function(){
        var titleBar = Ext.create("Ext.TitleBar",{
            id: 'mainNavigationBar',
            xtype : 'titlebar',
            layout: 'hbox',
            docked: 'top',
            title : 'cSenchaTitleBar',
            items:[]
        });

        var panel = Ext.create("Ext.Panel",{html:"test"});

        containerPanel = Ext.create('Ext.Container', {
            id: 'appContgdfsainer',
            xtype: "mainview",
            fullscreen: true,
            items: [titleBar, panel]

        });
    },
});

Upvotes: 1

Views: 599

Answers (1)

rdougan
rdougan

Reputation: 7225

There will be no difference between the two. This is because nothing will actually be visible until the final container panel is created and rendered, and to do that, all other components have to instantiate first. In both situations, this has to happen.

Upvotes: 2

Related Questions