Ext project summary

<Private http://www.javaeye.com/topic/320633>
Recently, ext finally make use of a small web project. Ext used for the first time to do the project, after all, lack of experience, just write down a number of development ideas and required attention.

Ext Js 2.2 + Spring 2.5, not using struts, hibernate

1) directory structure

a) js part

Set up under the root directory of / js / ext / directory, all stored and associated js files ext. / js / ext / directory can be set up under the relevant subdirectory ext

/ js / ext / adapter / - storage adapter jquery, prototype, yui. . .

/ js / ext / experimental / - deposited ext not formally launched a number of components, can refer to ext development kit examples some examples.

/ js / ext / plugins / - deposited ext extension of components, such as patch file ext's, ext subject to expand the formation and so on.

/ js / ext / resources / - Needless to say the, ext package of resources to develop a direct copy of the directory.

/ js / - directory can put some of the most commonly used js file.

/ js / ext / - directory to place ext-all.js, ext-base.js, ext-lang-zh_CN.js, ext core document;

b) module part

Set up under the root directory / module / folder, and each module in the / module / directory under the new folder, for example:

/ module / comment / - comment module

/ module / stat / - Statistics module

Each module directory js new store the current directory quoted js modules required documents, such as / module / comment / js / comment.js

To simplify the development of non-use of struts, direct access to jsp replace struts; each module alternative under the new structs accept action.jsp

ext ajax request, action.jsp not responsible for the display page. Service layer is responsible only for method calls and requests Jump.

c) some permissions

Directly under the root directory to build a security done.

2) the basic layout and permissions

border layout, center region TabPanel formed iframe window to add a new loading system, different modules.

Iframe temporary care of the efficiency of the system as possible for each module + UI part of the independent.

Initialization TabPanel layout components to add the default page of the welcome sign to resolve the TabPanel component when a new window to add a high degree of the increase in bug.

Permissions system design reference spring security proposed database design, project late spring security with the integration.

3) user access to overtime

To resolve both cases the user access to overtime.
a) ordinary http requests overtime session.
b) asynchronous http request overtime session, the use of most of the interface after ext refresh ajax request is asynchronous.

Regardless of the type of http request can always be by a filter to capture.
Category: General http request header parameters did not x-requested-with: XMLHttpRequest header information, and have asynchronous.
In fact, for the common ajax framework, header also marked their own identity information of the header.

Http request for a general, was found directly after session timeout redirect to a timeout page, showing the visit of overtime.
For asynchronous http request, found that overtime session after the response to the request in the first overtime to write specific information, the client ajax object detection
Header information, have found signs of overtime status information after the call show the javascript timeout methods, prompts the user to visit overtime.

Server-side session after the timeout for the response filter to add a new header information, mark the request for overtime:

Js code
if (r.getHeader ( "x-requested-with")! = null
& & R.getHeader ( "x-requested-with"). EqualsIgnoreCase ( "XMLHttpRequest")) (
response.setHeader ( "sessionstatus", "timeout");
)

if (r.getHeader ( "x-requested-with")! = null
& & R.getHeader ( "x-requested-with"). EqualsIgnoreCase ( "XMLHttpRequest")) (
response.setHeader ( "sessionstatus", "timeout");
)

Ext.Ajaxt object using asynchronous request to complete interactive, Ext.Ajax are single-instance object (very important, global single instance Ext.Ajax!).
Register Ext.Ajax the requestcomplete events, each ajax request after the success of the first response to the incident. At the event callback function to determine which
Visit to whether the request is timed out. Ext.Ajax the benefits of using objects are only required to introduce a time-out contains a few lines of code deal with the js file, you can
Increase in overtime for the current application processing functions, the original code do not need to make any changes.

Ext.Ajaxt object using asynchronous request to complete interactive, if you are checkUserSessionStatus callback method invoked for each page:

Js code
Ext.Ajax.on ( 'requestcomplete', checkUserSessionStatus, this);
function checkUserSessionStatus (conn, response, options) (
/ / Ext re-package the response object
if (typeof response.getResponseHeader.sessionstatus! = 'undefined') (
/ / Found request timeout, exit code deal with ...
)
)

Ext.Ajax.on ( 'requestcomplete', checkUserSessionStatus, this);
function checkUserSessionStatus (conn, response, options) (
/ / Ext re-package the response object
if (typeof response.getResponseHeader.sessionstatus! = 'undefined') (
/ / Found request timeout, exit code deal with ...
)
)
Can make use of several features:
a) all the ajax requests with x-requested-with: XMLHttpRequest header information
b) Ext.Ajax are single-instance object (very important, global single instance Ext.Ajax!)
c) Register Ext.Ajax the requestcomplete events, each ajax request after the success of the first response to the incident (similar to the concept of the AOP interceptor spring).

