Sencha Touch教程

Sencha Touch是一款基于HTML5的移动应用框架，可以用来开发跨平台的移动应用。Sencha Touch具有高性能、丰富的组件库、强大的数据绑定功能等优点，深受开发者的喜爱。

本教程将介绍以下内容：

1. Sencha Touch的基础知识
2. Sencha Touch的组件库
3. Sencha Touch的数据绑定
4. Sencha Touch的打包和发布

Sencha Touch的基础知识

Sencha Touch的环境搭建

1. 安装Node.js和npm。
2. 安装Sencha Cmd。
3. 创建一个Sencha Touch应用。

Sencha Touch的项目结构

一个Sencha Touch应用通常包含以下文件和文件夹：

• app.json：应用配置文件。
• app.js：应用入口文件。
• index.html：应用的HTML文件。
• app：应用的代码文件夹，包括视图、控制器、模型等。
• resources：应用的资源文件夹，包括图片、样式等。

Sencha Touch的视图和控制器

Sencha Touch的应用由视图和控制器组成。视图是用户界面的展示部分，控制器是视图的事件处理器。

Sencha Touch的模型和数据存储

Sencha Touch通过模型和数据存储来管理数据。模型是数据的映射，数据存储是数据的本地或远程存储。

Sencha Touch的组件库

Sencha Touch的组件库包括了常见的UI组件和控件，如按钮、表单、列表等。开发者可以轻松地组合不同的组件来创建复杂的用户界面。

Sencha Touch的按钮组件

Sencha Touch的按钮组件可以是文本按钮、图标按钮等，开发者可以通过配置不同的属性来定制按钮的外观和行为。

{
    xtype: 'button',
    text: '点击',
    iconCls: 'x-fa fa-home',
    handler: function() {
        alert('Hello World!');
    }
}

Sencha Touch的表单组件

Sencha Touch的表单组件包括文本框、选择框、日期选择器等，可以帮助开发者快速创建各种表单。

{
    xtype: 'textfield',
    label: '姓名'
},
{
    xtype: 'selectfield',
    label: '性别',
    options: [
        { text: '男', value: '1' },
        { text: '女', value: '2' }
    ]
},
{
    xtype: 'datepickerfield',
    label: '出生日期'
}

Sencha Touch的列表组件

Sencha Touch的列表组件可以显示异步加载的数据，并提供了搜索、过滤等功能。

{
    xtype: 'list',
    store: 'Users',
    itemTpl: '{name}',
    onItemDisclosure: function(record) {
        alert(record.get('name'));
    },
    listeners: {
        itemtap: function(list, index, target, record) {
            alert(record.get('name'));
        }
    }
}

Sencha Touch的数据绑定

Sencha Touch的数据绑定可以将数据自动绑定到视图中，免去了手动更新视图的麻烦。

Sencha Touch的model绑定

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: ['name', 'age']
});

var user = Ext.create('User', {
    name: 'Tom',
    age: 18
});

var panel = Ext.create('Ext.Panel', {
    title: '用户信息',
    html: '姓名：{name}，年龄：{age}',
    viewModel: {
        data: {
            theUser: user
        }
    }
});

Ext.Viewport.add(panel);

Sencha Touch的store绑定

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: ['name', 'age']
});

Ext.create('Ext.data.Store', {
    storeId: 'Users',
    model: 'User',
    data: [
        { name: 'Tom', age: 18 },
        { name: 'Jack', age: 20 }
    ]
});

var panel = Ext.create('Ext.Panel', {
    title: '用户列表',
    items: [
        {
            xtype: 'list',
            store: 'Users',
            itemTpl: '{name}'
        }
    ]
});

Ext.Viewport.add(panel);

Sencha Touch的打包和发布

Sencha Touch的打包和发布可以将应用打包成原生应用或Web应用，便于在市场上发布和推广。

打包成原生应用

1. 在命令行中执行sencha app build命令。
2. 在应用的build/native文件夹下生成原生应用的安装包。

打包成Web应用

1. 在命令行中执行sencha app build production命令。
2. 在应用的build/production文件夹下生成Web应用的文件。

结语

本教程介绍了Sencha Touch的基础知识、组件库、数据绑定和打包发布，希望能为开发者提供一些帮助。Sencha Touch是一款强大的移动应用框架，掌握它可以使我们更加高效地开发跨平台的移动应用。