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'
}
]
}
});
如此便有左右布局的一个页面: