对于第一次尝试运行此程序,最简单的方法是使用所有静态文件,以保持简单。一旦应用程序从静态 html 和 js 文件运行,就可以进行迁移以使用 spring mvc 和 jsp 页面。
首先,确保 webapp 文件夹下有一个名为 resources 的文件夹,假设 webapp 是现有 WEB-INF 文件夹的父文件夹。
使用静态 html 页面的基本起始文件夹结构为:
webapp
- resources
-- app
-- css
--- ext-all.css
-- sass
-- themes
- WEB-INF
-- spring
-- classes
-- views
index.html
app.js
ext-all-debug.js
在 WEB-INF 中可能有一个带有 mvc-config.xml 文件或类似文件的 spring 文件夹。在该配置文件中,需要使用资源标签指定资源文件夹来提供静态内容。很可能,第一个 mvc:annotation-driven 标签在配置文件中已经处于领先地位,如下面的片段所示。将下面提到的资源标签添加到配置文件中。
<!-- Configures support for @Controllers -->
<mvc:annotation-driven />
<!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources directory -->
<resources mapping="/resources/**" location="/resources/" />
有了这个,资源文件夹就可以提供index.html 文件,就像Sencha 示例的设置一样。
所有这些都让您能够从如下网址构建第一个示例:http://localhost:8080/resources/index.html
下载并解压后,Ext JS zip 包含一个资源文件夹。将该文件夹的子文件夹复制到 webapp/resources 文件夹中。还将 ext-all.debug.js 复制到 webapp/resources 文件夹。
然后在 webapp/resources 中创建 index.html,其内容类似于 Sencha 教程:
<html>
<head>
<title>Static Account Manager</title>
<link rel="stylesheet" type="text/css" href="./css/ext-all.css">
<script type="text/javascript" src="./ext-all-debug.js"></script>
<script type="text/javascript" src="./app.js"></script>
</head>
<body></body>
</html>
在 webapp/resources 文件夹中创建 app.js,如以下代码片段所示,并且足以使用 app.js 中配置的单个面板启动并运行。从这一点来看,本教程很容易移植到此设置。
Ext.application({
name: 'AM',
appFolder: 'app',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'panel',
title: 'Users',
html : 'List of users will go here'
}
]
});
}
});
静态 html 文件正确运行后,可以从视图文件夹中使用 jsp,其内容如下:
<html>
<head>
<title>JSP Account Manager</title>
<link rel="stylesheet" type="text/css" href="./resoures/css/ext-all.css">
<script type="text/javascript" src="./resoures/ext-all-debug.js"></script>
<script type="text/javascript" src="./resoures/app.js"></script>
</head>
<body></body>
</html>