使用ExtJs3.0从零开始建立华丽客户端(6)
时间：2010-08-17 来源：展露
使用ExtJs3.0从零开始建立华丽客户端(6)
【甜蜜的蔗糖】
※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※
小瓜：老师，今天的这节课是不是要讲一些高级组件了呢？
蔗糖老师：嗯，今天我们要讲窗口和对话框
蔗糖老师：那么我们就闲话少说，直接进入正题吧。
小瓜：好。
※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※
蔗糖老师：在我们的第二讲中提到了一个hello world的小应用。在那里面我们就已经应用了Window这个组件。那么我们再来具体的看看它是如何来定义的。
蔗糖老师：
<script type="text/javascript">
Ext.onReady(
function()
{
var win= new Ext.Window(
{
title:"新Window",
width:500,
">300,
html:"Window的主区域",
maximizable:true
}
)
win.show();
}
)
</script>
蔗糖老师：由代码我们可以看到，Window存在于Ext.Window这个空间下。同时，我们不需要去添加它的renderTo 的config option，而是直接使用Window对象的show()方法来显示这个窗体。
蔗糖老师：同时我们可以看到，在它的构造函数当中，有maximizable:true这样一个config option，我们通过api可以知道，这是最大化/还原的操作属性。我们在api中还可以找到最小化/还原的操作属性minimizable。在默认情况下，Window.show()的位置为浏览器的中间部位。
蔗糖老师：这是我们单一的一个Window，那么如果有多个Window，我们又如何去操作他们做批操作呢？很简单，我们需要使用WindowGroup。
小瓜：照您的意思也就是说把这些Window放到组里，然后通过对组的操作从而实现对Window的操作吧？
蔗糖老师：是的。
蔗糖老师：我们来看这样一段代码：
<script type="text/javascript">
var i=0;
var group;
function newWin()
{
var win=new Ext.Window(
{
title:"新Window"+i++,
width:500,
">300,
html:"Window的主区域",
maximizable:true,
manager:group
}
)
win.show();
}
function toBack()
{
group.sendToBack(group.getActive());
}
function hideAll()
{
group.hideAll();
}
Ext.onReady(
function()
{
group=new Ext.WindowGroup();
Ext.get("btnNewWindow").on("click",newWin);
Ext.get("btnToBack").on("click",toBack);
Ext.get("btnHideAll").on("click",hideAll);
}
)
</script>
</head>
<body>
<input type="button" id="btnNewWindow" value="NewWindow" />
<input type="button" id="btnToBack" value="ToBack" />
<input type="button" id="btnHideAll" value="HideAll" />
</body>
蔗糖老师：我们定义变量i来为我们的Window添加序号。同时声明一个变量group，那么具体我们如何来用这个变量呢？
蔗糖老师：在Ext.onReady()中我们创建组。创建的语句是：group=new Ext.WindowGroup();因为我们要在其他的函数中也要用到group，所以我将它设成了全局变量。那么在我们的三个自定义function中就可以使用group的相关方法对我们的Window进行相关操作了。比如sendToBack()将活动窗体放到后台，hideAll()隐藏所有窗体等等。更多的方法可以参看关于WindowGroup的api说明。
※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※
小瓜：嗯，看来对于Window的操作还是蛮不少的。嗯，需要认真去看一下。
蔗糖老师：是啊。我们下一讲去讲我们的对话框，那么我们今天就先把Window讲完。
小瓜：好。
------------------------
------------------------------------------------如果您对这系列文章有什么想法请留言。比如“反对”请说明原因，我会针对不足去改正。O(∩_∩)O
相关阅读 更多 +
