下面是我的例子,相信你看了之后就会一目了然的。。。
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="#" οnclick="category_edit()">编辑</a> <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" /> <input type="submit" class="submit" value="保存" /> <input type="button" class="button" value="取消" οnclick="no_edit()" />
</html:form>
</td>
</tr>