面板Panel:1.认识Ext.Panel(转)

使用过Delphi、Visual Basic或Java Swing等开发语言的读者对面板（Panel）一定非常熟悉，我们可以在面板随意地排版布局，它就像是一副骨架撑起了整个用户界面，在ExtJS中面板同样起着页面骨架的作用，所以学习面板是学习ExtJS页面布局的基础和起点。 ExtJS面板从使用方式上来说更接近于Java Swing中的面板，通过为其指定不同的布局方式或者进行面板嵌套达到复杂布局的目的，因此布局方式是否丰富，能否进行嵌套，是衡量ExtJS布局灵活性的重要指标。ExtJS面板共支持10种不同风格的布局样式，并且允许无限制的进行嵌套，这就给我们创造了一个尽情发挥的强大舞台。

1.1  认识Ext.Panel

    Ext.Panel扩展自Ext.Container，是各种组件的容器也是基础类，可以扩展出功能更加强大的面板。作为标准的面板组件主要包括如下5部分：底部工具栏（bottom toolbars）、顶部工具栏（top toolbars）、面板头部（header）、面板底部（footer）和面板体（body），下面是一个标准面板的示例，可以帮助读者更清晰的认识面板组件。 
    代码5-1：Ext.Panel示例
    <script type="text/javascript">
Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL ='http://www.cnblogs.com/extjs2.0/resources/images/default/s.gif';
  new Ext.Panel({
   title:'面板头部（header）',
   tbar : ['顶端工具栏(top toolbars)'],
   bbar : ['底端工具栏(bottom toolbars)'],
   height:200,
   300,
   frame:true,
   applyTo :'panel',
   bodyStyle:'background-color:#FFFFFF',
   html:'<div>面板体（body）</div>',
   tools : [//设置面板头部功能区
    {id:'toggle'},
    {id:'close'},
    {id:'maximize'}
   ],
   buttons:[
    new Ext.Button({
     text:'面板底部（footer）'
    })
   ]
  })
 });
  </script>
    代码5-1演示了标准面板的创建方式，从图5-1中可以看到一个标准面板所具有的全部组成部分，这5部分不但位置不同功能也不尽相同，它们分别有自己存在的价值，读者可以根据业务需要选择使用其中合适的部分构成自己需要的页面。效果如图5-1所示。

图5-1  标准面板