For other ajax framework, to resolve user access request overtime thinking of this issue are similar.

Recommend here at a very practical method Js:

Js code
function getRootWin () (
var win = window;
while (win! = win.parent) (
win = win.parent;
)
return win;
)

function getRootWin () (
var win = window;
while (win! = win.parent) (
win = win.parent;
)
return win;
)

The adoption of the method at an arbitrary depth of the iframe in iframe to call the parent method. Here is specific to either a user's visit to iframe

Ask overtime request, to pass through the outermost layer of the method call in the iframe method exit, and as such can provide users with a unified access to the UI exit overtime

Presented.

4) System Exception Handling

The actual business code packaged as a variety of abnormal IOException, ServletException abnormal specified filter. The rest deal with the same train of thought
Users access to deal with overtime.

5) add jQuery support

JQuery easy to use and hope that the project at Ext jQuery plug-ins at the same time the use of certain time, add jQuery support.

Head directly to the page, add the following:

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

<script type="text/javascript" src="/js/ext/adapter/jquery/jquery.js"> </ script>
<script type="text/javascript" src="/js/jquery.cookie.js"> </ script>
<script type="text/javascript" src="/js/ext/adapter/jquery/ext-jquery-adapter.js"> </ script>

<script type="text/javascript" src="/js/ext/ext-base.js"> </ script>
<script type="text/javascript" src="/js/ext/ext-all.js"> </ script>
<script type="text/javascript" src="/js/ext/ext-lang-zh_CN.js"> </ script>

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

<script type="text/javascript" src="/js/ext/adapter/jquery/jquery.js"> </ script>
<script type="text/javascript" src="/js/jquery.cookie.js"> </ script>
<script type="text/javascript" src="/js/ext/adapter/jquery/ext-jquery-adapter.js"> </ script>

<script type="text/javascript" src="/js/ext/ext-base.js"> </ script>
<script type="text/javascript" src="/js/ext/ext-all.js"> </ script>
<script type="text/javascript" src="/js/ext/ext-lang-zh_CN.js"> </ script>

6) Revise the layout of

General layout common are: header, center, footer, and one in the left side of the page tree menu. In fact, the UI implementation for Ext, the

Remove the header, footer not too bad either, because Ext already done the UI look very good together with the header and footer removed after the center can be increased by not

Less visible area, a page can also display additional content.

Should be able to support these two modes of switching the layout to the user selection.
Test several times, in the border layout would like to remove the initialization after the header, footer region seems too much trouble, ext official forum also said that based

Border of the layout is intended to meet the static show.
But seems to have comrades have javaeye achieve a dynamic layout huh border. EXT2 reference for the dynamic components BorderLayout.

7) the replacement of subject

Official web ext go download all kinds of subject skin Themes for Ext 2.0

Topics copy skin file to the local / js / ext / plugins / theme / css /, / js / ext / plugins / theme / images / directory

Users select the best configuration of the subject stored in the cookie, so that each time a user can use the same login interface topic.

Ext switch subject:

Js code
if ($. cookie ( 'ext.theme')! = null & & $. cookie ( 'ext.theme')! = 'default') (
Ext.util.CSS.swapStyleSheet ( "theme", "/ js / ext / plugins / theme / css /"+$. cookie ( 'ext.theme'));
)

if ($. cookie ( 'ext.theme')! = null & & $. cookie ( 'ext.theme')! = 'default') (
Ext.util.CSS.swapStyleSheet ( "theme", "/ js / ext / plugins / theme / css /"+$. cookie ( 'ext.theme'));
)

8) Add a custom icon on the toolbar

Javaeye direct reference to the article here to share some of the icon to Ext, the authors provide a good look of the icon, is also very easy to use.

9) generated Excel document
The first reference to the information above, are extjs forum article: GridPanel directly to Excel.
Author good idea is to use javascript directly GridPanel read the store data, then generate a description of the xml document excel data, Finally
Again through a xml that contains the data "data" URL to download the excel.
The benefits of this method are relatively strong versatility to generate the excel file is not ugly, and does not require server-side are involved in the handling of a pure client-side solutions.
But the biggest drawback is that IE7 does not support the current (This needs a browser that supports data URLs. FF, Opera and IE8 will support this.).
Dojochina then found on the site a user organize and modify the generated excel document implementation methods.

Quote
The following questions I have been collated and modifications:
1, does not take into account the serial number and select the box containing the grid,
2, utf8 conversion bug.
3, the width of the bug
4, does not support ie6, ie7 and Safari

Original Address: Official Grid Export to Excel version of the amendment (the author give the code some small problem that requires a little more to adjust)

If it is IE browser, the client will be multipart / form-data to the server-side to submit the xml data.
Give the background from the original php code exportexcel.php at the time of implementation.

If the background by the java implementation, exportexcel.jsp

