sencha touch 入门系列 （九）sencha touch 视图组件简介

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

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

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

　　在官方example的kitchensink中的interface中，演示了所有的已有组件，地址如下:http://docs.sencha.com/touch/2.3.1/touch-build/examples/kitchensink/index.html,

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

　　定义和创建视图组件

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

　　

 1 launch: function() {

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

 3         Ext.fly('appLoadingIndicator').destroy();

 4 

 5         Ext.create('Ext.Container', {

 6             html: 'Welcome to my app',

 7             fullscreen: true

 8         });

 9 

10 

11     },

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

　　fullscreen：true 设置面板为全屏，

　　html: 'Welcome to my app', 设置面板的输出内容，

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

　　

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

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

　　代码如下：

 launch: function() {

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

        Ext.fly('appLoadingIndicator').destroy();



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

            extend: 'Ext.Container',



            config: {

                html: 'Welcome to my app',

                fullscreen: true

            }

        });



        Ext.create('MyApp.view.Welcome');

    },

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

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

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

　　给视图添加子组件

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

　　

 1 launch: function () {

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

 3         Ext.fly('appLoadingIndicator').destroy();

 4 

 5         Ext.define('MyApp.view.Welcome', {

 6             extend: 'Ext.Panel',

 7 

 8             config: {

 9                 html: 'Welcome to my app',//页面输出内容

10                 fullscreen: true,//设置面板为全屏显示

11                 items:{

12                     xtype:"titlebar",//通过xtype引入了一个titlebar组件

13                     title:"我是标题"//给titlebar定义标题名称为“我是标题”

14                 }

15 //               

16             }

17         });

18 

19         Ext.create('MyApp.view.Welcome');

20 

21 

22     },

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

launch: function () {

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

        Ext.fly('appLoadingIndicator').destroy();



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

            extend: 'Ext.Panel',



            config: {

                html: 'Welcome to my app',//页面输出内容

                fullscreen: true,//设置面板为全屏显示

                items: [

                    {

                        xtype: "titlebar",//通过xtype引入了一个titlebar组件

                        title: "我是标题" //给titlebar定义标题名称为“我是标题”

                    },

                    {

                        xtype: "toolbar",//通过xtype引入了toolbar组件

                        title: "工具栏",//设置toobar的标题

                        docked: "bottom"//设置toolbar组件悬停在页面底部

                    }

                ]

            }

        });



        Ext.create('MyApp.view.Welcome');





    },

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

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

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

注：跟xtype相对的还有个xclass属性，xclass:"类名"，上面的titlebar可以写成xclass:"Ext.TitleBar",

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

 

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

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

index.html

app.js

app/

    controller/

    model/

    view/

        MyView.js

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

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

//contents of app.js

Ext.application({

    name: 'MyApp',

    views: ['MyView'],



    launch: function() {

        Ext.create('MyApp.view.MyView');

    }

});

 

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

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

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