2012/7/25Extjs学习笔记
③：为了显示一个面板，我们需要在页面上添加一个div,然后把这个Ext控件渲染到这个div上，ViewPort代表整个浏览器显示区域，该对象渲染到页面的body区域，并会随着浏览器显示区域的大小自动改变，一个页面中只能有一个ViewPort实例。看下面的代码：
1 <script> 2 Ext.onReady(function(){ 3 new Ext.Viewport( 4 { 5 enableTabScroll:true, 6 layout:'fit', 7 items:[{ 8 title:'面板', 9 html:'', 10 bbar:[ 11 { 12 text:'按钮' 13 } 14 ] 15 }] 16 } 17 ); 18 }); 19 </script>
Viewport（注意，port里的'p'是小写）不需要再指定renderTo,而我们也看到Viewport确实填充了整合浏览器显示区域，并且随着浏览器显示区域的大小的改变而改变。Viewport主要用于应用程序的主界面，可以通过使用不同的布局来搭建出不同的风格的应用程序主界面。在viewport上常用的布局有fit,border等。
看代码：
1 <script> 2 Ext.onReady(function(){ 3 new Ext.Viewport( 4 { 5 enableTabScroll:true, 6 layout:'border', 7 items:[{ 8 title:'面板', 9 region:'north', 10 height:100, 11 html:'<h1>博客园后台管理系统</h1>', 12 },{ 13 title:'菜单', 14 region:'west', 15 width:200, 16 collapsible:true, 17 html:'菜单栏' 18 }, 19 { 20 xtype:"tabpanel", 21 region:'center', 22 items:[{ 23 title:'面板1', 24 html:'面板1' 25 },{ 26 title:'面板2', 27 html:'面板2' 28 }] 29 }] 30 } 31 ); 32 }); 33 </script>
7.
①Extjs窗口时由Ext.Window类定义，该类继承自Panel,因此窗口其实是一个特殊的面板Panel.窗口包含了浮动、可拖动、可关闭、最大化、最小化、等特性。
看下面的代码：
1 <body> 2 <input type="button" value="显示窗口" id="btn" > 3 <script> 4 var i=0; 5 function Win(){ 6 var win = new Ext.Window({title:'窗口'+i++, 7 width:400, 8 height:300, 9 maximizable:true}); 10 win.show(); 11 } 12 Ext.onReady(function(){ 13 Ext.get("btn").on("click",Win); 14 15 }); 16 </script> 17 </body>
②窗口是分组进行管理的，可以对一组窗口进行操作，默认情况下的窗口都在默认的组Ext.WindowMgr中。窗口分组由类Ext.WindowGroup定义，该类包括bringToFront、getActive、hideAll、sendToBack等方法用来对分组中的窗口进行操作。
看代码：
<body>
<input id="btn" type="button" value="新窗口" />
<input id="btnToBack" type="button" value="放到后台" />
<input id="btnHide" type="button" value="隐藏所有" />
<script>
var i=0;
var mygroup;
function newWin()
{
var win = new Ext.Window({title:"窗口"+i++,
width:400,
height:300,
maximizable:true,
manager:mygroup
});
win.show();
}
function toBack()
{
mygroup.sendToBack(mygroup.getActive());
}
function hideAll()
{
mygroup.hideAll();
}
Ext.onReady(function(){
mygroup=new Ext.WindowGroup();
Ext.get("btn").on("click",newWin);
Ext.get("btnToBack").on("click",toBack);
Ext.get("btnHide").on("click",hideAll);
});
</script>
</body>
执行上面的代码，先点击几次新窗口，使之产生几个窗口，然后点击放到后台，在最前面的窗口将被放到最后面，最后点击“隐藏所有”则隐藏所有的窗口。
③：由于传统使用alert、confirm等方法产生的对话框非常古板，不好看。因此，Extjs提供了一套非常漂亮的对话框，可以使用这些对话框代替传统的alert、confirm等。实现非常华丽的应用程序界面。Ext的对话框都封装在Ext.MessageBox类，该类还有一个简写形式即Ext.Msg，可以直接通过Ext.MessageBox或Ext.Msg来直接调用相应的对话框方法来显示Ext对话框。看代码：
<body> <input id="btn" type="button" value="Hello"> <script> Ext.onReady(function(){ Ext.get("btn").on("click",function(){ Ext.Msg.alert("hello","hello Extjs!"); }); }); </script> </body>
除了基本的alert之外，Ext还包含confirm、prompt、progress、wait等对话框。另外我们可以根据需要显示自定义的对话框。普通对话框一般包括四个参数，比如confirm的方法签名为confirm(String title,String msg,[Function fn],[Object scope]),参数title表示对话框的标题，参数msg表示对话框中提示的信息。可选参数fn表示当关闭对话框后执行的回调函数，参数scope表示回调函数的执行作用域。回调函数包含两个参数，即button与text,button表示点击的按钮，text表示对话框中有活动输入选项时输入的文本内容。看代码：
1 <body> 2 <input id="btn" type="button" value="Hello"> 3 <script> 4 Ext.onReady(function(){ 5 Ext.get("btn").on("click",function(){ 6 Ext.Msg.prompt("name","please enter your name:",function(btn,text){ 7 if(btn=='ok'){ 8 Ext.Msg.alert('xiexie',text); 9 } 10 }); 11 }); 12 }); 13 </script> 14 </body>
在实际应用中，可以直接使用MessageBox的show方法来显示自定义的对话框。看代码：
<body>
<input id="btn" type="button" value="Hello">
<script>
function save(button)
{
if(button=='yes')
{
alert('u choosed yes');
}
}
Ext.onReady(function(){
Ext.get("btn").on("click",function(){
Ext.Msg.show(
{
title:'OK',
msg:'hello',
buttons:Ext.Msg.YESNOCANCEL,
fn:save,
icon:Ext.MessageBox.QUESTION
});
});
});
</script>
</body>
