面板Ext.Panel使用

概要

1、Ext.Panel概述

2、面板的五大组成部分

3、面板的特点

4、面板中的内容

5、面板内容动态控制

6、API概述

               

1、Ext.Panel概述

面板Panel是ExtJS控件的基础，很多高级控件都是在面板的基础上扩展的，还有其它大多数控件也都直接或间接与它有关系。应用程序的界面一般情况下是由一个一个的面板通过不同组织方式来形成。

               

2、面板的五大组成部分

面板由以下几个部分组成，一个顶部工具栏(tbar)、一个底部工具栏(bbar)、面板头部(header)、面板尾部(bottom)、面板主区域(body)几个部分组成。面板类中还内置了面板展开、关闭等功能，并提供一系列可重用的工具按钮使得我们可以轻松实现自定义的行为，面板可以放入其它任何容器中，面板本身是一个容器，他里面又可以包含各种其它组件。

面板的类名为Ext.Panel，其xtype为panel，下面的代码可以显示出面板的各个组成部分：

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

显示效果如下：

    

一般情况下，顶部工具栏或底部工具栏只需要一个，而面板中一般也很少直接包含按钮，一般会把面板上的按钮直接放到工具栏上面。比如下面的代码： 

        <script type="text/javascript">
        Ext.onReady(function(){
           new Ext.Panel({
              title: "面板用法",
              width: 300,
              height: 200,
              renderTo: Ext.getBody(),
              html: "<h1>面板主区域</h1>",
              tbar: [{
                 pressed: true,
                 text: "刷新"
              }]
           });
        });
        </script>

显示效果如下：

                     

3、面板的特点

面板Panel主要有下面几个特点：

1）、面板可以理解成应用程序中的一个界面块，这个块可以大，也可以小，这一个块包含了特定的样式信息；

2）、面板Panel继承自Container类，因此，面板是一个可视化容器组件；也是其它大多数可视化控件如TabPanel、Window、TreePanel的基类；

3）、面板中即可包括其它元素组件，也可以包含特定html代码片段，可以在程序中动态更新面板中的内容；

4）、面板由固定的5个部分组成，除了body部份以外，其它部分都不是必须的。

                    

4、面板中的内容

如果要在面板中放置Ext组件或控件元素，则可以通过面板的items属性来指定，这个属性的值可以是一个数组，表示面板中有很多子元素，也可以是一个对象，表示面板中只定义一个子元素。当面板对象创建以后，可以通过面板容器的add、insert来动态往面板中增加子元素，用remove方法来在面板动态删除子元素。

                

5、面板内容动态控制

面板中的内容也可以是指定的html片段，此时可以通过配置选项中html属性来指定。比如下面的代码：

        Ext.onReady(function(){
           new Ext.Panel({
              title: "面板用法",
              width: 300,
              height: 200,
              renderTo: Ext.getBody(),
              html: "<h1><font color='red'>面板主区域</font></h1>",
           });
        });
        </script>

显示效果如下：

当然，如果面板中的html比较复杂，比如是说是一个动态页面的内容。此时可以通过在配置选项中设置autoLoad配置选项来指定自动加载指定url中的内容作为面板中显示的内容。比如下面的代码：

        <script type="text/javascript">
        Ext.onReady(function(){
           new Ext.Panel({
              title: "面板用法",
              width: 300,
              height: 200,
              autoLoad:{
                 url:"index.html"
              }
           });
        });
        </script>

也可以在对象初始化以后，动态更新面板中的html内容，可以通过调用面板的load方法实现，load方法中的参数与autoLoad配置选项中所代表的一样，代码如下：

        <script type="text/javascript">
        Ext.onReady(function(){
           var panel=new Ext.Panel({
              renderTo: Ext.getBody()
           });
           panel.load({
              url:"index.jsp",
              params:{name:"ljq",pwd:"123"},
              scope: this, 
                 discardUrl: false, 
                 nocache: false,
                 text: "正在加载，请稍候...",
                 timeout: 30,
                 scripts: true
           });
        });
        </script>

                           

这时候直接通过面板的body元素来实现面板的内容的更新。比如下面的代码：

panel.body.update("<h1><font color='blue'>这是Ext的面板</font></h1>", true, function(){});

update的第一个参数表示要更新的html字符串，第二个参数表示是否执行字符串中的脚本，第三个参数是指当内容已经更新完成后执行的回调函数。

                  

6、API概述