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                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>

①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            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++,
   		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>