Extjs学习 Ext.Panel

来源：互联网发布：淘宝店铺名称编辑：程序博客网时间：2024/05/29 18:36

先来说几句废话，也许你没法全看懂，但你也要留下点印象。明白自己学的东西“在哪”！

Ext.Panel组件继承自Ext.Container

Ext.Container继承自Ext.BoxComponent

Ext.BoxComponent继承自Ext.Component，倒到这里不再往上倒了。

我们从最上层反着介绍，Ext.Component继承于Ext.util.Observable，是ExtJS中所有组件的基类，不是继承自Ext.Component的其他东西，我们只能叫他类。从Ext.Component开始，他的儿孙们就能够称它为组件。

Ext.Component包装了它的儿孙们共同的特性，生命周期、创建、渲染、销毁。添加事件监听。自动支持标准的隐藏/显示以及启动/禁用。等方法。用常识想想，组件确实都应该包含这些东西，的确总结并包装儿孙们共同的特点方法，的确是这个父类应尽的义务。

下面说说他的儿子Ext.BoxComponent，这个儿子除了父类的特征和方法外，自身还添加了定位和控制自身大小的功能。

再说说Ext.Container，它是Ext.BoxComponent的儿子，是Ext.Component的孙子，又称容器，容器是什么，就是内部能包含容器或其他非容器控件的控件。就好像现实生活中盒子内部能够包含小盒子或实心物体。

在现实生活中，盒子包含什么功能呢。把东西放入盒子、把东西拿出盒子、找盒子里面的某个特征东西、控制盒子里的东西如何摆放。

这也就是Ext.Container的功能，插入容器、移出容器、寻找子项、容器布局。

最后讲讲Ext.Panel，讲到Ext.Panel，看来我不能在废话了，不自觉我们今天进入正题。上面的东西不用懂，只要有点了解就好了。以后会让你一点点懂的。

Ext.Panel

Ext.Panel是一个使用比例最大的一个控件，它是一个容器，很多更高级的控件都是在它的基础上扩展的，所以应该了解它的重要性，我倒是建议所有编写ExtJS的书，把它作为讲解的第一个控件，而不是去讲Ext.MessageBox。

Ext.Panel这个面板可以添加：1、顶部工具栏 2、底部工具栏 3、面板头部 4、主区域

extjs学习笔记---05--Ext.Panel
代码如下：

<html>
<head>
    <title>无标题页</title>
    <link href="extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="extjs/ext-all.js" type="text/javascript"></script>
</head>
<body>
    <div>
        <div id="myplace"></div>
        <script type="text/javascript">
            Ext.onReady(function(){
                new Ext.Panel({

renderTo:'myplace',

                    width:300,
                    height:300,
                    title:'这是标题',                        //面板头部
                    tbar:[{text:'按钮1'},{text:'按钮2'}],    //顶部工具栏
                    bbar:[{text:'one'},{text:'two'}],        //底部工具栏
                    html:'正文'                              //正文
                });
            })
        </script>
    </div>
</body>
</html>

不懂json的朋友正好理解一下json。

title、tbar、bbar、html四项东西，任何一项都可以去掉，根据你的需要。如果四项全部去掉，就会只留下height:300的空白。你连height都不设的话，这个控件变成一个横条(只留下两个边框的高度)。

有的教程介绍，除了这四项还有一个footer部工具栏，我试着添加了

fbar:[{text:'1'},{text:'2'}]

或者
buttons:[{text:'1'},{text:'2'}]

两个效果都是这样的

extjs学习笔记---05--Ext.Panel
和网上其它教程的效果不一样，可能是extjs版本的问题。而且新添加的这个东西感觉是很多余的。破坏了Panel的整体效果。

既然讲到Ext.Panel是个盒子，内部肯定能放东西。下面我们进行一下尝试，方法是添加一个items[]。

效果如下，刚才的Ext.Panel内部又添加了两个Ext.Panel。

extjs学习笔记---05--Ext.Panel

内部的两个容器，并没有定义xtype的值，却被自动解析为Panel。

因为

{title:'内部1',html:'内部1的正文'}是

{xtype:'panel'，title:'内部1',html:'内部1的正文'}的简写，省略了第一个参数。因为系统默认xtype的值是Panel。

相关的详细，我们在布局那章再详细讲。

到这里，我们已经学会了简单的使用Ext.Panel这个组件。下面我们来个锦上添花，添加一下其他的功能。

                new Ext.Panel({
                    renderTo:'myplace',
                    width:300,
                    height:300,
                    title:'这是标题',
                    tbar:[{text:'按钮1'},{text:'按钮2'}],
                    bbar:[{text:'one'},{text:'two'}],
                    html:'正文',
                    collapsible:true,               //页面可折叠
                    tools:[                         //title上添加按钮
                        {id:'refresh'},{id:'close'}
                    ]
                });

extjs学习笔记---05--Ext.Panel
现在Ext.Panel可以被折叠起来了，又添加了两个按钮

{id:'refresh'},{id:'close'}

这两个id是系统定义的样式。只要系统读到id值是这两个，就会显示成这两个这样，只代表他们的外表。你可以完全用实现弹出提示框功能。虽然有点脱离这个按钮功能的惯例。

现在我们做出点击时，弹出提示框功能，正好复习一下上一讲弹出框。

看下面的例子

网页打开后，当我点击

extjs学习笔记---05--Ext.Panel

仔细看看这个按钮的代码。

{
id:'close',
handler:function(event,toolEl,p)

   {
        Ext.MessageBox.alert("提示框", "这是一个提示框");
    }
}
唯一陌生的就是handler:function(event,toolEl,p)，暂时理解handler为当点击时执行函数，以后会详细介绍的。

到此我们就懂了Ext.Panel的基本用法。为了不把大家弄乱，知识就讲这些。其余的放到以后。现在学还不是时候，总不至于冒着把你说晕的风险，来臭显摆我有多懂吧。更省的写的像国产图书那样，完全像个Extjs的知识手册。