下面是我的例子，相信你看了之后就会一目了然的。。。

1、exj脚本如下：

?/?/页面加载初始化时隐藏编辑框
???? Ext.onReady(function(){
???????? Ext.fly("editcategorys").setDisplayed(false);
???? });
???? //点击编译按钮后，显示编辑框，覆盖list框
???? function category_edit(){
???????? Ext.fly("editcategorys").setDisplayed(true);
???????? Ext.fly("categorylistone").setDisplayed(false);
???????? //addClass()与setStyle()的区别在于：前者通过样式的名称作为参数，后者直接输入css央视的属性。如下所示：
???????? //Ext.fly("editcategorys").setStyle('background-color','#ffff99');
???????? Ext.fly("editcategorys").addClass('back');
???? }
???? //点击取消按钮后复原list
???? function no_edit(){
???????? Ext.fly("editcategorys").setDisplayed(false);
???????? Ext.fly("categorylistone").setDisplayed(true);
???? }

?

2、jsp页面中相关代码如下：

?

<tr id="categorylistone">
??? <td id="categoryname"><%=category.getCategory() %></td><td><%=category.getArticlenum() %></td><td><a href="#" onclick="category_edit()">编辑</a>&nbsp;<a href="javascript:if(confirm('您确定要删除您选择的数据？')) {window.location.href = 'category.do?method=remove&id=${category.id}';}">删除</a></td>
?</tr>
?<tr id="editcategorys">
??? <td colspan="3">
????? <html:form action="/category.do?method=savecategory" method="post" >
????? <input type="text" size="30" name="editcategory" id="editcategory" />&nbsp;<input type="submit" class="submit" value="保存" />&nbsp;<input type="button" class="button" value="取消" onclick="no_edit()" />
????? </html:form>
?? </td>
?</tr>