导航：首页 > 开发技术 >

Ext.js4.2.1中Ext.panel.Panel怎么用

发表于：2024-10-02 作者：千家信息网编辑

千家信息网最后更新 2024年10月02日，这篇文章给大家分享的是有关Ext.js4.2.1中Ext.panel.Panel怎么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。一：描述面板Panel是ExtJS控件的

千家信息网最后更新 2024年10月02日Ext.js4.2.1中Ext.panel.Panel怎么用

这篇文章给大家分享的是有关Ext.js4.2.1中Ext.panel.Panel怎么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

一：描述

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

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

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

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

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

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

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

二：Config

1.bbar : Object/Ojbect[]

配置底部工具类的简单方法。

bbar:[{
xtype : 'button',
text : 'Button 1'
}]

===========>

dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [
{ xtype: 'button', text: 'Button 1' }
]
}]

2.buttons : Object/Object

配置panel底部button的简单方法

buttons : [
{text:'Button 1'}
]

=====>

dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [
{ xtype: 'button', text: 'Button 1' }
]
}]

4.dockedItems

一个或多个对接组件添加到panel. 可以添加到panel的上下左右的位置，主要用于工具栏和tab栏。

5.formBind

6.icon
指定一个图片路径，作为标题左侧的icon

7.iconClass