Sencha Touch-概述

Sencha Touch是一款可用于构建高性能和交互式Web应用程序的HTML5框架。它是通过使用HTML5和CSS3的先进特性来扩展和增强Web体验的。Sencha Touch允许开发人员使用一组反应迅速，给用户带来像本地应用体验的组件，包括表格，列表，表单等。Sencha Touch具有可扩展性和可定制性，因此它能够满足各种应用程序的需要。

特点

• 支持丰富的UI组件，包括表格，列表，表单，其它HTML5元素等
• 能够工作在各种设备上，包括手机，平板电脑，桌面电脑等
• 内置MVC框架，使得应用程序易于维护和扩展
• 具有可扩展性和可定制性，支持开发人员在现有组件基础上开发自己的组件
• 应用程序可以使用Sencha Cmd和Sencha Architect等工具进行开发和管理
• Sencha Touch具有一套完整的测试机制，包括单元测试，性能测试，集成测试等

使用

Sencha Touch的开发需要以下几个步骤：

1. 下载Sencha Cmd，创建一个项目

   sencha -sdk /path/to/sencha-touch generate app MyApp /path/to/my-app
   

2. 启动服务器，以便在浏览器中访问应用程序

   cd /path/to/my-app
   sencha app watch（或使用 Sencha Cmd 7.x 及以上版本的 sencha app start 命令，推荐）
   

3. 在Sencha Touch中开发应用程序

   在应用程序开发中，开发人员需要遵循Sencha MVC框架中的模型，视图和控制器的设计模式。应用程序可以使用Sencha Architect等可视化工具来快速创建UI和实现业务逻辑。

示例代码

下面是一个Sencha Touch应用程序的示例代码：

Ext.application({
    name: 'MyApp',

    launch: function() {
        Ext.create('Ext.tab.Panel',{
            fullscreen: true,
            tabBarPosition: 'bottom',

            items: [
                {
                    title: 'Home',
                    iconCls: 'home',
                    html: 'Home Screen'
                },
                {
                    title: 'Contact',
                    iconCls: 'user',
                    xtype: 'formpanel',
                    url: 'contact.php',
                    layout: 'vbox',

                    items: [
                        {
                            xtype: 'fieldset',
                            title: 'Contact Us',

                            items: [
                                {
                                    xtype: 'textfield',
                                    label: 'Name',
                                    name: 'name'
                                },
                                {
                                    xtype: 'emailfield',
                                    label: 'Email',
                                    name: 'email'
                                },
                                {
                                    xtype: 'textareafield',
                                    label: 'Message',
                                    name: 'message'
                                }
                            ]
                        },
                        {
                            xtype: 'button',
                            text: 'Send',
                            ui: 'confirm',
                            handler: function() {
                                this.up('formpanel').submit();
                            }
                        }
                    ]
                }
            ]
        });
    }
});

其中，应用程序创建了一个tabPanel，包括两个tab页，一个是Home页，另一个是Contact页。在Contact页中，使用了一个formpanel，该panel包含一个字段集，一个发送按钮。formpanel中的字段集包括姓名，邮箱和消息等信息，点击发送按钮后将该表单提交到contact.php中。该应用程序包含的组件非常基本，仅作说明用途。