今天的一个项目中需要在Panel的标题栏中上增加按钮，所以就有这个AdvancedTitleBarPanel了。实现的原理很简单就是扩展mx.containers.Panel，然后在titleBar添加一个UIComponent，源码如下：

[java]
package com.eshangrao.containers
{
	import mx.containers.Panel;
	import mx.core.UIComponent;
	import mx.core.EdgeMetrics;
	/**
	 *  A Advanced Panel container consists of a Advanced title bar which you can
	 *  add every childer to the Panel't titlte Bar
	 *
	 *  @mxml
	 *
	 *  <p>The <code>&lt;mx:Panel&gt;</code> tag inherits all of the tag
	 *  attributes of its superclass and adds the following tag attributes:</p>
	 *
	 *  <pre>
	 *  &lt;eshangrao:AdvancedTitleBarPanel&gt
	 *   &lt;eshangrao:advancedTitleBar&gt
	 *      <i>child which wants added to titleBar tags</i>
	 * 	 &lt;/eshangrao:advancedTitleBar&gt
	 *      ...
	 *      <i>child tags</i>
	 *      ...
	 *  &lt;/eshangrao:AdvancedTilteBarPanel&gt;
	 *  </pre>
	 *
	 *  @see mx.containers.Panel
	 */
	public class AdvancedTitleBarPanel extends Panel
	{
		 /**
		 *  @public
	     *  the advancedTitleBar,insert into the <code>titleBar</code> after the title
	     *  <code>titleTextField</code>.
	     *
	     *  <pre>
	     *  &lt;eshangrao:advancedTitleBar&gt
	 	 *    <i>child which wants added to titleBar tags</i>
	 	 * 	&lt;/eshangrao:advancedTitleBar&gt
	 	 *  </pre>
	     */
		public var advancedTitleBar:UIComponent;

		override protected function createChildren():void{
			super.createChildren();

			//if(!advancedTitleBar)
			//	advancedTitleBar=new UIComponent();
			//titleBar.addChild(advancedTitleBar);
			//rawChildren.addChild(titleBar);
			if(!advancedTitleBar){
			advancedTitleBar=new UIComponent();
			}
			titleBar.addChild(advancedTitleBar);
			advancedTitleBar.owner = this;

		}
		override protected function layoutChrome(unscaledWidth:Number,unscaledHeight:Number):void{
         	super.layoutChrome(unscaledWidth, unscaledHeight);

         	var bm:EdgeMetrics = borderMetrics;
         	var minX:Number = titleTextField.x + titleTextField.textWidth + 8;
         	var rightOffset:Number = 10;
         	//如果宽度为百分比，则设置宽度为标题所有剩余空间的百分比，否则为组件自身大小
         	if(isNaN(advancedTitleBar.percentWidth)){
            	    advancedTitleBar.setActualSize(
	               advancedTitleBar.getExplicitOrMeasuredWidth(),
	                advancedTitleBar.getExplicitOrMeasuredHeight());
         	}else{
            	    advancedTitleBar.setActualSize(
	                (unscaledWidth - (bm.left + bm.right+minX+rightOffset))*advancedTitleBar.percentWidth/100,
	                advancedTitleBar.getExplicitOrMeasuredHeight());
         	}
         	var headerHeight:Number=getHeaderHeight();

         	advancedTitleBar.move(minX,
                      (headerHeight - advancedTitleBar.getExplicitOrMeasuredHeight()) / 2);
         }
         /**
	      *  @private
	      */
	     private static const HEADER_PADDING:Number = 10;
         	override protected function getHeaderHeight():Number{
         	var headerHeight:Number=super.getHeaderHeight();
         	return Math.max(headerHeight,advancedTitleBar.height+HEADER_PADDING);
         }
	}
}

用法如下：

首先从这里下载二进制SWC包，将其添加到您的Mxmlc编译组件路径中，然后加入如下命名空间声明：

[xml]
xmlns:eshangrao="http://www.eshangrao.com"

接着就可以使用AdvancedTitleBarPanel了：

[xml]
<eshangrao:AdvancedTitleBarPanel title="AdvancedTitleBar example 1" width="100%" height="100">
	<eshangrao:advancedTitleBar>
		<mx:Button label="Button at TitleBar"/>
	</eshangrao:advancedTitleBar>
</eshangrao:AdvancedTitleBarPanel>

如果要在Panel的TitleBar上添加多个组件的话，则需要用容器包括：

[xml]
<eshangrao:AdvancedTitleBarPanel title="AdvancedTitleBar example 3" width="100%" height="200">
	<eshangrao:advancedTitleBar>
		<mx:VBox>
			<mx:Button label="Button at TitleBar"/>
			<mx:Text text="this is a text in titleBar"/>
		</mx:VBox>
	</eshangrao:advancedTitleBar>
</eshangrao:AdvancedTitleBarPanel>

如果您要将所有组件靠Panle右对奇，可以如下使用：

[xml]
<eshangrao:AdvancedTitleBarPanel title="AdvancedTitleBar example 3" width="100%" height="200">
	<eshangrao:advancedTitleBar>
		<mx:VBox width="100%" horizontalAlign="right">
			<mx:Button label="Button at TitleBar"/>
			<mx:Text text="this is a text in titleBar"/>
		</mx:VBox>
	</eshangrao:advancedTitleBar>
</eshangrao:AdvancedTitleBarPanel>

注意，缺省情况下，添加到TitlePanel上的组件的大小就组件的原始大小，但是如果您将其width设置为100%的话，那么该组件将占满TilteBar所有的剩余空间。

完整的范例演示代码如下：

[xml]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:eshangrao="http://www.eshangrao.com" layout="vertical">
	<eshangrao:AdvancedTitleBarPanel title="AdvancedTitleBar example 1" width="100%" height="100">
		<eshangrao:advancedTitleBar>
			<mx:Button label="Button at TitleBar"/>
		</eshangrao:advancedTitleBar>
	</eshangrao:AdvancedTitleBarPanel>
	<eshangrao:AdvancedTitleBarPanel title="AdvancedTitleBar example 2" width="100%" height="100">
		<eshangrao:advancedTitleBar>
			<mx:HBox width="100%" horizontalAlign="right">
				<mx:Button label="Button at TitleBar"/>
				<mx:Text text="this is a text in titleBar"/>
			</mx:HBox>
		</eshangrao:advancedTitleBar>
	</eshangrao:AdvancedTitleBarPanel>
	<eshangrao:AdvancedTitleBarPanel title="AdvancedTitleBar example 3" width="100%" height="200">
		<eshangrao:advancedTitleBar>
			<mx:VBox width="100%">
				<mx:Button label="Button at TitleBar"/>
				<mx:Text text="this is a text in titleBar"/>
			</mx:VBox>
		</eshangrao:advancedTitleBar>
	</eshangrao:AdvancedTitleBarPanel>
</mx:Application>

运行示例

本组件已经包含入Plum中，点击这里下载源码及二进制SWC包。详细的组件用法请查看文档