(七) 使用面板

(1) Panel
面板Panel 是ExtJS 控件的基础，很高级控件都是在面板的基础上扩展的，还有其它大多数控件也都直接或间接有关系。应用程序的界面一般情况下是由一个一个的面板通过不同组织方式形成。
面板由以下几个部分组成，一个顶部工具栏、一个底部工具栏、面板头部、面板尾部、面板主区域几个部分组件。面板类中还内置了面板展开、关闭等功能，并提供一系列可重用的工具按钮使得我们可以轻松实现自定义的行为，面板可以放入其它任何容器中，面板本身是一个容器，他里面又可以包含各种其它组件。
面板的类名为Ext.Panel，其xtype 为panel，下面的代码可以显示出面板的各个组成部分：

 Ext.onReady(function(){
 new Ext.Panel({
  renderTo:"mydiv",
  title:"面板头部header",
  width:300,
  height:200,
  html:'<h1>面板主区域</h1>',
  tbar:[{text:'顶部工具栏topToolbar'}],
  bbar:[{text:'底部工具栏bottomToolbar'}],
  buttons:[{text:"按钮位于footer"}]
 });
});

一般情况下，顶部工具栏或底部工具栏只需要一个，而面板中一般也很少直接包含按钮，一般会把面板上的按钮直接放到工具栏上面。比如下面的代码：
Ext.onReady(function(){
 new Ext.Panel({
  renderTo:"mydiv",
  title:"hello",
  width:300,
  height:200,
  html:'<h1>Hello,ExtJS!</h1>',
  tbar:[{pressed:true,text:'刷新'}]
 });
});

(2) 工具栏
面板中可以有工具栏，工具栏可以位于面板顶部或底部，Ext 中工具栏是由Ext.Toolbar类表示。工具栏上可以存放按钮、文本、分隔符等内容。面板对象中内置了很多实用的工具栏，可以直接通过面板的tools 配置选项往面板头部加入预定义的工具栏选项。比如下面的代码：
Ext.onReady(function(){
 new Ext.Panel({
  renderTo:"mydiv",
  title:"hello",
  width:300,
  height:200,
  html:'<h1>Hello,ExtJS Panel !</h1>',
  tools:[{
   id:"save"},
   {id:"help",
    handler:function(){Ext.Msg.alert('help','please help me!');}
   },
   {id:"close"}],
  tbar:[{pressed:true,text:'刷新'}]
 });
});

点击help按钮会执行handler中的函数，显示一个弹出对话框，而点击其它的按钮不会有任何行为产生，因为没有定义他们的heanlder。除了在面板头部加入这些已经定义好的工具栏选择按钮以外，还可以在顶部或底工具栏中加入各种工具栏选项。这些工具栏选项主要包括按钮、文本、空白、填充条、分隔符等。代码：
Ext.onReady(function(){
 new Ext.Panel({
  renderTo:"mydiv",
  title:"hello",
  width:300,
  height:200,
  html:'<h1>Hello,ExtJS Panel/Toolbar !</h1>',
  tbar:[new Ext.Toolbar.TextItem('工具栏:'),
   {xtype:"tbfill"},
   {pressed:true,text:'添加'},
   {xtype:"tbseparator"},
   {pressed:true,text:'保存'}
  ]
 });
});

(3) 选项面板的TabPanel
在前面的示例中，为了显示一个面板，我们需要在页面上添加一个，然后把Ext 控件渲染到这个div 上。VeiwPort 代表整个浏览器显示区域，该对象渲染到页面的body 区域，并会随着浏览器显示区域的大小自动改变，一个页面中只能有一个ViewPort 实例。看下面的代码：
Ext.onReady(function(){
 new Ext.Viewport({
  enableTabScroll:true,
  layout:"fit",
  items:[{title:"面板",
  html:"",
  bbar:[{text:"按钮1"},
  {text:"按钮2"}]
  }]
 });
});

Viewport 不需要再指定renderTo，而我们也看到Viewport 确实填充了整个浏览器显示区域，并会随着浏览器显示区域大小的改变而改变。
Viewport 主要用于应用程序的主界面，可以通过使用不同的布局来搭建出不同风格的应用程序主界面。在Viewport 上常用的布局有fit、border 等，当然在需要的时候其它布局也会常用。看下面的代码：
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"}]
  }]
 });
});