Nelson的部落格: Ext Menu

開發環境：
IDE:MyEclipse6.6GA
Web Server:Tomcat 6.0.20
Database:MySql 5.1.36
MVC:Struts2.1.8
FrameWork:Spring2.0,Hibernate3.2
Client UI:Ext2.3.0

Ext Menu(一)
一、建立Menu頁面(menu.jsp):

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    

    <title>My JSP 'combox.jsp' starting page</title>

    

 <meta http-equiv="pragma" content="no-cache">

 <meta http-equiv="cache-control" content="no-cache">

 <meta http-equiv="expires" content="0">    

 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

 <meta http-equiv="description" content="This is my page">

 <!--

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

 -->

 <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">

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

 <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>

 <script type="text/javascript" src="extjs/ext-all.js"></script>

 <script type="text/javascript" src="extjs/ext-lang-zh_TW.js"></script> 

 <script type="text/javascript">

 <!--

  Ext.onReady(function(){

   new Ext.Toolbar({

    renderTo:document.body,

    items:[{xtype:'tbbutton',

         text:'Button'},

        {xtype:'tbbutton',

         text:'Menu Button',

      menu:[{text:'Better'},

         {text:'Good'},

         {text:'Best'}]},

        {xtype:'tbsplit',

      text:'Split Button',

      menu:[{text:'Item One'},

         {text:'Item Two'},

         {text:'Item Three'}]

        }]

   });

  }); 

 //-->

 </script>

  </head>

  

  <body>

  

  </body>

</html>

二、測試運行結果：
1.http://localhost:8080/ExtStudy/Basic/menu.jsp

Ext Menu(二)
增加Button群組及checked default value。
一、建立Menu頁面(menu1.jsp):

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    

    <title>My JSP 'combox.jsp' starting page</title>

    

 <meta http-equiv="pragma" content="no-cache">

 <meta http-equiv="cache-control" content="no-cache">

 <meta http-equiv="expires" content="0">    

 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

 <meta http-equiv="description" content="This is my page">

 <!--

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

 -->

 <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">

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

 <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>

 <script type="text/javascript" src="extjs/ext-all.js"></script>

 <script type="text/javascript" src="extjs/ext-lang-zh_TW.js"></script> 

 <script type="text/javascript">

 <!--

  Ext.onReady(function(){

   new Ext.Toolbar({

    renderTo:document.body,

    items:[{xtype:'tbbutton',

         text:'Button'},

        {xtype:'tbbutton',

         text:'Menu Button',

       //加入群組及checked default value

      menu:[{text:'Better',

            checked:true,

            group:'quality'},

         {text:'Good',

            checked:false,

            group:'quality'},

         {text:'Best',

            checked:false,

            group:'quality'}]},

        {xtype:'tbsplit',

      text:'Split Button',

      menu:[{text:'Item One'},

         {text:'Item Two'},

         {text:'Item Three'}]

        }]

   });

  }); 

 //-->

 </script>

  </head>

  

  <body>

  

  </body>

</html>

二、測試運行結果：
1.http://localhost:8080/ExtStudy/Basic/menu1.jsp

Ext Menu(三)
一、建立Menu頁面(menu1.jsp):
button加入Icon。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    

    <title>My JSP 'combox.jsp' starting page</title>

    

 <meta http-equiv="pragma" content="no-cache">

 <meta http-equiv="cache-control" content="no-cache">

 <meta http-equiv="expires" content="0">    

 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

 <meta http-equiv="description" content="This is my page">

 <!--

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

 -->

 <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">

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

 <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>

 <script type="text/javascript" src="extjs/ext-all.js"></script>

 <script type="text/javascript" src="extjs/ext-lang-zh_TW.js"></script> 

 <script type="text/javascript">

 <!--

  Ext.onReady(function(){

   new Ext.Toolbar({

    renderTo:document.body,

    items:[{xtype:'tbbutton',

         text:'Button',

         //加入Icon

         cls:'x-btn-text-icon',

         icon:'images/forumlink.gif'},

        {xtype:'tbbutton',

         text:'Menu Button',

         //加入群組及checked default value

      menu:[{text:'Better',

            checked:true,

            group:'quality'},

         {text:'Good',

            checked:false,

            group:'quality'},

         {text:'Best',

            checked:false,

            group:'quality'}]},

        {xtype:'tbsplit',

      text:'Split Button',

      menu:[{text:'Item One'},

         {text:'Item Two'},

         {text:'Item Three'}]

        }]

   });

  }); 

 //-->

 </script>

  </head>

  

  <body>

  

  </body>

