Ext project summary

sponsored links
<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>
  • del.icio.us
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • YahooMyWeb

Related Posts of Ext project summary

  • Some interview questions java

    The first is the company give you a chance to meet, it is necessary to know to meet from time to equal the interview, and have a lot of companies to see you at the first time will give you a ready point of doing something trivial, these questions, althoug

  • hibernate using c3p0 connection pooling

    Private http://www.lifevv.com/tenyo/doc/20070605102040991.html c3p0 for open source's JDBC connection pool, with the release hibernate. This article describes how to use the hibernate configuration in c3p0. c3p0 connection pool configuration is v ...

  • Hibernate configuration parameters hibernate.hbm2ddl.auto

    Hibernate in the configuration file: <properties> <property name="hibernate.hbm2ddl.auto" value="create" /> </ properties> Parameter Description: validate load hibernate, the authentication to create a database t ...

  • Build flex + spring + blazeds + hibernate application

    Build flex + spring + blazeds + hibernate application First, set up the project blazeds 1, will blazeds.war extract to a directory, such as: myflex /; 2, set up java works were such as: MyFlex, in the orientation of selection create project from exis ...

  • What is the appfuse

    First, Appfuse brief introduction Matt Raible are Appfuse developed a guiding entry-level J2EE framework, how to integrate its popular Spring, Hibernate, ibatis, struts, Xdcolet, junit, etc. give the basic framework of the model, the latest version 1.7 is

  • Hibernate connection pool configuration

    Hibernate connection pool configuration <! - Jdbc -> <property name="connection.driver_class"> oracle.jdbc.driver.OracleDriver </ property> <property name="connection.url"> jdbc: oracle: thin: @ 10.203.14.132:15

  • hibernate generic generic DAO

    package org.lzpeng.dao; import java.io.Serializable; import java.util.List; import org.hibernate.Criteria; import org.hibernate.Query; import org.hibernate.criterion.Criterion; import org.springside.modules.orm.hibernate.Page; /** * * @version 2009-1-10 *

  • Struts2 + hibernate + spring problem user log in

    dao layer services layer action jsp <tr> <td align="center"> <b> user name: </ b> </ td> <td> <s: textfield name = "czyNumber" cssClass = "textstyle" theme = "simple" size = &q

  • Hibernate secondary cache

    Hibernate cache: 2-bit cache, also known as process-level cache or SessionFactory level cache, secondary cache can be shared by all of the session Cache configuration and the use of: Will echcache.xml (the document code in hibernate package directory ...

  • Hibernate's lazy strategy

    hibernate Lazy strategy can be used in: <class> tag, it can be true / false Tags can <PROPERTY> values true / false type of necessary tools to enhance <set> <list> can tag values true / false / extra <many-to-one> <on ...

blog comments powered by Disqus
Recent
Recent Entries
Tag Cloud
Random Entries