Java code
<% @ page import = "java.util.Date"%>
<% @ page import = "org.apache.commons.lang.time.DateFormatUtils"%>
<% @ page import = "com.oreilly.servlet.multipart .*"%>
<%
response.setContentType ( "application / vnd.ms-excel");
response.setHeader ( "Content-disposition", "attachment; filename =" +
(DateFormatUtils.format (new Date (), "yyyyMMddHHmmss "))+". xls");

MultipartParser parse = new MultipartParser (request, 1000000000);
Part part = null;
int maxcount = 0;
ParamPart param = null;

while (true) (
part = parse.readNextPart ();
if (part == null | | maxcount> 1000)
break;
if (part.isParam () & & part.getName (). equalsIgnoreCase ( "exportContent")) (
param = (ParamPart) part;
break;
)
maxcount + +;
)

if (param! = null) (
response.getWriter (). println (param.getStringValue ());
) else (
;
)
%>

<% @ page import = "java.util.Date"%>
<% @ page import = "org.apache.commons.lang.time.DateFormatUtils"%>
<% @ page import = "com.oreilly.servlet.multipart .*"%>
<%
response.setContentType ( "application / vnd.ms-excel");
response.setHeader ( "Content-disposition", "attachment; filename =" +
(DateFormatUtils.format (new Date (), "yyyyMMddHHmmss "))+". xls");

MultipartParser parse = new MultipartParser (request, 1000000000);
Part part = null;
int maxcount = 0;
ParamPart param = null;

while (true) (
part = parse.readNextPart ();
if (part == null | | maxcount> 1000)
break;
if (part.isParam () & & part.getName (). equalsIgnoreCase ( "exportContent")) (
param = (ParamPart) part;
break;
)
maxcount + +;
)

if (param! = null) (
response.getWriter (). println (param.getStringValue ());
) else (
;
)
%>

Analysis of the use of com.oreilly.servlet here multipart / form-data types of data. com.oreilly.servlet very suitable document, the form of mixed references
Cross-, multi-file upload data analysis.

10) js file management

Any javascript-based rich client solution is the one big js file too many questions. Each page not only to import Ext's css, js files,
Would also like to import each page application required some js files, so that is cumbersome to administer.
The original, at least you want to import:

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

<script type="text/javascript" src="/js/ext/adapter/jquery/jquery.js"> </ script>
<script type="text/javascript" src="/js/jquery.cookie.js"> </ script>
<script type="text/javascript" src="/js/ext/adapter/jquery/ext-jquery-adapter.js"> </ script>

<script type="text/javascript" src="/js/ext/ext-base.js"> </ script>
<script type="text/javascript" src="/js/ext/ext-all.js"> </ script>
<script type="text/javascript" src="/js/ext/ext-lang-zh_CN.js"> </ script>
<script type="text/javascript" src="/js/extajax.js"> </ script>
<script type="text/javascript" src="/js/exttheme.js"> </ script>

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

<script type="text/javascript" src="/js/ext/adapter/jquery/jquery.js"> </ script>
<script type="text/javascript" src="/js/jquery.cookie.js"> </ script>
<script type="text/javascript" src="/js/ext/adapter/jquery/ext-jquery-adapter.js"> </ script>

<script type="text/javascript" src="/js/ext/ext-base.js"> </ script>
<script type="text/javascript" src="/js/ext/ext-all.js"> </ script>
<script type="text/javascript" src="/js/ext/ext-lang-zh_CN.js"> </ script>
<script type="text/javascript" src="/js/extajax.js"> </ script>
<script type="text/javascript" src="/js/exttheme.js"> </ script>

Management JSLoader recommend the use of a large number of js, css files
1, the preparation of a js file to support the unified management of all public css, js files dynamic import

Js code
/ / Add jQuery support
JSLoader.loadJavaScript ( "/ js / ext / adapter / jquery / jquery.js");
JSLoader.loadJavaScript ( "/ js / jquery.cookie.js");
JSLoader.loadJavaScript ( "/ js / ext / adapter / jquery / ext-jquery-adapter.js");
/ / Ext Supported
JSLoader.loadStyleSheet ( "/ js / ext / resources / css / ext-all.css");
JSLoader.loadJavaScript ( "/ js / ext / ext-base.js");
JSLoader.loadJavaScript ( "/ js / ext / ext-all.js");
JSLoader.loadJavaScript ( "/ js / ext / ext-lang-zh_CN.js");
/ / Load custom toolbar icon css style
JSLoader.loadStyleSheet ( "/ js / ext / plugins / icon / css / ext-extend.css");
/ / Load the user timeout, Exception Handling
JSLoader.loadJavaScript ( "/ js / extajax.js");
/ / Subject Management
JSLoader.loadJavaScript ( "/ js / exttheme.js");
/ / Excel export support
JSLoader.loadJavaScript ( "/ js / ext.excel.js");

