st2中定义左右平板布局

来源：互联网发布：java工资扣培训费编辑：程序博客网时间：2024/04/30 15:52

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'            }        ]    }});

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