浏览 3481 次
|
锁定老帖子 主题：Ext Js 使用心得
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-03-15
最后修改：2009-07-10
Ext Js 使用心得
1.使用Ext新增一个弹出窗口（组件）时，窗口（组件）的配置对象里的id属性如果和页面上的某个元素E的id相同时，组件会被渲染到元素E上，如果元素E的样式和弹出窗口（组件）的样式不一致时，会导致窗口不能被正常显示。如:
<html>
<head><title>Ext Js</title>
<link href="ext/resources/css/ext-all.css" type="text/css" rel="stylesheet"/>
<script language="javascript" src="ext/adapter/ext/ext-base.js"></script>
<script language="javascript" src="ext/ext-all.js"></script>
<script language="javascript">
function genWindow()
{
var _window = new Ext.Window({id:'treeWindow',border:0,layout:'fit',modal:true,width:200,height:350,html:'myWindow'});
//与页面上的div treeWindow冲突,弹出窗口不能被正常显示
_window.show();
}
Ext.onReady(function(genWindow();));
</script>
<body>
<div id="treeWindow" style="height:400px; width:500px; text-align:center;">content</div>
</body>
</html>
2.Ext弹出窗口(组件)的隐藏和销毁:如果窗口(组件)的内容不是动态获取的，并且有多次调用窗口（组件）的情况或可能时，则需要使用单例模式来创建弹出窗口(组件)对象，并且窗口(组件)的属性closeAction:'hide'（如果有使用窗口的'X'关闭功能）,用hide()方法隐藏弹出窗口(组件),而不能closeAction:'hide'或者用close（）方法将窗口（组件）销毁.因为用closeAction:'hide'或者用close（）方法会将窗口(组件)销毁的同时也将页面上的静态内容一并销毁，第二次调用就会出错(不正常)或者没有内容。
function openTeachPlanList()
{
/**************************************************************************
*如果不是动态内容，并且此方法可能调用多次时，配置窗口属性closeAction:'hide'，
*不然可能会出现第二次调用此方式时，静态内容已经被删除。
*每次调用此方法先检查窗口是否已经打开（隐藏）了,是则show(),否则创建
*这种情况属于单例模式的应用,需遵守单例的规则
***************************************************************************/
if(Ext.getCmp('_tplWindow'))
{
Ext.getCmp('_tplWindow').show();
return;
}
var tplWin = new Ext.Window({
id:'_tplWindow',
contentEl:'teachPlanList',//静态内容
title:'教案列表',
border:0,
layout:'fit',
buttonAlign:'center',
closeAction:'hide',//注意这里使用了hide
modal:true,
width:500,
height:250
});
tplWin.show();
}
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
