Sencha Touch - First Program

Sencha Touch First Program - 从基本概念开始，简单易学地学习Sencha Touch，其中包括概述，环境，命名约定，架构，MVC解释，第一个应用程序，构建应用程序，迁移步骤，核心概念，数据，主题，设备配置文件，依赖关系，环境检测，事件，布局，历史和支持，上传和下载，查看组件，打包，本机IOS，API。

在本章中，我们将列出在Ext JS中编写第一个Hello World程序的步骤.

步骤1

创建一个我们选择的编辑器中的index.htm页面.在html页面的head部分包含所需的库文件，如下所示.

index.htm

                                    Ext.application( {            name: 'Sencha', launch: function() {               Ext.create("Ext.tab.Panel", {                  fullscreen: true, items: [{                     title: 'Home', iconCls: 'home', html: 'Welcome to sencha touch'                  }]               });            }         });

说明

Ext.application()方法是Sencha Touch应用程序的起点.它创建了一个名为'Sencha'的全局变量，使用name属性声明 - 所有Application的类(如Models，Views和Controllers)都将驻留在这个单独的命名空间下，这样可以减少全局变量和文件名冲突的可能性.
一旦页面准备好并且加载了所有JavaScript文件，就会调用launch()方法.
Ext.create()方法用于在Sencha Touch中创建对象.在这里，我们创建一个简单面板类Ext.tab.Panel的对象.
Ext.tab.Panel是Sencha Touch中用于创建的预定义类小组.
每个Sencha Touch类都有不同的属性来执行一些基本功能.

Ext.Panel类有各种属性，例如 :

全屏属性是使用完整的屏幕，因此面板将占据全屏空间.
items 属性是容器各种项目.
iconCls 是用于显示不同图标的类.
标题属性是为小组提供标题.
html property是要在面板中显示的html内容.

步骤2

打开在标准浏览器中的index.htm文件，您将获得以下输出.