</html>

二、測試運行結果：
1.http://localhost:8080/ExtStudy/Basic/menu1.jsp

Ext Menu(四)
一、建立Menu頁面(menu2.jsp):
button加入handler。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    

    <title>My JSP 'combox.jsp' starting page</title>

    

 <meta http-equiv="pragma" content="no-cache">

 <meta http-equiv="cache-control" content="no-cache">

 <meta http-equiv="expires" content="0">    

 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

 <meta http-equiv="description" content="This is my page">

 <!--

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

 -->

 <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">

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

 <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>

 <script type="text/javascript" src="extjs/ext-all.js"></script>

 <script type="text/javascript" src="extjs/ext-lang-zh_TW.js"></script> 

 <script type="text/javascript">

 <!--

  Ext.onReady(function(){

   new Ext.Toolbar({

    renderTo:document.body,

    items:[{xtype:'tbbutton',

         text:'Button',

         //加入Icon

         cls:'x-btn-text-icon',

         icon:'images/forumlink.gif',

         //加入按鈕事件

         handler:function(){Ext.Msg.alert('按我','您按到我了!');}},

        {xtype:'tbbutton',

         text:'Menu Button',

         //加入群組及checked default value

      menu:[{text:'Better',

            checked:true,

            group:'quality'},

         {text:'Good',

            checked:false,

            group:'quality'},

         {text:'Best',

            checked:false,

            group:'quality'}]},

        {xtype:'tbsplit',

      text:'Split Button',

      menu:[{text:'Item One'},

         {text:'Item Two'},

         {text:'Item Three'}]

        }]

   });

  }); 

 //-->

 </script>

  </head>

  

  <body>

  

  </body>

</html>

二、測試運行結果：
1.http://localhost:8080/ExtStudy/Basic/menu2.jsp

Ext Menu(五)
一、建立Menu頁面(menu2.jsp):
當按下Help button後，自動去Load相對應之檔案。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    

    <title>My JSP 'combox.jsp' starting page</title>

    

 <meta http-equiv="pragma" content="no-cache">

 <meta http-equiv="cache-control" content="no-cache">

 <meta http-equiv="expires" content="0">    

 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

 <meta http-equiv="description" content="This is my page">

 <!--

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

 -->

 <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">

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

 <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>

 <script type="text/javascript" src="extjs/ext-all.js"></script>

 <script type="text/javascript" src="extjs/ext-lang-zh_TW.js"></script> 

 <script type="text/javascript">

 <!--

  Ext.onReady(function(){

   //Load content on menu item click

   var Movies = function() {

    return {

     showHelp : function(btn){

      var helpbody = Ext.get('helpbody');

      if (!helpbody) {

       Ext.DomHelper.append(Ext.getBody(),{

        tag:'div',

        id:'helpbody'

        });

      }

      Movies.doLoad(btn.helpfile);

     },

     doLoad : function(file){

      Ext.get('helpbody').load({

       url: 'html/' + file + '.txt'

      });

     }

    };

   }();

     

   new Ext.Toolbar({

    renderTo:document.body,

    items:[{xtype:'tbbutton',

         text:'Button',

         //加入Icon

         cls:'x-btn-text-icon',

         icon:'images/forumlink.gif',

         //加入按鈕事件

         handler:function(){Ext.Msg.alert('按我','您按到我了!');}},

        {xtype:'tbbutton',

         text:'Menu Button',

         //加入群組及checked default value

      menu:[{text:'Better',

            checked:true,

            group:'quality'},

         {text:'Good',

            checked:false,

            group:'quality'},

         {text:'Best',

            checked:false,

            group:'quality'}]},

        {xtype:'tbsplit',

      text:'Split Button',

      menu:[{text:'Item One'},

         {text:'Item Two'},

         {text:'Item Three'}]

        },

        {xtype:'tbsplit',

         text:'Help',

         menu:[{text:'Genre',

             helpfile:'genre',

             handler:Movies.showHelp},

            {text:'Director',

             helpfile:'director',

             handler:Movies.showHelp},

            {text:'Title',

             helpfile:'title',

             handler:Movies.showHelp}]}

       ]

   });

  }); 

 //-->

 </script>

  </head>

  

  <body>

  

  </body>

</html>

二、測試運行結果：
1.http://localhost:8080/ExtStudy/Basic/menu2.jsp

Nelson的部落格

2009年12月17日星期四

Ext Menu

沒有留言:

張貼留言

追蹤者

關於我自己

2009年12月17日 星期四

Ext Menu

沒有留言:

張貼留言

2009年12月17日星期四