tab面板组件的简单示例

这是一个简单的介绍了TabPanel中常用的属性,极其含义

 

 

 

 

 

/*****************************************************************************************************************************/

app.js

 

//<debug>
Ext.Loader.setPath({
    'Ext': 'touch/src',
    'Oreilly': 'app'
});
//</debug>
Ext.require('Ext.TabPanel');
Ext.application({
    name: 'Oreilly',

    requires: [
        'Ext.MessageBox'
    ],
 
 views:[
  'tabPanel1'  
 ],
 controllers:[
  'tabPanel1'  
 ],

    icon: {
        '57': 'resources/icons/Icon.png',
        '72': 'resources/icons/Icon~ipad.png',
        '114': 'resources/icons/[e-mail]',
        '144': 'resources/icons/Icon~[e-mail]'
    },

    isIconPrecomposed: true,

    startupImage: {
        '320x460': 'resources/startup/320x460.jpg',
        '640x920': 'resources/startup/640x920.png',
        '768x1004': 'resources/startup/768x1004.png',
        '748x1024': 'resources/startup/748x1024.png',
        '1536x2008': 'resources/startup/1536x2008.png',
        '1496x2048': 'resources/startup/1496x2048.png'
    },

    launch: function() {
 /*********************1. tab面板组件的简单示例**********************************/
 var tabPanel1=Ext.create('Ext.TabPanel',{
  id:'tabPanel1',
  ui:'dark',//定义组件中所使用的预定义样式,常用的有dark和light,该配置选项也是容器的配置选项,大多数容器配置选项都有这个 参数
  tabBarPosition:'bottom',//指定面板中标签栏的停靠位置,可指定值为bottom(停靠底部)或top(停靠顶部)
  activeItem:1,//指定默认显示第几个子容器组件,也可用通过setActiveItem(1)来指定
  items:[
   {
    title:'主页',//当面板停靠顶部时,该选项值为该面板在标签栏中显示的标签文字;当停靠在底部时,该选项值为停靠在标签栏中图标的标题文字
    html:'主页',
    id:'homePage',
    iconCls:'home'//定义面板停靠在面板底部时,该面板在标签栏中显示的图标样式名称.这些图标是sencha touch系统内置的
   },
   {
    title:'合同',
    html:'合同',
    id:'contact',
    iconCls:'user'
   }
     
  ],
  listeners:{
   //activeitemchange:这个监听函数就是面板切换是所使用的监听函数,每一次切换面板都会调用此函数.
   activeitemchange:function(item,oldValue,newValue){
    
    //return false;//当你返回false他将不会指定切换操作
    return true;//默认返回true
   },
   //painted:处理函数中改变组件的颜色,尺寸等视觉效果
   painted:function(item){
    //alert(item);
    item.addCls('bgColorPink');
   }
  }
 });
 tabPanel1.setActiveItem(0);//指定第一个子容器组件为页面首次打开时展示的组件,当setActiveItem方法执行时将会触发Tab面板组建的activeitemchange事件,可以对该事件进行监听并指定事件处理函数
 /*********************1. tab面板组件的简单示例**********************************/
   // Ext.Viewport.add(tabPanel1);
 Ext.Viewport.add(Ext.create('Oreilly.view.tabPanel1'));
 //Ext.Viewport.add(Ext.create('Oreilly.view.About'));
    },

    onUpdated: function() {
        Ext.Msg.confirm(
            "Application Update",
            "This application has just successfully been updated to the latest version. Reload now?",
            function(buttonId) {
                if (buttonId === 'yes') {
                    window.location.reload();
                }
            }
        );
    }
});