摘要: 之前項目有個模塊要求用樹形解決,附帶要實現checkbox,增刪修改以及copy/cut/paste等等功能;
因為之前寫的人用了xloadTree,其他功能都實現了,但是客戶要求要有cookie功能,實現不了麻煩啊~
正巧現在在學習用Ext,發現Ext的tree本身就很強大基本的功能都可以實現。
Code highlighting produced by Actipro Cod... 閱讀全文
2009年10月28日 #
Border布局作為Ext中整個框架的布局應該說很普遍,一般North放一個應用的Logo bar,West一般會作為導航欄的放置位置;
而Center(East)往往作為整個應用的核心部分,而South位置也往往放置一些應用的版權等信息。
而導航欄一般會采用的呈現方式一般無非是Treepanel或者根據模塊放置多個Panel,而多數會采用的布局方式,往往是
Accordion的布局。比如像這樣(偷個懶直接用設計器寫的):
而IE呢,在第一次導航欄寬帶變大的時候,一切正常;而當導航欄寬度縮小的時候,原來每行的按鍵數卻并不變。想想這Ext都3.2了,不會還有這么腦殘的bug吧;
google了下,國內似乎對這個問題也沒有什么討論的;于是直接去官網的論壇問。
最初別人的提議是,更改westPanel的屬性

