mobileliker
Sencha Touch中TabPanel组件的使用（转）

1.来源链接：http://blog.csdn.net/liuhenghui5201/article/details/23704023

 

 

app.js

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. Ext.require('Ext.TabPanel');  
  2. Ext.application({  
  3.     name:'MyApp4',  
  4.     icon:'images/icon.png',  
  5.     glossOnIcon:false,  
  6.     phoneStarupScreen:'images/starUp.png',  
  7.     tabletStartupScreen:'images/tablet.png',  
  8.     launch:function(){  
  9.         var tabPanel=Ext.create('Ext.TabPanel',{  
  10.             id:'tabPanel',  
  11.             ui:'dark',  
  12.             tabBarPosition:'bottom',  
  13.             items:[{  
  14.                 title:'主页',  
  15.                 html:'主页',  
  16.                 iconCls:'home'  
  17.             },{  
  18.                 title:'合同',  
  19.                 html:'合同',  
  20.                 iconCls:'user'  
  21.             }]  
  22.         });  
  23.         Ext.Viewport.add(tabPanel);  
  24.     }  
  25. });  


index.jsp

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2.   
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  4. <html>  
  5.   <head>  
  6.     <title>Tab面板组件使用示例</title>  
  7.       
  8.     <script type="text/javascript" src="sencha-touch-debug.js"></script>  
  9.     <script type="text/javascript" src="app.js"></script>  
  10.     <link rel="stylesheet" href="sencha-touch.css" type="text/css"></link>  
  11.     <style type="text/css">  
  12.         .bkColorPink{  
  13.             pink;  
  14.         }     
  15.         body{  
  16.             font-family: '宋体';  
  17.         }  
  18.     </style>  
  19.   </head>  
  20.   <body>  
  21.   </body>  
  22. </html>  


在需要SenchaTouch的一些必须的文件即可。

组织结构如下：

效果如下：


SenchaTouch中内置图标的样式名称及其显示效果

 

posted on 2014-10-06 22:36  mobileliker  阅读(158)  评论(0)    收藏  举报

博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3 Powered By博客园