面板组件

1、创建面板组件：
(1)Ext.create(‘类或类的别名’，{配置对象});

var panel = Ext.create('Ext.Panel', {
    //或者 var panel = new create('Ext.lib.Panel', {})
    fullscreen: true,
    id: 'myPanel',
    style: 'color:red',
    html: '一个简单的示例面板'
});
//参数一：面板组件类Ext.Panel或类的别名Ext.lib.Panel
//参数二：配置对象

(2)new Ext.Panel({配置对象})

var panel = new Ext.Panel({
    //var panel = new Ext.lib.panel({})
    id: 'myPanel',
    fullscreen: true,
    style: 'color:red',
    html: '一个简单的示例面板'
});
//参数：配置对象

<div class="x-container x-panel x-fullscreen x-layout-card-item x-sized" id="myPanel" style="color: red;">
    <div class="x-inner x-panel-inner" id="ext-element-7">
        <div class="x-innerhtml" id="ext-element-9">一个简单的示例面板</div>
    </div>
</div>
//Sencha Touch 生成的面板元素为div元素

• fullscreen: true/false，默认值（true），是否扩展为浏览器窗口尺寸
• id: 唯一，面板元素ID
• style：面板html使用的css样式（内联样式）
• html：面板元素的html内容

2、Viewport组件
Viewport组件是一个类似于面板组件的容器组件，在HTML代码中，该组件同样以div元素的形式显示在页面。它与面板的区别为，在调用应用程序的launch函数之前该组件已被自动创建，且该组件fullscreen配置选项的选项值默认为true（Ext.Viewport类Viewport组件可以在该组件中添加其他组件）。

Ext.Viewport.add('panel');