sencha，touch，入门系列，介绍sencha，touch，类系统讲解介绍

Sencha Touch 是一个用于移动端 WEB 应用程序开发的框架，它提供了一个完整的类系统，它的类系统被认为是其最强大的特性之一。 使用 Sencha Touch 的类系统，可以轻松地创建组件、处理事件，以及实现 MVC 架构中的模型、视图和控制器等模块。

Sencha Touch 的类系统是基于 ECMAScript 5 的严格模式和面向对象的原则而建立的，因此它在性能、可维护性和可扩展性方面都有很好的表现。这个类系统提供了一组基本的类和组件，如 Ext.Component、Ext.Panel、Ext.Button等，这些类和组件具有丰富的属性和方法，可以帮助我们快速地开发应用程序。

下面我们来详细介绍一下 Sencha Touch 的类系统：

1、类的声明和继承

在 Sencha Touch 中，我们可以通过 Ext.define() 方法来声明一个类，这个方法接受两个参数，第一个参数是类的名称，第二个参数是一个对象，用于定义类的属性和方法。

示例：

```

Ext.define('MyApp.MyClass', {

extend: 'Ext.Component',

config: {

width: 200,

height: 100,

title: 'My Class'

},

constructor: function(config) {

this.initConfig(config);

this.callParent(arguments);

},

myMethod: function() {

console.log('My Method');

}

});

```

在上面的示例中，我们定义了一个名为 MyApp.MyClass 的类，它继承了 Ext.Component 类，并定义了一些属性和方法。其中，config 属性用于定义类的配置项，默认值为 {xtype: 'myclass'}。当该类被实例化时，可以通过传递配置项来修改这些属性的值。

另外，在 constructor 方法中，我们调用了 initConfig() 方法来初始化配置项，然后调用了 callParent() 方法来调用父类的构造函数。这样，我们就可以使用 this.config 属性来访问配置项。

2、配置项和事件处理

在 Sencha Touch 中，类的配置项和事件处理都是通过访问器（accessor）和监听器（listener）来实现的。我们可以通过使用 config 和 listeners 属性来定义配置项和事件监听器。

示例：

```

Ext.define('MyApp.MyComponent', {

extend: 'Ext.Component',

config: {

html: 'Hello World'

},

listeners: {

tap: function() {

console.log('Tapped');

}

}

});

```

在上面的示例中，我们定义了一个名为 MyApp.MyComponent 的类，它继承了 Ext.Component 类，并定义了一个配置项 html 和一个点击事件监听器。当该组件被点击时，我们可以在控制台中看到 'Tapped' 的输出。

3、组件和布局

在 Sencha Touch 中，组件的布局是由布局容器和布局管理器来实现的。布局容器是一个容器，它包含了一组子组件，布局管理器则根据布局规则来确定子组件的位置和大小。

Sencha Touch 提供了多种布局管理器，如 hbox、vbox、card、fit 等。我们可以通过使用 layout 属性来指定布局管理器。

示例：

```

Ext.define('MyApp.MyContainer', {

extend: 'Ext.Container',

layout: 'vbox',

items: [

{

xtype: 'panel',

html: 'Panel 1',

flex: 1

},

{

xtype: 'panel',

html: 'Panel 2',

flex: 1

}

]

});

```

在上面的示例中，我们定义了一个名为 MyApp.MyContainer 的类，它继承了 Ext.Container 类，并指定了一个布局管理器 vbox。我们在 items 属性中添加了两个子组件，分别是两个 Panel 组件，它们都有一个 flex 属性，表示它们在布局中所占的宽度或高度比例。

4、MVC 架构中的模型、视图和控制器

在 Sencha Touch 中，MVC 架构中的模型、视图和控制器也是通过类来实现的。我们可以分别定义三个类，用于表示模型、视图和控制器。

模型是表示应用程序中的现实世界概念的类。它通常包含数据属性和方法，用于访问和修改数据。

示例：

```

Ext.define('MyApp.model.User', {

extend: 'Ext.data.Model',

fields: ['name', 'email', 'phone']

});

```

在上面的示例中，我们定义了一个名为 MyApp.model.User 的类，它继承了 Ext.data.Model 类。fields 属性用于定义模型中的数据字段。

视图是表示用户界面的类。它通常包含了组件和布局，用于呈现数据并与用户进行交互。

示例：

```

Ext.define('MyApp.view.UserForm', {

extend: 'Ext.form.Panel',

requires: ['Ext.field.Text', 'Ext.field.Email', 'Ext.field.Number'],

config: {

items: [

{

xtype: 'textfield',

name: 'name',

label: 'Name'

},

{

xtype: 'emailfield',

name: 'email',

label: 'Email'

},

{

xtype: 'numberfield',

name: 'phone',

label: 'Phone'

}

]

}

});

```

在上面的示例中，我们定义了一个名为 MyApp.view.UserForm 的类，它继承了 Ext.form.Panel 类。items 属性用于定义视图中的子组件，这里我们添加了三个文本字段，用于输入用户的姓名、邮件和电话号码。

控制器是连接模型和视图的类。它通常包含处理用户交互事件的方法和处理模型数据的方法。

示例：

```

Ext.define('MyApp.controller.User', {

extend: 'Ext.app.Controller',

config: {

refs: {

form: 'userform'

},

control: {

'button[action=save]': {

tap: 'saveUser'

}

}

},

saveUser: function() {

var form = this.getForm(),

values = form.getValues(),

user = Ext.create('MyApp.model.User', values);

user.save();

}

});

```

在上面的示例中，我们定义了一个名为 MyApp.controller.User 的类，它继承了 Ext.app.Controller 类。在 config 属性中，我们使用 refs 属性来定义视图组件的引用，使用 control 属性来定义处理用户事件的方法。在 saveUser() 方法中，我们获取表单的值，创建一个新的用户实例，然后调用 save() 方法将它保存到后端服务器上。

总结：

以上就是 Sencha Touch 类系统的详细介绍。通过类系统，我们可以轻松地创建组件、处理事件，以及实现 MVC 架构中的模型、视图和控制器等模块。在实际开发中，我们可以结合类系统来灵活地组织应用程序的代码。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/