Ext Panel

<%@ 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 Ext.Panel jsp</title>

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src = "extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js" charset="utf-8"></script>
   
    <!-- Ext.Panel 
     //autoLoad:{url:"inner.html"},
     //handler
     //toolBar1
     //toolBar2
     //panelAAA
     -->
    <script type="text/javascript">
    
     Ext.onReady(function (){

     alert("---------11111------");
     var toolBar1 = new Ext.Toolbar({
    
     buttons:[{
     text:"新建",
     handler:function(){
    
     Ext.MessageBox.alert("新建 ","新建操作演示");
     }
     },{
     xtype:"tbseparator"
     },{
     text:"打開"
     },{
     text:"保存"
     }]
     });
       alert("---------2222------");
        var toolBar2 = new Ext.Toolbar({
        
         buttons:[{
         text:"上一步"
         },{
         text:"下一步"
         },"-",{
         text:"退出"
         }]
        });
    
     alert("---------0000------");
     var panelAAA = new Ext.Panel({
    
     title:"一個最簡單的Panel",
     width:400,
     titleCollapse:true,
     collapsible:true,
     html:" ”誤炸 ：“  是美國最終的解釋。當年，誤炸；已成為歷史一瞬。 ",
     renderTo:"d",
     tbar:toolBar1,
     bbar:toolBar2
    
     });
    
    
     });//onReady()
    
    </script>    
   
   
   </head>
   
  <body>
  
    this  is my first Ext  Panel jsp  此panel 无法显示
   
  </body></html>

解决方案 »

  1.   

     renderTo: "d ", 
    d标签在哪里？
      

  2.   

    Ext.onReady(
    function(){  
            alert( "---------11111------ 要去掉 'tbseparator '的空格"); 
            var   toolBar1   =   new   Ext.Toolbar({
            buttons:[{
            text: "新建 ",handler:function(){  
             Ext.MessageBox.alert( "新建   ", "新建操作演示 "); 
            }
            },{ 
             xtype: "tbseparator"  
            },{ 
             text: "打開 " 
            },{ 
             text: "保存 " 
            }] 
            }); 
            alert( "---------2222------ "); 
              var   toolBar2   =   new   Ext.Toolbar({ 
              
              buttons:[{ 
              text: "上一步 " 
              },{ 
              text: "下一步 " 
              }, "- ",{ 
              text: "退出 " 
              }] 
              }); 
            
            alert( "---------0000------ "); 
            var panelAAA  = new Ext.Panel({
            
            title: "一個最簡單的Panel ", 
            width:400, 
            titleCollapse:true, 
            collapsible:true, 
            html: "   ”誤炸  ：“是美國最終的解釋。當年，誤炸；已成為歷史一瞬。   ", 
            renderTo: "bbb", 
            tbar:toolBar1, 
            bbar:toolBar2
            });  
       });
     </script>
     
     <div id='bbb'></div>
      

  3.   

    代码没问题
    Ext.onReady(function() {
        var toolBar1 = new Ext.Toolbar({
            buttons: [{
                text: "新建 ",
                handler: function() {
                    Ext.MessageBox.alert("新建 ", "新建操作演示 ");
                }
            },
            {
                xtype: "tbseparator"
            },
            {
                text: "打開 "
            },
            {
                text: "保存 "
            }]
        });
        var toolBar2 = new Ext.Toolbar({        buttons: [{
                text: "上一步 "
            },
            {
                text: "下一步 "
            },
            "- ", {
                text: "退出 "
            }]
        });
        var panelAAA = new Ext.Panel({
            title: "一個最簡單的Panel ",
            width: 400,
            titleCollapse: true,
            collapsible: true,
            html: " ”誤炸 ：“是美國最終的解釋。當年，誤炸；已成為歷史一瞬。 ",
            renderTo: "bbb",
            tbar: toolBar1,
            bbar: toolBar2
        });
    });
      

  4.   

    <link   rel= "stylesheet "   type= "text/css "   href= "<%=request.getContextPath()%>/extjs/resources/css/ext-all.css ">
    <script   type= "text/javascript "   src   =   "<%=request.getContextPath()%>/extjs/adapter/ext/ext-base.js "> </script>
    <script   type= "text/javascript "   src= "<%=request.getContextPath()%>/extjs/ext-all.js "   charset= "utf-8 "> </script> 
    带上根路径看看，可能是路径问题