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

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/28624388/viewspace-2143516/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/28624388/viewspace-2143516/