Sencha Touch快速入门2.0之Card布局

移动开发
Sencha Touch 中,Card布局继承Fit布局。算是用得比较多的一个布局了,许多的界面切换都需要这个布局的Panel的参与。Sencha Touch中使用Card布局的有:TabPanel、Carousel。

Sencha Touch快速入门2.0之Card布局是本文要介绍的内容,继续 Sencha Touch快速入门2.0之Box布局 来介绍Sencha Touch的Card布局。在这篇里面,我就尽量少说废话了,如果有什么不清楚的地方,请看前面的章节。

一、Fit布局

Fit布局很有特点,它只允许自己的***个item被显示出来,并且填充满自己。如果它的item多于一个,那难免是会出些意外的情况的。

如果你发现你的容器内的控件有的没有全部被显示出来,那不妨看看它的layout是否为fit,试着将它强制设为vbox往往就能解决问题。

下图是在一个layout为fit的Panel里放了三个button的结果:

Sencha Touch快速入门2.0之Card布局

所以说:除非你想营造些令人匪夷所思的效果,请不要在fit布局的容器里面放超过一个的东西。

二、Card布局

Sencha Touch 中,Card布局继承Fit布局。算是用得比较多的一个布局了,许多的界面切换都需要这个布局的Panel的参与。Sencha Touch中使用Card布局的有:TabPanel、Carousel。

该布局会包含多个子面板,任何时候都只有一个子面板处于显示状态,该布局的重点方法是setActiveItem,

让我们看看官方文档是怎么写的

Sencha Touch快速入门2.0之Card布局 

Component对象:Sencha Touch里所有可视控件都是由Component派生的。

***个参数可以是:

1、一个数字 比如说1代表激活容器里items[1],即第二个item。

2、一个字符串 这个字符串是一个Component对象的id。

3、一个Component对象 如果你传入的Component对象不在容器的items中,则框架会自动将其添加至items,并设置为活动的item。

第二个参数可以是:

1、一个字符串 这个字符串代表动画效果 可选的有 slide pop fade flip cube等

2、一个动画对象 可以对动画效果进行更多的配置。如{type: 'slide', direction : 'right'} 如果想要做出更漂亮的动画效果,请参看官方文档 anim 类。

下面看一个例子:

card布局 

  1. var myApp = new Ext.Application({      
  2. name: 'myApp',      
  3. launch: function () {          
  4.         var myPanel1 = new Ext.Panel({              
  5.           id: 'myPanel1',              
  6.           layout: 'vbox',              
  7.           html: 'Oh, this is Panel1!',              
  8.       items: {     
  9.          xtype: 'button',                  
  10.          text: '前往Panel2',                      
  11.          handler: function(){                      
  12.            myApp.views.mainPanel.setActiveItem(    //设置活动项的方法                          
  13.            'myPanel2',                    //***个参数为mypanel2的id 在这里也可以填数字 ‘1’    
  14.            'slide'                        //这个参数为切换效果                      
  15.           );                  
  16.         }              
  17.       }          
  18.    });                  
  19.   var myPanel2 = new Ext.Panel({              
  20.        id: 'myPanel2',              
  21.        layout: 'vbox',              
  22.        html:  'This is Panel2!',              
  23.      items: {                  
  24.         xtype: 'button',                  
  25.         text: '前往Panel3',                  
  26.         handler: function(){                     
  27.                 var pnl = new Ext.Panel({                         
  28.                   html:'这个是点击按钮之后才创建的Panel,演示到此结束'                      
  29.       });    
  30.        myApp.views.mainPanel.setActiveItem(             
  31.                     pnl,{            //这里参数是刚创建的panel                          
  32.                     type: 'slide',    //这里动画效果为一个动画效果对象                         
  33.                      direction: 'right'                     
  34.                     });                 
  35.                  }            
  36.                }          
  37.         });                  
  38.       myApp.views.mainPanel = new Ext.Panel({       
  39.              fullscreen: true,              
  40.              layout: 'card',             
  41.               items: [myPanel1, myPanel2]    //***个为默认界面          
  42.            });      
  43.      }}); 

这个例子演示了如何使用card布局进行画面的切换,当然,实际使用的时候,碰到更多的问题是无法避免的,本篇文章也无法为大家一一解答。如果大家有什么共性的问题,欢迎提出来探讨。

ps:因为TabPanel、Carousel本身都是Card布局,因此,我们也可以调用它的setActiveItem()来改变当前显示的内容。

小结:Sencha Touch快速入门2.0之Card布局的内容介绍完了,希望通过本文的学习能对你有所帮助!

责任编辑:zhaolei 来源: 博客园
相关推荐

2011-09-02 15:42:55

Sencha Touc布局

2011-09-02 15:18:49

Sencha Touc

2011-09-02 16:08:09

Sencha ToucAPI文档

2011-09-02 15:28:10

Sencha Touc浏览器

2011-10-26 10:12:53

Sencha Touc布局

2011-10-26 10:21:40

Sencha Touc组件

2011-10-26 10:43:19

Sencha Touc

2011-09-30 14:15:10

Sencha ToucSencha Touc

2012-01-10 13:21:33

Sencha Touc使用data包

2011-09-02 15:12:29

PhoneGapSencha Touc

2011-10-18 09:49:40

新特征Sencha Touc

2011-10-26 10:32:05

Sencha Touc数据视图

2011-07-26 09:41:50

Sencha Touc特性HTML 5

2010-11-22 10:31:17

Sencha touc

2011-07-25 15:55:21

Sencha ToucHtml 5

2011-11-16 13:14:02

Sencha TouciOS本地应用

2011-09-05 10:20:21

Sencha ToucAPP

2011-07-25 16:21:22

Sencha touc

2011-07-26 09:46:53

Sencha Touc

2011-09-02 16:21:08

Sencha Touc自动生成工具
点赞
收藏

51CTO技术栈公众号