Sencha TabPanel入门实例一

我们将要做一个用于展示手机官方站点的简单手机webapp程序。这个App包括一个主页，联系页面和一个博客页面。博客页面列出官方最近发表的一些文章并且可以通过手机设备进行查看文章信息。

这里展示一下实际要完成的效果图：

                                                    

程序启动

第一件事情就是启动我们的程序。从效果图中我们可以看到，程序需要有Home，Blog，Contact三项。这样的一个展示方式很是适合使用TabPanel进行展示。（如果你学过android，你会发现，TabPanel和TabActivity很类似。）。TabPanel会帮我们管理它其中的子页面。我们关心的是每个页面的具体展示于功能就可以。

整个程序的入口就是Ext.Application的lanuch函数。可以认为这里是程序的主体部分和程序逻辑的调度入口。代码如下：

Ext.application({
    name: 'firstApp',  //定义程序的命名空间，这个很重要

launch: function() {             //程序启动，创建一个TabPanel
        Ext.create("Ext.tab.Panel", {
            fullscreen: true,
            items: [
                {
                    title: 'Home',
                    iconCls: 'home',
                    html: 'Welcome'
                }
            ]
        });
    }
});

 

如果你运行上面的代码，你可以看到TabPanel的Tab菜单会出现在窗口的顶部。另外，你的Home页面还需要一些欢迎词之类的东西。所以让我们往Home页面添加一些欢迎内容并且设置Tab菜单在底部显示。通常Tab菜单会默认显示在顶部，所以你需要配置tabBarPosition 在底部。具体如下代码所示;

Ext.application({
    name: 'Sencha',

launch: function() {
        Ext.create("Ext.tab.Panel", {
            fullscreen: true,
            tabBarPosition: 'bottom',   //tab菜单显示在底部

items: [
                {
                    title: 'Home',
                    iconCls: 'home',
                    html: [
                        '<img src="http://staging.sencha.com/img/sencha.png" />',
                        '<h1>Welcome to Sencha Touch</h1>',
                        "<p>You're creating the Getting Started app. This demonstrates how ",
                        "to use tabs, lists and forms to create a simple app</p>",
                        '<h2>Sencha Touch 2</h2>'
                    ].join("")
                }
            ]
        });
  });

 

如果你运行上述代码，你可以发现效果不是十分友好。UI对于app来说是很重要的部分，所以我们为Home添加一个css样式表。以使得展示的内容变得更加友好。只要添加如下代码即可：

 … . 

title  : 'Home',

iconCls : 'home',

cls: 'home',

html : [

       …..

 

详细的样式定义，请查看附件源码中的app.css文件。当然，我们需要在index.html文件中引入这个css，如：

<link rel="stylesheet" href="app.css" type="text/css" />。

最终的运行效果如下：

                                             

 

Mvc架构

上面的例子中，我将Home页面的定义直接写在了启动函数中，而Sencha提供了MVC架构可以让程序的结构变得更加清晰，易于维护和管理。现在，我们将Home定义成一个单独的文件。在工程目录中，创建  app/view/Home.js (详细的Mvc架构这里不阐述)。工程目录结构如下：

                                              

Home页面定义如下：

Ext.define('firstApp.view.Home',{        
　　extend : 'Ext.Panel',
　　xtype : 'fHome',

 　　config : {
　　　 title : 'Home',                   //这里是必须的，否则TabPanel会报一个没有进行Tab配置的错误，因为每个Tab项都需要有对应的标题
 　　　iconCls : 'home',
　　　 cls : 'home' ,
     　html: '<img src="http://staging.sencha.com/img/sencha.png" /><h1>Welcome to Sencha Touch</h1><p>You're creating the Getting Started app. This demonstrates how "+
        "to use tabs, lists and forms to create a simple app</p>"+  '<h2>Sencha Touch 2</h2>'
}
});

 

对应的app.js文件中要进行相应的修改，引入Home的依赖和创建并显示Home页面：

Ext.application({

　　name : 'firstApp', //this is namespace
　　views : ['Home'],       //默认依赖

 　　　　launch:function(){
　　　　　　Ext.create('Ext.tab.Panel',{
　　　　　　　　　   fullscreen : true,
　　　　　　　　　　tabBarPosition : 'bottom',　　　
　　　　　　　　　　items : [{xtype : 'fHome'        
　　　　}]
});                
});