因為每次只有1個子欄目的寬度在變化,所以產生這個問題也不足為奇了。
最后某個網友提供了一個自己寫的補丁,問題解決了。
而Center(East)往往作為整個應用的核心部分,而South位置也往往放置一些應用的版權等信息。
而導航欄一般會采用的呈現方式一般無非是Treepanel或者根據模塊放置多個Panel,而多數會采用的布局方式,往往是
Accordion的布局。比如像這樣(偷個懶直接用設計器寫的):
MyViewportUi = Ext.extend(Ext.Viewport, {
layout: 'border',
initComponent: function() {
this.items = [
{
xtype: 'panel',
title: 'north',
region: 'north'
},
{
xtype: 'panel',
title: 'west',
region: 'west',
width: 201,
split: true,
layout: 'accordion',
activeItem: 0,
items: [
{
xtype: 'panel',
title: 'panel1',
layout: 'column',
width: 180,
items: [
{
xtype: 'button',
text: 'Button1',
scale: 'large'
},
{
xtype: 'button',
text: 'Button2',
scale: 'large'
},
{
xtype: 'button',
text: 'Button3',
scale: 'large'
},
{
xtype: 'button',
text: 'Button4',
scale: 'large'
},
{
xtype: 'button',
text: 'Button5',
scale: 'large'
},
{
xtype: 'button',
text: 'Button6',
scale: 'large'
}
]
},
{
xtype: 'panel',
title: 'panel2'
},
{
xtype: 'panel',
title: 'panel3'
}
]
},
{
xtype: 'panel',
title: 'east',
region: 'center'
},
{
xtype: 'panel',
title: 'south',
region: 'south'
}
];
MyViewportUi.superclass.initComponent.call(this);
}
});
一個基本的框架就產生了,而問題也隨之而來。最主要的問題是IE和FF顯示不一樣。應該說FF顯示很正常,按鍵根據導航欄的大小,改變每一行顯示的數量;layout: 'border',
initComponent: function() {
this.items = [
{
xtype: 'panel',
title: 'north',
region: 'north'
},
{
xtype: 'panel',
title: 'west',
region: 'west',
width: 201,
split: true,
layout: 'accordion',
activeItem: 0,
items: [
{
xtype: 'panel',
title: 'panel1',
layout: 'column',
width: 180,
items: [
{
xtype: 'button',
text: 'Button1',
scale: 'large'
},
{
xtype: 'button',
text: 'Button2',
scale: 'large'
},
{
xtype: 'button',
text: 'Button3',
scale: 'large'
},
{
xtype: 'button',
text: 'Button4',
scale: 'large'
},
{
xtype: 'button',
text: 'Button5',
scale: 'large'
},
{
xtype: 'button',
text: 'Button6',
scale: 'large'
}
]
},
{
xtype: 'panel',
title: 'panel2'
},
{
xtype: 'panel',
title: 'panel3'
}
]
},
{
xtype: 'panel',
title: 'east',
region: 'center'
},
{
xtype: 'panel',
title: 'south',
region: 'south'
}
];
MyViewportUi.superclass.initComponent.call(this);
}
});
而IE呢,在第一次導航欄寬帶變大的時候,一切正常;而當導航欄寬度縮小的時候,原來每行的按鍵數卻并不變。想想這Ext都3.2了,不會還有這么腦殘的bug吧;
google了下,國內似乎對這個問題也沒有什么討論的;于是直接去官網的論壇問。
最初別人的提議是,更改westPanel的屬性
layout: {
type: 'accordion',
autoWidth: false
}
等于禁止westPanel的子欄目自動變化寬度,試了如果westPanel的子欄目只有一個工作正常,但是如果多個的話,又悲劇了~type: 'accordion',
autoWidth: false
}
因為每次只有1個子欄目的寬度在變化,所以產生這個問題也不足為奇了。
最后某個網友提供了一個自己寫的補丁,問題解決了。
Ext.layout.AccordionPatch = Ext.extend(Ext.layout.Accordion, {
inactiveItems: [],//ADDED
// private
onLayout : function(ct, target){//ADDED
Ext.layout.AccordionPatch.superclass.onLayout.call(this, ct, target);
if(this.autoWidth === false) {
for(var i = 0; i < this.inactiveItems.length; i++) {
var item = this.inactiveItems[i];
item.setSize(target.getStyleSize());
}
}
},
// private
beforeExpand : function(p, anim){//MODFIED
var ai = this.activeItem;
if(ai){
if(this.sequence){
delete this.activeItem;
ai.collapse({callback:function(){
p.expand(anim || true);
}, scope: this});
return false;
}else{
ai.collapse(this.animate);
if(this.autoWidth === false && this.inactiveItems.indexOf(ai) == -1)//*****
this.inactiveItems.push(ai);//*****
}
}
this.activeItem = p;
if(this.activeOnTop){
p.el.dom.parentNode.insertBefore(p.el.dom, p.el.dom.parentNode.firstChild);
}
if(this.autoWidth === false && this.inactiveItems.indexOf(this.activeItem) != -1)//*****
this.inactiveItems.remove(this.activeItem);//*****
this.layout();
}
});
Ext.Container.LAYOUTS['accordionpatch'] = Ext.layout.AccordionPatch;
配合補丁,westPanel的屬性也要有相應的變化inactiveItems: [],//ADDED
// private
onLayout : function(ct, target){//ADDED
Ext.layout.AccordionPatch.superclass.onLayout.call(this, ct, target);
if(this.autoWidth === false) {
for(var i = 0; i < this.inactiveItems.length; i++) {
var item = this.inactiveItems[i];
item.setSize(target.getStyleSize());
}
}
},
// private
beforeExpand : function(p, anim){//MODFIED
var ai = this.activeItem;
if(ai){
if(this.sequence){
delete this.activeItem;
ai.collapse({callback:function(){
p.expand(anim || true);
}, scope: this});
return false;
}else{
ai.collapse(this.animate);
if(this.autoWidth === false && this.inactiveItems.indexOf(ai) == -1)//*****
this.inactiveItems.push(ai);//*****
}
}
this.activeItem = p;
if(this.activeOnTop){
p.el.dom.parentNode.insertBefore(p.el.dom, p.el.dom.parentNode.firstChild);
}
if(this.autoWidth === false && this.inactiveItems.indexOf(this.activeItem) != -1)//*****
this.inactiveItems.remove(this.activeItem);//*****
this.layout();
}
});
Ext.Container.LAYOUTS['accordionpatch'] = Ext.layout.AccordionPatch;
layout: {
type: 'accordionpatch',
autoWidth: false
}
type: 'accordionpatch',
autoWidth: false
}
摘要: 發表,瀏覽,回復之后,我們將討論的是刪除和編輯留言。
因為這個只是一個簡單的留言板,沒有用戶認證之類繁瑣的事情,所以對于編輯和刪除留言,必須輸入
正確的id號和password;如果在發表或回復留言的時候沒有輸入密碼的話,就不能對留言進行編輯或者刪除。
這里將寫的EditAction class與之前的有所不同,extends org.apache.struts.actions.Dispat... 閱讀全文
整個項目第二個重點就是回復留言,我的思路是在瀏覽留言的時候,回復鍵傳送主題的ID,一個Action Class處理這個請求,
將與這個ID相關的留言查詢出來,寫入ActionForm。
將與這個ID相關的留言查詢出來,寫入ActionForm。
- 打開display.jsp文件,找到下面這幾行,后面添加一個form,用來提交查詢請求。
1 <table>6-11行,就是新加入的對id的一個請求,這里我用了普通的html標志來提交請求,當然我們也可以用<html:hidden name="topic" property="post.id"/>,但是在處理請求的時候,相對的request.getParameter("id"),就要換成
2 <tr>
3 <td>
4 <bean:write name="topic" property="post.subject"/> 留言者:<bean:write name="topic" property="post.name" /> 留言日:<bean:write name="topic" property="post.date" format="yyyy/MM/dd(E) HH:mm" /> No.<bean:write name="topic" property="post.id" />
5 </td>
6 <td>
7 <html:form action="read">
8 <input type="hidden" name="id" value="<bean:write name='topic' property='post.id'/>"/>
9 <html:submit value="回復" />
10 </html:form>
11 </td>
12 </tr>
13 </table>
request.getParameter("post.id")了;或者我們可以在那個Topic類里,添加一個id字段,那么在瀏覽留言的時候(ListAction的execute方法,list.add(new Topic(post,replies)); 改成list.add(new Topic(post,replies,post.getId()));)<html:hidden name="topic" property="id"/>也可以這樣用了。
- 添加一個ActionForm bean ThreadForm.java,除了記錄一段留言外,還包括了行將用以回復的留言的預處理;
1 public class ThreadForm extends org.apache.struts.action.ActionForm {3-15行是負責對回復的預處理,ThreadForm()方法中主要也是處理圖標。
2
3 private int id;
4 private String name;
5 private String subject;
6 private String content;
7 private String url;
8 private String email;
9 private int iconId;
10 private String icon;
11 private String password;
12 private int replyId;
13 private String font;
14
15 private List icons;
16
17 private Topic topic;
18
19 // accessor methods..
20
21
22 public ThreadForm() {
23 super();
24 // TODO Auto-generated constructor stub
25 setUrl("http://");
26 setFont("#800000");
27 String sql = "select id,name,src from icon order by id";
28 QueryRunner qr = DbHelper.getQueryRunner();
29 List list = null;
30 try {
31 list = (List) qr.query(sql, new BeanListHandler(Icon.class));
32 // TODO Auto-generated constructor stub
33 } catch (SQLException ex) {
34 Logger.getLogger(ThreadForm.class.getName()).log(Level.SEVERE, null, ex);
35 }
36 setIcons(list);
37 }
38
39
40 }
41
- 這個回復過程其實是2部,1.預處理:包括列出與ID相關的留言,預設回復的默認標題以及對應的回復id (replyId);2.回復留言,添加記錄。
a. PreReplyAction.java
public class PreReplyAction extends org.apache.struts.action.Action {
/* forward name="success" path="" */
private static final String SUCCESS = "bbs.read";
/**
* This is the action called from the Struts framework.
* @param mapping The ActionMapping used to select this instance.
* @param form The optional ActionForm bean for this request.
* @param request The HTTP Request we are processing.
* @param response The HTTP Response we are processing.
* @throws java.lang.Exception
* @return
*/
@Override
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
{
ThreadForm f = (ThreadForm) form;
String id = (String) request.getParameter("id");
String sql;
QueryRunner qr = DbHelper.getQueryRunner();
List list = null;
sql = "select * from guestbook where id = " + id;
try {
list = (List) qr.query(sql, new BeanListHandler(Post.class));
} catch (SQLException ex) {
Logger.getLogger(PreReplyAction.class.getName()).log(Level.SEVERE, null, ex);
}
Post post = null;
post = (Post)list.get(0);
List replies = null;
sql = "select * from guestbook where replyId =" + id + " order by id";
try {
replies = (List) qr.query(sql, new BeanListHandler(Post.class));
} catch (SQLException ex) {
Logger.getLogger(PreReplyAction.class.getName()).log(Level.SEVERE, null, ex);
}
Topic topic = new Topic(post,replies);
f.setTopic(topic);
f.setSubject("Re :" + post.getSubject());
f.setReplyId(post.getId());
return mapping.findForward(SUCCESS);
}
}
b. ReplyAction.java
1 public class ReplyAction extends org.apache.struts.action.Action {這個基本和添加留言的一直,只是在insert回復記錄以后,更新主題留言的最近的回復時間,可以保證瀏覽留言的時候,該主題能在最前端。
2
3 /* forward name="success" path="" */
4 private static final String SUCCESS = "bbs.reply";
5
6 /**
7 * This is the action called from the Struts framework.
8 * @param mapping The ActionMapping used to select this instance.
9 * @param form The optional ActionForm bean for this request.
10 * @param request The HTTP Request we are processing.
11 * @param response The HTTP Response we are processing.
12 * @throws java.lang.Exception
13 * @return
14 */
15 @Override
16 public ActionForward execute(ActionMapping mapping, ActionForm form,
17 HttpServletRequest request, HttpServletResponse response)
18 throws Exception {
19 ThreadForm f = (ThreadForm)form;
20 String sql = "insert into guestbook (name,subject,email,url,content,iconId,password,font,replyId,date,lastReplyTime) " +
21 "values(?,?,?,?,?,?,?,?,?,now(),now())";
22 String content = f.getContent();
23 content = content.replaceAll(" ", " ");
24 content = content.replaceAll("\n","<br>");
25 String params[] = {f.getName(),f.getSubject(),f.getEmail(),f.getUrl(),content,new Integer(f.getIconId()).toString(),f.getPassword(),f.getFont(),new Integer(f.getReplyId()).toString()};
26
27 QueryRunner qr = DbHelper.getQueryRunner();
28 try {
29 qr.update(sql, params);
30 } catch (SQLException ex) {
31 Logger.getLogger(ReplyAction.class.getName()).log(Level.SEVERE, null, ex);
32 }
33 sql = "update guestbook set lastReplyTime= now() where id = " + f.getReplyId();
34 try {
35 qr.update(sql);
36 } catch (SQLException ex) {
37 Logger.getLogger(ReplyAction.class.getName()).log(Level.SEVERE, null, ex);
38 }
39 return mapping.findForward(SUCCESS);
40 }
41 }
- reply.jsp 基本和之前寫的jsp頁面區別不大,省略了。
- 添加相應的forwarding信息。
<global-forwards>根據forward的指向,我們可以看到在reply.jsp按下回復鍵以后,直接轉向list.do動作。
<forward name="bbs.post" path="/result.jsp"/>
<forward name="bbs.list" path="/display.jsp"/>
<forward name="bbs.read" path="/reply.jsp" />
<forward name="bbs.reply" path="/list.do" />
<forward name="welcome" path="/Welcome.do"/>
</global-forwards>
至于action-mapping 沒有什么要注意的。
- 整個回復過程就此完成。