/ / Add jQuery support
JSLoader.loadJavaScript ( "/ js / ext / adapter / jquery / jquery.js");
JSLoader.loadJavaScript ( "/ js / jquery.cookie.js");
JSLoader.loadJavaScript ( "/ js / ext / adapter / jquery / ext-jquery-adapter.js");
/ / Ext Supported
JSLoader.loadStyleSheet ( "/ js / ext / resources / css / ext-all.css");
JSLoader.loadJavaScript ( "/ js / ext / ext-base.js");
JSLoader.loadJavaScript ( "/ js / ext / ext-all.js");
JSLoader.loadJavaScript ( "/ js / ext / ext-lang-zh_CN.js");
/ / Load custom toolbar icon css style
JSLoader.loadStyleSheet ( "/ js / ext / plugins / icon / css / ext-extend.css");
/ / Load the user timeout, Exception Handling
JSLoader.loadJavaScript ( "/ js / extajax.js");
/ / Subject Management
JSLoader.loadJavaScript ( "/ js / exttheme.js");
/ / Excel export support
JSLoader.loadJavaScript ( "/ js / ext.excel.js");
2, each page is only necessary to introduce:

Html code
<script type="text/javascript" src="/js/jsloader.js"> </ script>
<script type="text/javascript" src="/js/assets.js"> </ script>

<script type="text/javascript" src="/js/jsloader.js"> </ script>
<script type="text/javascript" src="/js/assets.js"> </ script>

分类:AJAX 时间:2009-03-08 人气:1007
分享到:
blog comments powered by Disqus

相关文章

  • 2.Maven directory structure 2010-09-10

    1.Maven unpacked directory structure is $ (Home) / bin $ (Home) / boot $ (Home) / conf $ (Home) / lib $ (Home) / LICENCE $ (Home) / NOTICE $ (Home) / README 2. Maven download file is only about 3 MB, it can achieve such a slim size is because Maven's

  • Android Development - Learn about android project directory structure 2010-12-17

    Android directory structure We must first of its profits. Android same when I design a program, but also very necessary to understand the android directory structure, directory structure by understanding that we can know what type of resources placed

  • Several common file upload in jsp and struts Methods 2010-12-10

    Upload files using FileUpload Component File upload in web applications are very common in the environment to achieve jsp file upload feature is very easy, because there are many web development with java file upload component, this paper commons-fil

  • JBoss directory structure that 2009-07-19

    jboss-as directory structure (Directory Structure) Directory Description bin Contains startup, shutdown and other system-specific scripts. Basically all the entry point JARs and start scripts included with the JBoss distribution are located in the bi

  • Tomcat directory structure 2010-04-18

    1, TOMCAT directory structure / Bin: store windows or Linux platform, Tomcat startup and shutdown script files / Conf: Tomcat server storing all the global configuration file, the most important thing is server.xml and web.xml / Doc: the document sto

  • JBoss directory structure description 2010-05-03

    Directory Description bin Contains startup, shutdown and other system-specific scripts. Basically all the entry point JARs and start scripts included with the JBoss distribution are located in the bin directory. Contains the server startup, shutdown

  • Web Development directory structure of file storage 2010-06-12

    Web applications often have file storage needs, how to build the directory structure should we do? Let us do the analysis under For the small number of users to write information, a large number of users are looking at the information site: for examp

  • (Transfer) JBoss directory structure description 2010-06-20

    jboss-as directory structure (Directory Structure) Directory Description bin Contains startup, shutdown and other system-specific scripts. Basically all the entry point JARs and start scripts included with the JBoss distribution are located in the bi

  • Teacher-Java Web development platform based on actual classic papers (JSP.Servlet.Struts.Ajax) 2010-08-26

    Teacher-Java Web development platform based on actual classic articles (JSP, Servlet, Struts, Ajax) Basic Information Of: Li Xinghua Wang Yueqing Publisher: Tsinghua University Press ISBN: 9787302231585 Added time :2010-8-25 Publication Date: Aug. 20

  • Display the directory structure using dTree 2010-12-03

    Recent projects that need to expose to the user a directory to be displayed in a user-friendly, so we chose dTree this js framework, address: http://www.destroydrop.com/javascripts/tree/dtree.zip This combination of dtree with struts2 display the dir

iOS 开发

Android 开发

Python 开发

JAVA 开发

开发语言

PHP 开发

Ruby 开发

搜索

前端开发

数据库

开发工具

开放平台

Javascript 开发

.NET 开发

云计算

服务器

Copyright (C) codeweblog.com, All Rights Reserved.

CodeWeblog.com 版权所有 黔ICP备15002463号-1

processed in 0.559 (s). 12 q(s)