st2中定义左右平板布局

0.首先下载mvc框架：https://github.com/kostysh/Sencha-Touch-2.0-MVC-test-application-with-NestedList

1.在框架中要在app.js 这个文件中使用：

launch: function() {
        //Ext.getBody().removeCls('loading');

        // Destroy the #appLoadingIndicator element
        Ext.fly('appLoadingIndicator').destroy();

        // Initialize the main view
        Ext.Viewport.add(Ext.create('App.view.Main'));
    }

在main.js页面中进行布局：

Ext.define('App.view.Main', {
    extend: 'Ext.Container',
    xtype: 'mainview',

    config: {
        fullscreen: true,
        layout: 'fit',
        items: [
            {
                xtype:'toolbar',
                docked: 'top',
                title:'XIXItest',
                // Make the toolbar scrollable
                scrollable: {
                    direction: 'horizontal',
                    indicators: false
                }

                // Add several items into the toolbar
                /*
                items: [
                    { iconMask: true, iconCls: 'action' },
                    { iconMask: true, ui: 'plain', iconCls: 'add' },
                    { iconMask: true, text: 'Test', iconCls: 'action' },
                    { iconMask: true, text: 'Test', ui: 'plain', iconCls: 'bookmarks' },
                    { iconMask: true, ui: 'round', iconCls: 'download' },
                    { iconMask: true, ui: 'action', iconCls: 'settings', badgeText: '2' },
                    { iconMask: true, ui: 'confirm-round', iconCls: 'compose' },
                    { iconMask: true, ui: 'decline', iconCls: 'delete' },
                    { iconMask: true, iconAlign: 'right', ui: 'round', text: 'Home', iconCls: 'home' },
                    { iconMask: true, ui: 'action-round', iconCls: 'locate' },
                    { xtype: 'segmentedbutton', items: [
                        { iconMask: true, iconCls: 'maps' },
                        { iconMask: true, iconCls: 'organize', text: 'Sort' },
                        { iconMask: true, iconCls: 'refresh' }
                    ]},
                    { iconMask: true, ui: 'back', iconCls: 'reply' },
                    { iconMask: true, iconCls: 'x-icon-mask trash' }
                ]*/
            },
            {
                layout: 'fit',
                docked: 'left',
                width : 350,
                cls   : 'searchcontainer',
                itemId: 'searchcontainer',
                html：‘1’
            },
            {

                html:'2'
            }
        ]
    }
});

如此便有左右布局的一个页面：