Ext写得js文件怎么运行 web工程下 100分！！！！见下面详解

我现在新建了一个web项目  然后直接写了一个js文件在webroot文件下，在webroot下面新建了一个extjs文件放置Ext的几个配置文件，然后我怎么让我的这个js运行出来结果？
放在jsp页面中加载运行嘛?
我的js代码
/*
 * Ext JS Library 1.0.1
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * [email protected]
 * 
 * http://www.extjs.com/license
 */// create the HelloWorld application (single instance)
var HelloWorld = function(){
    // everything in this space is private and only accessible in the HelloWorld block
    
    // define some private variables
    var dialog, showBtn;
    
    // return a public interface
    return {
        init : function(){
             showBtn = Ext.get('show-dialog-btn');
             // attach to click event
             showBtn.on('click', this.showDialog, this);
        },
       
        showDialog : function(){
            if(!dialog){ // lazy initialize the dialog and only create it once
                dialog = new Ext.BasicDialog("hello-dlg", { 
                        autoTabs:true,
                        width:500,
                        height:300,
                        shadow:true,
                        minWidth:300,
                        minHeight:250,
                        proxyDrag: true
                });
                dialog.addKeyListener(27, dialog.hide, dialog);
                dialog.addButton('提交', dialog.hide, dialog).disable();
                dialog.addButton('关闭', dialog.hide, dialog);
            }
            dialog.show(showBtn.dom);
        }
    };
}();// using onDocumentReady instead of window.onload initializes the application
// when the DOM is ready, without waiting for images and other resources to load
Ext.onReady(HelloWorld.init, HelloWorld, true);

解决方案 »

  1.   

    1、 jsp页面引入Ext的库文件
    <link rel="stylesheet" type="text/css" href="该文件的路径/ext-all.css"></link>
    <script type="text/javascript" src="该文件的路径/ext-base.js"></script>
    <script type="该文件的路径/ext-all.js"></script>
    <script type="Ext的BasicDialog文件的路径"></script>
    <script type="text/javascript" src="你自己的这个js的路径/abc.js"></script>2、确保jsp页面里有id为show-dialog-btn的button和id为hello-dlg的div
      

  2.   

    1楼
    可以把jsp页面的script代码写一下嘛？之前没接触过javascript，明白了  100分全给你，麻烦了谢谢
      

  3.   

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title></title>
                    <!-- Ext需要用到的css -->
    <link href="${pageContext.request.contextPath}/extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
                     <!-- Ext库 -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/extjs/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/extjs/ext-all.js"></script>
                    <!-- 自己写的js -->
    <script type="text/javascript" src="你自己用Ext写的js文件路径"></script>
    </head>
    <body>
    ...
    </body>
    </html>
      

  4.   

    <%@ 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>
    <!-- 这个Ext库文件的路径你结合你自己的工程去改哈 -->
    <link rel="stylesheet" type="text/css"
    href="ext-2.2/resources/css/ext-all.css"></link>
    <script type="text/javascript" src="ext-2.2/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext-2.2/ext-all.js"></script>
    <script type="text/javascript" src="Ext的BasicDialog文件的路径"></script>
    <script type="text/javascript" src="你自己写的这个js的路径"></script>
    <body>
    <!-- 下面的这些按理说应该写成Ext组件 但是写成下面两个应该也可以用  -->
    <input id="show-dialog-btn" type="button">
    <div id="hello-win"></div>
    </body>
    </html>
      

  5.   

    楼上你你给我写成Ext组件吧、、
    还有就是<input id="show-dialog-btn" type="button">
            <div id="hello-win"></div>
    这两段代码加个注释行吗？
    谢谢
    100分全给你
    好人呀
    好人呀
      

  6.   

    // 我现在新建了一个web项目
    // 然后直接写了一个js文件在webroot文件下，在webroot下面新建了一个extjs文件放置Ext的几个配置文件，然后我怎么让我的这个js运行出来结果？
    // 放在jsp页面中加载运行嘛?
    // 我的js代码
    /*
     * Ext JS Library 1.0.1 Copyright(c) 2006-2007, Ext JS, LLC. [email protected]
     * 
     * http://www.extjs.com/license
     */
    // create the HelloWorld application (single instance)
    var HelloWorld = function()
    {
    // everything in this space is private and only accessible in the HelloWorld
    // block // define some private variables
    //**************BEGIN*************************
    var btn = new Ext.Button({
    text:'按钮',
    id:'show-dialog-btn'
    })
    var panel = new Ext.Panel({
    title:'dd',
    id:'ddd',
    frame:true,
    layout:'form',
    height:100,
    items:[btn],
    applyTo:Ext.getBody()
    })
         //**************END************************* var dialog, showBtn; // return a public interface
    return {
    init : function()
    {
    showBtn = Ext.get('show-dialog-btn');
    // attach to click event
    showBtn.on('click', this.showDialog, this);
    }, showDialog : function()
    {
    if (!dialog)
    { // lazy initialize the dialog and only create it once
    dialog = new Ext.BasicDialog("hello-dlg", {
    autoTabs : true,
    width : 500,
    height : 300,
    shadow : true,
    minWidth : 300,
    minHeight : 250,
    proxyDrag : true
    });
    dialog.addKeyListener(27, dialog.hide, dialog);
    dialog.addButton('提交', dialog.hide, dialog).disable();
    dialog.addButton('关闭', dialog.hide, dialog);
    }
    dialog.show(showBtn.dom);
    }
    };
    }();// using onDocumentReady instead of window.onload initializes the application
    // when the DOM is ready, without waiting for images and other resources to load
    Ext.onReady(HelloWorld.init, HelloWorld, true);
      

  7.   

    楼上你这是修改了我的js文件嘛？你看了我的提问了嘛？
    <--------------------------------------------
    楼上你你给我写成Ext组件吧、、
    还有就是<input id="show-dialog-btn" type="button">
      <div id="hello-win"></div>
    这两段代码加个注释行吗？
    谢谢
    ---------------------------------------------->
      

  8.   


    ///引用跟一楼一样
    把你的入口方法变成全局的、
    然后直接在html里
    <script type="text/javascript">
        Ext.onReady(function () {
            EHC.YSF.Global.Init.ShowMenu();
        });
    </script>
      

  9.   


    <script type="text/javascript">
        Ext.onReady(function () {
            HelloWorld();///你的入口方法
        });
    </script>