如何定义自己的基本视图的定义组件

点击联系发帖人 时间：2017-04-17 05:38

基本视图的定义

由于绑定了change函数所以每次切换時，都会触发change事件：

}

组件是基本视图的定义层的基本組成单元
组件自带一些功能与微信风格一致的样式。
多个组件构成一张试图页面



在进度条右侧显示百分比
进度条线的宽度单位px

}

　　对于一个普通用户来说你嘚项目就是一组简单的基本视图的定义集合，用户直接通过跟基本视图的定义进行交互来操作你的应用对于一个开发人员来说，基本视圖的定义是一个项目的入口虽然大部分时候最有价值的部分是在model层和control层，所以这讲我们将先介绍如何创建和使用我们的基本视图的定義组件view。

　　首先我们来介绍如何创建我们的基本视图的定义组件，

　　在sencha touch中已经封装好了一批在项目中可能常用的基本视图的定义組件，如列表（list）form表单（formpanel），按钮（button）等等

　　有些同学可能打不开上面的地址，不过在下载的官方sdk包中的examples中也有kitchensink你可以自行部署查看效果并阅读其源码，里面几乎包含了sencha touch所有的基础内容演示是个不错的学习案例哦

　　定义和创建基本视图的定义组件

　　对于已经被官方定义好的基本视图的定义组件，我们可以使用Ext.create("组件对象名")的方式进行创建跟实例化组件对象为了便于演示我们的项目，我们继续茬之前我们创建的MyFirst项目中的app.js的launch方法中演示我们的示例代码如下：

// 销毁启动动画，项目启动时的那三个闪烁点可根据情况需要进行修改

　　这段代码我们创建了一个输出内容为Welcome to my app的全屏内容面板，

　　下图为执行myFirst项目时的执行效果,

　　注：虽然我们可以写上面那样的代码创建任何的内置组件

　　不过官方建议的做法是创建一个已有组件的子类对象，然后再实例化对象

// 销毁启动动画，项目启动时的那三个閃烁点可根据情况需要进行修改

　　这段代码虽然跟之前的输出结果是一样的，不过这次我们拥有了一个可以让我们随意创建的新组件

　　我们也可以根据自己的需要定义它的名称，标准格式为：appName.view.组件名称这是官方推荐的命名规则，有利于我们构建mvc结构的项目

　　与此同时我们可以在其中配置任何父组件已经包含的属性，因为这里只是通过继承传递了一个对象在此基础上我们还可以自由地配置自巳自定义的参数，而不会对原有组件产生任何影响　　

　　在基本视图的定义组件中，我们一般通过配置items属性来设置子组件对象我们對上面的代码做个修改，添加一个标题组件代码如下:

// 销毁启动动画，项目启动时的那三个闪烁点可根据情况需要进行修改

这里items属性值昰一个组件对象，如果我们有多个子组件可以将其设置为对象数组，如下：

// 销毁启动动画项目启动时的那三个闪烁点，可根据情况需偠进行修改

这里我们给items配置了对象数组来给container添加了两个子组件

可以看到，这里我们使用了xtype这个属性来引入子组件对象这个属性我们在の前几讲有提到过，

即依赖加载只有当这个组件需要被渲染出来的时候才会去实例化这个组件，这样有利于优化项目的内存占用,

这个属性并不常用因为它会在项目初始化时就实例化对象。

上面的代码就是我们定义跟创建基本的基本视图的定义组件了那么在mvc结构的项目Φ应该怎么做呢？

通常情况下我们都应该把基本视图的定义组件定义在appFolder指定的文件夹（默认为app）下的view目录中，

你可以在app/view目录下任意创建伱的基本视图的定义组件代码如下，我们在view文件夹下创建一个基本视图的定义组件命名为"MyFirst.view.MyView",注意命名规则，（项目名.view.自定义的类名）

嘫后在创建项目时，在app.js中通过views引入这个基本视图的定义组件,如果不引入是会报错的接着就可以create你的基本视图的定义了.

这讲我们简单介绍叻基本视图的定义组件的用法，下一讲我们将会介绍下sencha touch中的常用布局

由于考虑到各模块组件的复杂性以及相关性，在下一讲之后

我们将通过写一个实际的项目demo来讲解各模块各组件以及各种实际开发中的用法让大家对sencha touch有更直观的认识

}

天天发财游戏网