下载文档原格式
Extjs4.0.7 desktop初级搭建涉及内容：1.classes.js的拆分2.App.js和Settings.js里代码的含义3.桌面图标的换行4.一些小小的修改首先上官网上下载最新版本的Extjs，本次讲解以4.0.7版本为例，下载地址/products/extjs/download/ext-js-4.0.7/1234然后打开myeclipse新建一个web project工程，这个工程的结构如下其中core文件夹用于存放desktop的核心代码css文件夹用于存放样式表ext文件夹用于存放ext-all.js等images文件夹用于存放desktop实例中imagesmodules文件夹用于存放桌面上显示的模块resources文件夹用于存放desktop实例自带的壁纸文件夹wallpapers 和Extjs中resources下的themes文件夹接下来把App.js,Settings.js和index.jsp(即desktop.html)放在webroot 目录下面一．classes.js的拆分：首先来看一下index.jsp中的代码<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN""/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type"content="text/html; charset=utf-8"><title>extjs4 desktop</title><!-- css --><link rel="stylesheet"type="text/css" href="js/css/ext-all.css"/><link rel="stylesheet"type="text/css" href="js/css/desktop.css"/><!-- base js --><script type="text/javascript"src="js/ext/ext-all.js"></script><script type="text/javascript"src="js/ext/ext-lang-zh_CN.js"></script> <!-- core js --><script type="text/javascript"src="js/core/Module.js"></script><script type="text/javascript"src="js/core/Video.js"></script><script type="text/javascript"src="js/core/Wallpaper.js"></script> <script type="text/javascript"src="js/core/FitAllLayout.js"></script> <script type="text/javascript"src="js/core/StartMenu.js"></script> <script type="text/javascript"src="js/core/TaskBar.js"></script><script type="text/javascript"src="js/core/ShortcutModel.js"></script> <script type="text/javascript"src="js/core/Desktop.js"></script><script type="text/javascript"src="js/core/App.js"></script><!-- module js --><script type="text/javascript"src="modules/WallpaperModel.js"></script> <script type="text/javascript"src="modules/VideoWindow.js"></script> <script type="text/javascript"src="modules/BogusModule.js"></script> <script type="text/javascript"src="modules/BogusMenuModule.js"></script> <script type="text/javascript"src="modules/TabWindow.js"></script> <script type="text/javascript"src="modules/GridWindow.js"></script> <script type="text/javascript"src="modules/AccordionWindow.js"></script> <script type="text/javascript"src="modules/SystemStatus.js"></script><script type="text/javascript"src="modules/Notepad.js"></script><!-- config js --><script type="text/javascript"src="Settings.js"></script><script type="text/javascript"src="App.js"></script> <script type="text/javascript">Ext.Loader.setPath({'Ext.ux.desktop': 'js',MyDesktop: ''});Ext.require('MyDesktop.App');var myDesktopApp;Ext.onReady(function () {myDesktopApp = new MyDesktop.App();});</script></head><body><a href=""target="_blank"alt="Powered by Ext JS"id="poweredby"><div></div></a></body></html>其实有了这段代码就算是拆分完了，但是还不够，我们还需要修改两个地方，1.settings.js中修改2.App.js中修改以上两处如果不改当你在桌面上点击右键来改变桌面背景图片时会发生错误。
使用ExtJS6.0开发应用框架作者：dawnzhou@前言本文介绍了使用Sencha Cmd辅助工具，在不借助Eclipse等Java开发工具的情况下，如何能够快速开发基于ExtJS6.0的页面程序。
最终开发界面如下：下载开发工具ExtJS 6.0 GPL正式版下载地址https:///legal/gpl/ExtJS 6.0离线文档下载地址经典版/downloads/extjs-docs-6.0.0-classic.zip现代版/downloads/extjs-docs-6.0.0-modern.zipSencha Tool下载地址/cmd/6.0.0.202/no-jre/SenchaCmd-6.0.0.202-windows-no_jre.zip（假设你的系统里已经安装了JRE，否则请下载带JRE版本的Sencha Tool）搭建开发环境安装Sencha Tool默认安装即可。
解压离线帮助文档extjs-docs-6.0.0-classic.zip解压ext-6.0.0-gpl.zip使用工具生成开发框架以管理员身份打开DOS窗口，进入到ExtJS6的解压目录的上级目录输入命令sencha -sdk ./ext-6.0.0 generate app Nms ./Nms该命令的含义是sencha 使用当前目录下的ext-6.0.0作为SDK，生成名称为Nms的app，目标文件目录为当前的Nms目录下。
DOS进入刚生成的Nms目录，然后运行sencha app watch浏览器输入http://localhost:1841，可以看到工具为我们生成的默认的应用页面，如下图。
资源管理器进入到Nms目录，看一下目录结构其中我们重点关心以下几个目录：app存放的是数据结构和数据（model和store）。
从6.0版本开始，sencha把ExtJS（传统界面）和Touch（移动设备界面）合二为一，其开发目录分别对应classic和modern两个目录，而跟界面无关的数据部分放置在app目录下。
前端开发中的本地开发环境搭建指南随着互联网的迅猛发展，前端开发变得越来越重要。
在开始开发前端项目之前，搭建一个稳定的本地开发环境至关重要。
本文将为您介绍一些在前端开发中常用的本地开发环境搭建指南，帮助您更高效地进行前端开发。
一、选择合适的开发工具在搭建本地开发环境之前，首先需要选择适合自己的开发工具。
市面上有很多常用的前端开发工具，例如Visual Studio Code（VS Code）、Sublime Text、WebStorm等。
这些工具都拥有丰富的插件生态系统，能够提供代码提示、代码自动补全、调试等功能，大大提高了开发效率。
二、安装Node.jsNode.js是一个基于Chrome V8引擎的JavaScript运行环境，可用于开发后端服务和构建前端项目。
在搭建本地开发环境之前，需要先安装Node.js。
您可以从官方网站下载安装包，并按照向导进行安装。
安装完成后，通过命令行工具检查是否成功安装了Node.js。
三、使用包管理工具在前端开发中，使用包管理工具是非常重要的。
包管理工具可以帮助我们管理项目所依赖的第三方库和工具，使项目的依赖管理更加简单和高效。
目前最常用的包管理工具是npm和Yarn。
npm是Node.js的官方包管理工具，而Yarn则是由Facebook开发并维护的新一代包管理工具。
安装Node.js时，npm会自动安装。
因此，您只需要在命令行工具中运行`npm -v`命令，检查npm的版本。
如果您决定使用Yarn，可以在命令行工具中运行`npm install -g yarn`命令，安装Yarn，并通过`yarn -v`命令检查版本。
四、使用版本控制工具在开发过程中，使用版本控制工具可以更好地管理代码，方便多人协作和版本回退。
Git是最常用的版本控制工具之一。
在开始前端项目之前，您可以通过官方网站下载并安装Git。
Git提供了命令行工具和可视化界面的客户端，以便于您管理代码。
Nodejs后端开发与Express框架Node.js后端开发与Express框架Node.js是一个基于Chrome V8引擎的JavaScript运行时，使JavaScript能够在服务器端运行。
它具有高效的I/O操作和事件驱动的特性，适用于构建可扩展的网络应用程序。
Express框架则是Node.js的一个流行框架，它提供了一组简洁而灵活的工具，用于构建Web应用程序和API。
本文将介绍Node.js后端开发的基础知识，并详细说明如何使用Express框架构建一个基本的Web应用程序。
一、Node.js后端开发基础知识1. 安装Node.js：首先，我们需要在本地安装Node.js。
可以从Node.js官方网站上下载最新版本的Node.js，并按照安装向导进行安装。
2. 创建项目：在开始Node.js后端开发之前，我们需要创建一个新的项目目录。
在命令行中，进入项目目录并执行以下命令创建一个新的package.json文件：```npm init```这个文件将记录项目的相关信息和依赖项。
3. 安装依赖项：Node.js使用npm（Node包管理器）来管理项目的依赖项。
可以使用以下命令安装Express框架和其他需要的模块： ```npm install express```这将会在项目目录下创建一个`node_modules`文件夹，并将依赖项安装到其中。
4. 编写后端代码：创建一个新的JavaScript文件，例如`app.js`，并在其中编写后端代码。
以下是一个简单的例子：```javascriptconst express = require('express');const app = express();const port = 3000;app.get('/', (req, res) => {res.send('Hello, World!');});app.listen(port, () => {console.log(`Server listening on port ${port}`);});上述代码创建了一个Express应用程序，并监听3000端口。
开发环境与测试环境搭建方案开发环境与测试环境的搭建是软件开发过程中非常重要的一环。
开发环境用于开发人员进行代码编写、调试和集成测试，测试环境则用于进行软件的各种测试。
本文将介绍如何搭建开发环境与测试环境的方案，以及一些最佳实践。
开发环境应提供一个良好的开发和调试平台，包括以下几个方面的内容：1.1操作系统选择开发环境的操作系统应该与目标运行环境尽可能相同，这有助于减少因操作系统差异而引发的问题。
通常情况下，开发环境可以选择与目标运行环境一样的操作系统，也可以选择相同系列的操作系统。
1.2开发工具选择开发工具是开发人员进行代码编写、调试和集成测试的主要工具。
选择一个适合的开发工具是非常重要的。
通常情况下，我们应根据开发的具体需求选择相应的开发工具。
1.3版本控制系统开发环境应配置版本控制系统，有助于开发人员管理和追踪代码变更，确保代码的版本一致性。
通常情况下，我们可以选择Git、SVN等版本控制工具。
1.4开发数据库在开发环境中搭建一个开发数据库是非常重要的，它可以用于存储和管理开发过程中的数据。
通常情况下，我们可以选择MySQL、PostgreSQL等数据库。
1.5开发服务器对于一些需要服务器环境的项目，我们需要在开发环境中搭建一个开发服务器，用于模拟真实的生产环境。
通常情况下，我们可以选择Nginx、Tomcat等服务器。
测试环境的搭建是为了对软件进行各种测试，包括单元测试、功能测试、性能测试等。
以下是一些测试环境搭建的最佳实践：2.1硬件设备选择测试环境的硬件设备应尽可能与目标生产环境相似，这有助于准确地模拟真实的环境。
通常情况下，我们可以选择与目标生产环境相同或相似的服务器、网络设备等。
2.2虚拟化技术虚拟化技术可以帮助我们在一台物理机器上搭建多个虚拟机，从而降低硬件成本和管理成本。
通常情况下，我们可以使用VMware、VirtualBox等虚拟化软件。
2.3测试数据库测试环境应搭建一个测试数据库，用于存储测试数据和执行各种测试。
如何进行软件开发环境的搭建和部署随着数字化时代的发展，软件开发已经成为了一项重要的技能，而搭建和部署软件开发环境就显得尤为重要。
本文将介绍如何进行软件开发环境的搭建和部署。
一、选择开发环境在开始进行软件开发环境搭建和部署之前，首先需要选择一款适合自己开发的集成开发环境（Integrated Development Environment，简称IDE）。
常见的IDE有Eclipse、Intellij IDEA、Visual Studio等。
Eclipse是一款广泛使用的Java开发工具，支持多种编程语言，包括Java、C/C++、Python等。
Intellij IDEA则是适合企业级应用开发的Java IDE，提供了强大的资源管理和调试工具，支持Spring框架等。
而Visual Studio则是专门面向Windows平台的IDE，旨在提供全面一体化的开发体验。
需要根据自己的开发需求来选择合适的IDE，其中除了功能外，也可以考虑集成度、用户友好度、性能等因素。
二、安装和配置开发环境一款IDE的安装和配置是软件开发的基础。
以安装Eclipse为例，首先需要下载Eclipse包，然后将其解压到合适的目录下，即可开始安装。
在安装过程中，需要设置JRE的路径，即Java运行环境的路径。
如果未安装Java Runtime Environment（JRE），则需要先安装JRE。
安装完成后，需要配置Java环境变量，将JRE安装路径添加至PATH环境变量中。
此外，还需要根据自己的需要安装相关插件和工具包，以提高开发效率。
例如，对于Java开发，可以安装Junit插件，以进行单元测试；安装Maven工具包，以进行项目的构建和管理。
三、版本控制和协作在进行软件开发时，版本控制和协作也是非常重要的环节。
版本控制可以帮助团队成员更好地协作，保证代码的质量和可维护性。
目前比较流行的版本控制工具包括Git、SVN等。
Git是一款开源的分布式版本控制系统，支持多个人协同开发，并可以将代码托管到在线仓库（如GitHub、GitLab）。
搭环境总结搭建开发环境是软件开发人员经常面临的任务之一。
一个好的开发环境可以提高开发效率、简化开发流程，因此，选择适合自己的开发环境非常重要。
本文将总结搭建开发环境的一般步骤和要点，并提供一些实用的建议。
选择操作系统首先，我们需要选择适合开发的操作系统。
常见的选择包括Windows、macOS 和Linux。
每个操作系统都有其特点和优势，开发者可以根据自己的偏好和项目需求进行选择。
一般来说，Windows适合开发Windows平台的应用程序，而macOS和Linux适合开发跨平台的应用程序。
安装开发工具安装开发工具是搭建开发环境的重要一环。
以下是一些常用的开发工具：编辑器选择一个适合自己的代码编辑器非常重要。
常见的编辑器包括Visual Studio Code、Sublime Text和Atom。
这些编辑器都具有强大的代码编辑功能和丰富的插件支持，可以大大提高开发效率。
此外，还可以根据自己的语言偏好选择相应的编辑器，例如，对于Python开发，可以选择PyCharm。
版本控制工具版本控制工具对于团队协作和代码管理非常重要。
Git是最常用的版本控制工具之一，可以轻松地进行代码的版本管理和分布式开发。
安装Git并学习基本的Git命令对于开发者来说是必要的。
虚拟化软件在开发环境中，常常需要搭建虚拟机来模拟特定的运行环境。
虚拟化软件如VirtualBox和VMware可以使开发者轻松地创建、管理和运行虚拟机。
这对于测试、调试和部署应用程序非常有帮助。
调试工具调试工具是开发过程中不可或缺的一部分。
IDE集成的调试器可以帮助开发者在代码运行过程中进行断点调试，并提供变量查看和执行控制等功能。
常见的调试工具包括Visual Studio、Eclipse和PyCharm。
配置开发环境配置开发环境是指对开发工具和运行环境进行调整和优化，以满足特定的开发需求。
以下是一些常见的配置：配置代码编译环境对于编程语言来说，安装和配置相应的编译器和解释器是必要的。
一、实验目的1. 掌握开发环境的搭建流程。
2. 熟悉常用开发工具的使用方法。
3. 提高编程实践能力。
二、实验环境1. 操作系统：Windows 102. 编程语言：Java3. 开发工具：IntelliJ IDEA4. 数据库：MySQL5. 网络环境：稳定网络连接三、实验内容1. 开发环境搭建2. 编写Java程序3. 连接数据库4. 测试程序功能四、实验步骤1. 开发环境搭建（1）下载并安装Java开发包（JDK）1）访问Oracle官网，下载适用于Windows操作系统的JDK版本。
2）双击下载的安装包，按照提示进行安装。
3）安装完成后，在系统环境变量中配置JDK的bin目录。
（2）下载并安装IntelliJ IDEA1）访问IntelliJ IDEA官网，下载免费版或社区版。
2）双击下载的安装包，按照提示进行安装。
3）安装完成后，启动IntelliJ IDEA。
（3）配置MySQL数据库1）下载并安装MySQL数据库。
2）运行MySQL安装程序，按照提示进行安装。
3）安装完成后，配置MySQL环境变量。
2. 编写Java程序（1）创建Java项目1）在IntelliJ IDEA中，选择“File” -> “New” -> “Project”。
2）选择“Java” -> “Maven” -> “Next”。
3）输入项目名称、项目位置等信息，点击“Finish”。
（2）编写Java代码1）在项目目录下，创建一个名为“src”的文件夹。
2）在“src”文件夹下，创建一个名为“com”的包。
3）在“com”包下，创建一个名为“main”的文件夹。
4）在“main”文件夹下，创建一个名为“java”的文件夹。
5）在“java”文件夹下，创建一个名为“HelloWorld”的类。
6）在HelloWorld类中，编写以下代码：```javapublic class HelloWorld {public static void main(String[] args) {System.out.println("Hello, World!");}}```（3）运行Java程序1）在HelloWorld类上，右键点击“Run”。
ExtJs IDE安装图解（Myeclipse）最近要编写js文件，需要安装ExtJs IDE，根据个人的总结，贴出来做个参考，希望对大家有所帮助。
安装是在Myeclipse中。
安装前先下载ext-2.3.0首先，在window—show view—other下打开show view对话框，上面的文本框输入soft,下面会自动显示software and workspace center,点击ok.进入myeclipse配置中心，选择software标签下，在输入框输入spket,下面会自动列出spket相关的组件，如果没有，从输入框左边的add site中，下载，网址为/update/选择前两项，Spket IDE和Spket Text Editor,分别右键单击Add toProfile...添加完之后会在该页面的右下角显示添加的选项，由于本人已经安装，所以暂时用Xerces for Spket IDE 代替，此处应该是Spket IDE和Spket Text Editor这两项，下面显示apply 2 changes,单击下面的apply 2 changes按钮，会自动安装和更新安装完后，重新启动myeclipse后，在window--preferences下会看到spket,如图：选择spket 下的java script profiles,新建一个profiles名，可以自定义，强烈推荐用ExtJS然后增加库文件ExtJS，此处选择即可在下载的ext-2.3.0的source文件夹下，选择ext.jsb文件，添加进去设为默认编辑器根据个人需要选择重启myeclipse，即可使用js编辑器此处只能新建spket 工程，要想建js文件，可以从现成js文件复制，然后改掉里面的代码，或者在myeclipse的文件夹下，新建记事本，将.txt改为.js类型，效果是一样的，如哪位高手知道怎样直接新建js文件，可以告知，本人不甚感激，如有不对，请指正。
一、EXT5ext5的主题是用SASS（点击进入）和Compass（点击进入）编写的。
在ext5中，仅仅通过更改SASS的变量值，就可以将几乎所有的组件样式定制了，包括颜色，字体，边框，背景。
本文介绍了如何创建一个在多应用中可分享的定制化主题。
1.环境要求Sencha Cmd 5这是一个命令行工具，用于部署Ext JS应用，创建一个Ext JS 5主题，你必须拥有Sencha Cmd 5 或更高版本注意：Sencha Cmd 5 已经预安装了SASS和Compass，如果你的电脑已经安装了，请卸载掉自己的。
Ruby安装ruby环境（点击进入）用1.9.3版本Ext JS如果你本地有Ext JS SDK，解压后在本地路径下执行Cmd命令就行。
不过我们已经不用下载Ext JS 了，你可以用“-ext”命令来自动下载最新版的Ext JS 5！我们这次就用这个命令来做。
2.创建自定义主题如上所述你需要安装ruby，cmd工具，就可以开始制作主题了创建一个工作空间第一步是用Sencha Cmd创建一个你自己的工作空间[ruby]view plaincopyprint?1.cd /d E:\ext2.sencha generate workspace-ext my-workspace如果你想使用一个下载好的SDK或本地的一个SDK副本，在命令前面加上你解压的Ext JS SDK的路径就可以了[ruby]view plaincopyprint?1.sencha -sdk~/sencha-5.0.0 generate workspace my-workspace1. sencha -sdk C:\Users\zj\Desktop\ext-5.1.0-gpl\ext-5.1.0 generate workspace D:\EXT\Sencha\Cmd5\Sencha\Cmd\work\ZJ生成的工作空间将利用脚手架生成一个Sencha目录，让我们进去看看[ruby]view plaincopyprint?1.cd my-workspace如图：“ext” --- 包含了Ext JS SDK“packages” --- EXT JS语言环境和主题包生成一个App来测试主题我们来生成一个App，在这个基础上来制作主题，在“my-workspace”路径下，用下面的命令来生成一个Ext JS应用的骨架：[ruby]view plaincopyprint?1.sencha -sdk ext generate app ThemeDemoApp theme-demo-app1. sencha -sdk ext generate app ZJEXT ZJEXT现在，我们生成了一个名字为ThemeDemoApp的应用，路径（也就是文件夹）为theme-demo-app。
ExtJS开发步骤说明一. 准备工作：1.1 ExtJS所需文件列表首先将ExtJS的相关源代码,置于项目WebRoot目录下,目录结构如下：----WebRoot----extEngine----adapter----builder----resources----sourceext-all.jsext-all-debug.jsext-core.jsext-back-format.jsext-core-debug.js(从CVS上check的代码中已包含这部分代码)1.2 开发时页面可能需要的资源1．必须的Ext相关的资源：extEngine/ext-all.jsextEngine/adapter/ext/ext-base.jsextEngine/resources/css/ext-all.cssjs/ext-lang-zh_CN-GBK.js (汉化)2．分页js：js/PagingToolbarExt.js3. 关闭tab页js：js/TabCloseMenu.js4. 页面共用的js：js/b2bcommon.js5. 相关css文件：css/b2b-grid.css6. 文件上传js:b2b/Ext.ux.UploadDialog.js二．实例开发：下面以产品中心——产品——产品信息查询为例：概述整个页面布局是ExtJS的border布局：north-west-center-south主面板为一个TabPanel, 位于主页面的一个id为center的div，也就是页面右边的区域2.1主页面index.jsp<script type=”text/javascript”>va r mainPanel = ne w Ext.TabPane l({i d:"mai n",titl e:"主工作区",regio n:"cente r", //位于center区域deferredRende r:fal se,enableTabScrol l:tr ue, //可以滚动activeTab: 0,autoDestro y: fal se,item s:{titl e:'我的工作台',i d:'tod o',xtyp e:'porta l',items:[{columnWidth:.37,styl e:'padding:10px 0px 0px 10p x',items:[{title: '待办事宜列表',layou t:'fi t',tools: tools,items: ne w SampleGrid([0, 2, 3])},{title: '系统通知',tools: tools,html: systemNotice}]},{columnWidth:.37,styl e:'padding:10px 0px 0px 10p x',items:[{title: '产品信息',layou t:'fi t',tools: tools,items: ne w FileInfoGrid([0, 1, 2, 3])},{title: '审批通知',tools: tools,html: Ext.example.shortBogusMarkup}]},{columnWidth:.24,styl e:'padding:10px 0px 10px 10p x',items:[{title: '日历',item s:ne w My.ExtCalendar(),draggabl e:fal se,collapsibl e:false},{title: '采购通知',tools: tools,html: Ext.example.shortBogusMarkup}]}]},plugins: ne w Ext.ux.TabCloseMenu() //tabPanel设置可以关闭插件 });//通过tabFrame.jsp中的iframe,向主面板中添加tab页functio n addTab(id,tabTitle, targetUr l){mainPanel.ad d({id:id,title: tabTitle,iconCls: 'tab s',autoLoad: {url: "tabFrame.jsp?url="+targetUrl, scope: thi s},autoScrol l:fal se,closable:true}).show();}//tabFrame.jsp的代码如下：//<%@ page language="java" pageEncoding="utf-8"%>//<%@taglib uri="/jsp/jstl/core" prefix="c"%>//<IFRAME SRC="${param.url}" width="100%" height="100%" frameborder="0"></IFRAME> //tabFrame.jsp 是通过iframe加载页面到center区域中//更新tab页functio n updateTab(id,title, url) {va r tab = mainPanel.getItem(id);if(ta b){ //如果tab页已存在，就先删除mainPanel.remove(tab);}tab = addTab(id,title,url); //添加tab页mainPanel.setActiveTab(tab); //将当前的tab页置为活动的，即在center区域中显示当前的tab页}//ExtJS代码的执行写在Ext.onReady(function(){ js代码块});Ext.onReady(function(){//设置显示提示Ext.QuickTips.init();//设置cookieExt.state.Manager.setProvider(new Ext.state.CookieProvider());//创建产品中心导航栏的根结点var root = new Ext.tree.TreeNode({id:'productCenter', //根结点id,在一个页面上要保证唯一text:'产品中心', //根结点名称expanded:true //展开此结点，缺省为false});//创建产品分支结点var productNode = new Ext.tree.TreeNode({id:'product',text:'产品',expanded:true});//创建产品信息查询叶子结点var productSearchNode = new Ext.tree.TreeNode({id:'productInfo',text:'产品信息查询',leaf:true, //叶子结点icon:'images/other/class.gif', //图标cls:"x-btn-text-icon" //样式});//创建产品历史查询叶子结点var productHistoryNode = new Ext.tree.TreeNode({id:'productHistory',text:'产品历史查询',leaf:true,icon:'images/other/class.gif'});//将“产品信息查询”叶子结点添加到分支结点“产品“上productNode.appendChild(productSearchNode);//将“产品历史查询”叶子结点添加到分支结点“产品“上productNode.appendChild(productHistoryNode);//将“产品“分支结点添加到树根”产品中心“上root.appendChild(productNode);//创建产品中心Panelvar productPanel = new Ext.Panel({contentEl: 'west_1', //productPanel定位于页面的一个id为‘west_1’的div title:'产品中心', //显示在viewPort左侧导航栏上的标题border:false, //有无边框iconCls:'nav', //设置图标样式animate:true, //是否有动画显示效果items:[productTree], //将“产品中心“树添加到此面板中cls:"x-btn-text-icon" //指定样式});//给“产品中心“树添加Click事件监听productTree.on("click",function (node){var id = node.id; //树结点的id//如果点击了“产品中心“或”产品“结点，就返回if(id=="productCenter"||id=="product")return;//如果点击了“产品查询“结点,就在右边的center区域显示part.jspif(id=="productInfo"){ //产品信息查询（添删改查）updateTab("productInfo","产品信息查询","${pageContext.request.contextPath}/b2b/part.jsp");}else if(id=="productHistory"){ //产品历史查询-按产品查询（添删改查）updateTab("productHistory","产品历史查询","${pageContext.request.contextPath}/b2b/partEvent.jsp");}mainPanel.doLayout(); //呈现页面});//定义一个Viewport,Viewport代表整个浏览器显示区域，其布局指定为boder布局va r viewport = ne w Ext.Viewpor t({layou t:'borde r',items:[ne w Ext.BoxComponen t({ //设置viewport的north区域regio n:'nort h', //定位在north区域,即页面顶部el: 'nort h',height:32}),ne w Ext.BoxComponen t({ //设置viewport的south区域regio n:'sout h', //定位在south区域,即页面底部el: 'sout h',height:20}),{ //设置west区域,即左边导航栏区域regio n:'wes t', //定位在west区域,即左边i d:'west-pane l',titl e:'B2B管理系统',cl s:"x-btn-text-ico n",spli t:tr ue,iconCl s:'forwar d',width: 200,minSize: 175,maxSize: 400,collapsible: tr ue,margin s:'0 0 0 5',layou t:'accordio n', //指定布局layoutConfi g:{animat e:true},//将导航栏的面板和mainPanel添加到viewport中items:[todoPanel,productPanel,orderPanel,storagePanel,systemPanel,userInfoPanel,helpPanel] },mainPanel]});});</script><div id="west"><ul id="west_1" class="munuList"></ul><ul id="west_2" class="munuList"></ul><ul id="west_3" class="munuList"></ul><ul id="west_4" class="munuList"></ul><ul id="west_5" class="munuList"></ul><ul id="west_6" class="munuList"></ul><ul id="west_7" class="munuList"></ul></div><div id="north"></div><div id="south"></div><div id="center"></div>2.2 产品信息查询页面产品信息查询页面主要包括：查询表单PartSearchForm和产品信息面板ProductPanel。
SpringMVC+Mybatis+extjs4项目配置1)软件准备：1.Jdk6：这个需要统一一下，如果用高于jdk6得版本开发，到发布到tomcat服务器后可能运行不正常，在ide上的高版本到低版本的话，也可能出现编译错误的问题，这个要跟生产环境统一起来；2.Tomcat6（7）：这个好像关系不太大，主要看生产环境，但如果页面使用了el表达式的话，则需要用高一点的tomcat服务器，低版本的tomcat对el表达式不支持；3.springsource-tool-suite：开发的ide,推荐使用zip安装包，版本2.9的吧，现在的3.1不是很稳定，占用内存很高，经常不响应2)springMVC相关库(jar)配置1.jar的引用主要配置在maven的pom.xml文件了，整个项目都是用pom.xml文件来组织的，如下图：实际项目的结果如：有点不同，所有的代码是放在src文件夹里的，main/webapp文件夹则对应于发布到tomcat 应用的文件夹，所有如果要提交svn,则只需要提交src里的代码，如果改动了非*.java代码，也只要更新webapp目录里改动文件至tomcat相应目录就行了；2.配置pom.xml可能用到的jar包：1)Mybatis:数据库持续层；<dependency><groupId>org.mybatis</groupId><version>1.1.1</version></dependency>2)Mysql:数据库的jdbc的jar包；<dependency><version>5.1.21</version></dependency>3)其他可能用得到的jar包：zip(org.apache.ant),json转换(com.alibaba)，文件上传组件（commons-fileupload，commons-io）<dependency><groupId>com.alibaba</groupId><version>1.1.22</version></dependency><dependency></dependency><!-- File Upload --><dependency><version>1.2.2</version></dependency><dependency><version>2.0.1</version></dependency><dependency><groupId>org.codehaus.jackson</groupId><version>1.4.2</version></dependency>4)当改动pom.xml文件后，maven会自动更新项目的jar包，并更新至项目里的引用，如下图：3.项目里配置当把需要用到的jar包引用之后，spring框架里可以使用jar包里面的类，但有些jar包时需要spring的运行时自动加载到mvc运行环境中的，比如数据库持续层mybatis1)Mybatis配置：<bean id="dataSource"class="org.springframework.jdbc.datasource.DriverManagerDataSource"> <property name="driverClassName" value="com.mysql.jdbc.Driver" />rEncoding=UTF-8&useUnicode=true" /><property name="password" value="123456" /></bean><!-- 配置SqlSessionFactoryBean --><bean id="sqlSessionFactory"class="org.mybatis.spring.SqlSessionFactoryB ean"><property name="dataSource"ref="dataSource"/><property name="configLocation"value="classpath:mybatis.xml"/> </bean><!-- 配置事务管理器 --><bean id="transactionManager"class="org.springframework.jdbc.datasource. DataSourceTransactionManager"><property name="dataSource"ref="dataSource"/></bean><!-- 配置事务的传播特性 --><bean id="baseTransactionProxy"class="org.springframework.transaction.in terceptor.TransactionProxyFactoryBean"abstract="true"><property name="transactionManager"ref="transactionManager"/><property name="transactionAttributes"><props><prop key="add*">PROPAGATION_REQUIRED</prop><prop key="edit*">PROPAGATION_REQUIRED</prop><prop key="remove*">PROPAGATION_REQUIRED</prop><prop key="insert*">PROPAGATION_REQUIRED</prop><prop key="update*">PROPAGATION_REQUIRED</prop><prop key="del*">PROPAGATION_REQUIRED</prop><prop key="*">readOnly</prop></props></property></bean><!-- 通过扫描的模式，扫描目录 --><bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"> <property name="basePackage"value="com.spring.wlanmis.data.mapper"/></bean>上面的配置主要是：数据库连接，mybatis.xml，MapperScannerConfigurer（数据库Mapping扫描目录，项目的包结构如下：可以这样看，entity里的类一般要配置在mybatis.xml里，mapper里的文件是成对的，一个是xxx.xml文件，另一个是xxx.java（接口）文件，并mapper必须在配置root-content.xml 里的org.mybatis.spring.mapper.MapperScannerConfigurer中，不然mybatis组件就不能实例化2)其他的配置配置文件上传，详细代码可以查看FileUploadController.java<bean id="multipartResolver"class="monsMultipartResolv er"><property name="maxUploadSize"value="8000000"/></bean>剩下的就只是一些普通的javabean配置了，只是为了配置项目的全局参数，类似于ftpScanRunner3)前端extjs的配置：前端比较简单，只是在页面里设置引用，修改后也不用编译代码，发布时可以直接更新到服务器里相应目录进行覆盖，一般引用如下图项目里文件目录结构如下：具体的extjs4的前端mvc框架，还是参照官网/deploy/ext-4.1.0-gpl/examples/，可以先了解一下它的运行机制，项目的所有视图切换都在menu.json文件里。
EXT培训教程第一讲EXT介绍和环境安装1. EXT介绍ExtJS是一个Ajax框架，是一个用javascript写的，用于在客户端创建丰富多彩的web应用程序界面。
ExtJS可以用来开发RIA也即富客户端的AJAX应用.ExtJS主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。
因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。
ExtJs最开始基于YUI技术.2. EXT的下载与安装ExtJs的最新下载地址/ext-3.2.1.zip，下载后解压如图所示∙adapter：负责将里面提供第三方底层库（包括Ext自带的底层库）映射为Ext所支持的底层库。
∙build：压缩后的ext全部源码(里面分类存放)。
∙docs： API帮助文档。
∙exmaples：提供使用ExtJs技术做出的小实例。
∙resources：Ext UI资源文件目录，如CSS、图片文件都存放在这里面。
∙source：无压缩Ext全部的源码(里面分类存放) 遵从Lesser GNU （LGPL）开源的协议。
∙Ext-all.js：压缩后的Ext全部源码。
∙ext-all-debug.js：无压缩的Ext全部的源码(用于调试)。
∙ext-core.js：压缩后的Ext的核心组件，包括sources/core下的所有类。
∙ext-core-debug.js：无压缩Ext的核心组件，包括sources/core下的所有类。
解压到硬盘上任意目录，安装即算完成。
3. EXT开发环境的搭建ExtJs开发环境有很多种，在这里主要讲诉基于Eclipse和spket开发环境的搭建。
首先去/downloads/下载最新版本的eclipse,本文以eclipse3.5为准。
下载并解压，并执行eclipse.exe然后是安装spket插件，打开eclipse后顺序执行[Help]-[ Install new Software…]将弹出如下窗口点击[add]按钮在弹出的窗口的Name和Location分别填写spket和/update/，然后点击[ok]保存这时回到刚才的窗口,点击下拉列表选择新加入的站点,选中然后再勾选spket站点点击[Next]按钮此时窗口如下勾选所列出的插件,然后点击[Finsh],在右下的进度条安装完毕后,重启eclipse点击eclipse上方的[windows]→[preferences] 如果spket插件安装成功后将看到spket的插件信息然后点击Spket →JavaScript Profiles →New，输入“ExtJS”点击OK；选择“ExtJS” 并点击“Add Library”然后在下拉条中选取“ExtJS”；选择“ExtJS”并点击“Add File”，加入ext安装包下的ext.jsb2 文件,文件下载如下设置新的ExtJS Profile，选中并点击“JavaScript Profiles” 对话框右手边的“Defalut”按钮；下面这个操作，根据自己需要设置（可以全选）。
Extjs 4.2.0 MVC 架构内容：1. 文件结构2. 创建项目3. 定义控制器4. 定义视图5. 控制Grid6. 创建Model和Store7. 通过Model保存数据8. 保存到服务器端大型客户端程序通常都难写，难组织，难以维护。
项目经常由于增加功能，增加开发人员而很快失控。
Ext JS 4提出新的项目结构，不仅组织你的代码，并且减少代码量。
我们的系统结构延续“类MVC模式”，第一次引入Models（模型）和Controllers（控制器）的概念。
现在有很多MVC架构，他们或多或少有细微差别。
以下是我们对MVC的定义：∙Model是字段和对应数据的组合（例如User Model有username和password两个字段）。
Models知道如何通过数据包(data package)持久化，还可以通过associations（联系）同其他models关联。
Models很类似于Ext Js 3里的Record类，通常与Stores一起将数据展现到grids和其他components上。
∙View可以是任何类型的component，grids, trees和panels都是视图。
∙Controllers是一个特殊的地方，用来放使application工作的代码 - 可以是渲染视图的，初始化models的，或者其他的应用逻辑。
在这篇文档中我们将创建一个管理用户数据的简单应用，最终你将指导如何使用Ext JS 4应用架构去组织你的应用。
对系统架构来说，提供结构和保持一致性，与实际的类和framework代码同样重要。
遵循我们的惯例可以带来一系列非常重要的好处：∙所有的应用都以同一种方式工作，所以你只需要学习一次。
∙不同应用之间可以共享代码，因为他们都以同种方式工作∙你可以用我们的build工具来创建你的系统的优化版本供production使用1. 文件结构------------------------------------------------------------------------------------------------------------ Ext JS 4 对所有应用定义相同的目录结构。
开发环境搭建文档
1. 安装.
- 前往.官方网站(://./)下载适合您操作系统的最新版本 - 按照安装向导完成安装过程
2. 安装
- 用户可前往官网(://-./)下载并安装
- 用户可使用进行安装: ` `
- 用户可根据发行版本的包管理器进行安装
3. 安装/文本编辑器
- 推荐使用 (://../)
- 其他流行选择包括、等
4. 克隆项目代码
- 打开终端/命令提示符窗口
- 导航到您想存放代码的目录
- 运行 ` [项目仓库地址]`
5. 安装项目依赖
- 导航到项目根目录
- 运行 ` ` 安装所有依赖包
6. 运行开发服务器(可选)
- 大多数现代前端项目需要开发服务器进行热重载等
- 查阅项目文档了解如何启动开发服务器
- 通常运行 ` ` 或 ` `
7. 开始开发
- 使用/文本编辑器打开项目
- 查阅项目文档了解项目结构和开发工作流
- 开发新功能、修复并提交代码
8. 构建发布版本(可选)
- 大多数项目需要构建优化后的发布版本
- 查阅项目文档了解构建命令
- 通常运行 ` `
恭喜您完成了开发环境的搭建!您现在可以开始编码并为项目做出贡献了。
ExtJS开发环境建立
作成人：白洋
作成日：2009-03-26
联系方式：cash_boy_atm@
前言
ExtJS 是一个很不错的Ajax 框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s 应用更加具有活力及生命力。
ExtJS 是一个用javascript 编写，与后台技术无关的前端ajax 框架。
因此，可以把ExtJS 用在.Net、Java、Php 等各种开发语言开发的应用中。
本文着重讲解开发ExtJS的环境搭建。
目录
ExtJS开发环境建立 (1)
前言 (2)
1. 准备工作 (4)
1. 准备工作
Eclipse版本：eclipse-jee-ganymede-SR2-win32 ExtJS版本：spket-1.6.16
2. Eclipse配置
编辑eclipse.ini文件，内容修改如下：
-showsplash
org.eclipse.platform
--launcher.XXMaxPermSize
128M
-vm
C:\jre1.5.0_08\bin\javaw.exe 【这里要填写你本机的java虚拟机路径】-Xms128m
-Xmx512m
启动Eclipse。
选择或建立一个工作区。
3. ExtJS插件安装
方式一：直接拷贝
spket-1.6.16 文件夹中的features、plugins直接拷贝到Eclipse对应路径下。
然后重新启动Eclipse。
打开“Preferences”，查看发现增加“Spket”。
点击“New”，弹出以下对话框，输入自定义名字。
例如：ExtJS。
点击
点击
到此为止，你已经完成ExtJS的插件的安装了。
接下来，我们来个Hello World。
来测试一下开发环境是否运行正常。
新建一个动态网页项目，命名为：ExtJS_Test。
其他的都是用默认设置。
在WebContent下面创建extjs文件夹。
拷贝一下文件到extjs文件夹中。
在WebContent中新建一个HTML页。
