extjs学习笔记续

VeiwPort 代表整个浏览器显示区域，该对象渲染到页面的body 区域，并会随着浏览器显示区域的大小自动改变，一个页面中只能有一个ViewPort 实例。

Ext.onReady(function(){
new Ext.Viewport({
enableTabScroll:true,
layout:"fit",
items:[{title:"面板",
html:"",
bbar:[{text:"按钮1"},
{text:"按钮2"}]
}]
});
});

 

Ext.onReady(function(){
     new Ext.Viewport({
       enableTabScroll:true,
       layout:"border",
       items:[
         {title:"面板",region:"north",height:50,html:"<h1>学生信息管理系统</h1>"},
         {title:"菜单",region:"west",width:200,collapsible:true,html:"菜单栏"},
         {xtype:"tabpanel",region:"center",
         items:[{title:"面板1"},{title:"面板2"}]
         }
       ]
     });
    });

 

第五章 窗口及对话框

8.窗口基本应用

var i = 1;
    function newWin(){
      var win = new Ext.Window({title:"口"+i++,width:300,height:200,maximizable:true,html:"这是第"+(i-1)+"个窗口"});
      win.show();
    }
    Ext.onReady(function(){
      Ext.get("bt").on("click",newWin);
  });

 

注意：var i = 1;应定义在全局变量，new一个窗口以后别忘了win.show();

 

9.窗口分组

窗口是分组进行管理的，可以对一组窗口进行操作，默认情况下的窗口都在默认的组Ext.WindowMgr 中。窗口分组由类Ext.WindowGroup 定义，该类包括bringToFront、getActive、hideAll、sendToBack 等方法用来对分组中的窗口进行操作。然后点“放到后台”（sendToBack）按钮，可以实现把最前面的窗口移动该组窗口的最后面去，点击“隐藏所有”（hideAll）按钮，可以隐藏当前打开的所有窗口。

 

var i = 1;
    function newWin(){
      var win = new Ext.Window({title:"窗口"+i++,
      width:300,
      height:200,
      maximizable:true,
      html:"这是第"+(i-1)+"个窗口",
      manager:mygroup});
      win.show();
    }
    function toBack(){
      mygroup.sendToBack(mygroup.getActive());
    }
    function hideAll(){
      mygroup.hideAll();
    }
    Ext.onReady(function(){
      mygroup = new Ext.WindowGroup();
      Ext.get("bt1").on("click",newWin);
      Ext.get("bt2").on("click",toBack);
      Ext.get("bt3").on("click",hideAll);
  });

黄色字体部分，mygroup不要进行变量的声明，写成var mygroup，是否可理解为变量名是参数的别名，好像没什么关系。。

测试bringToFront方法无效，不知道怎么用，可能有些api没有介绍。