AS3 ViewStack content clipping - actionscript-3

Question

I have the next code (Flash Builder 4.5)
This main appliction file, for testing me viewstack component.
TabPanelTest
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function creationCompleteHandler(event:FlexEvent):void
{
tp.AddPanel("111", new Button());
tp.AddPanel("444", new TestPanel());
tp.AddPanel("2222222", new Button());
tp.AddPanel("3333333333", new Button());
}
protected function button1_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
tp.RemoveAllPanels();
}
]]>
</fx:Script>
<ns1:TabPanel id="tp" x="25" y="27" width="321" height="199">
</ns1:TabPanel>
<s:Button x="439" y="25" label="Кнопка1" click="button1_clickHandler(event)"/>
</s:Application>
This is TabPanel, that have public methods AddPanel and RemoveAllPanels.
TabPanel
protected function creationCompleteHandler(event:FlexEvent):void
{
//buttons1.dataProvider=new ArrayCollection();
}
public function AddPanel(name:String, element:IVisualElement):void{
var panel:NavigatorContent=new NavigatorContent();
panel.label=name;
panel.addElement(element);
panels.addElement(panel);
}
public function RemoveAllPanels():void{
//panels.swapElements(swapElementsAt(0,2);
panels.removeAllElements();
/*var but:Button;
but=new Button();
but.label=name;
buttons.addElement(but); */
}
]]>
</fx:Script>
<mx:ViewStack id="panels" x="0" y="31" width="100%" height="100%" borderColor="#000000"
borderStyle="solid" borderVisible="true" clipContent="true" includeInLayout="true">
</mx:ViewStack>
<s:ButtonBar id="buttons1" x="0" y="0" width="100%" dataProvider="{panels}"
justificationStyle="pushOutOnly"/>
</s:Group>
This is testing panel, that have size more than viewstack, and it must clipping.
TestPanel
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%">
<fx:Script>
<![CDATA[
import spark.components.NavigatorContent;
protected function button1_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
NavigatorContent(this.parent.parent.parent).label="bebe";
}
]]>
</fx:Script>
<fx:Declarations>
</fx:Declarations>
<s:Button x="163" y="35" width="315" height="209" label="Кнопка"
click="button1_clickHandler(event)"/>
</s:Group>
When i click to "444" in buuton bar my content don't clipping. What's problem?

Answer 1

Problem is in this line with TestPanel custom component: -
<s:Button x="163" y="35" width="315" height="209" label="Кнопка"
click="button1_clickHandler(event)"/>
If you are adding any component to parent container: -
child component will consider x and y position with respect to parent.
If you want to fit your child component you should use x=0 and y=0
as well as width = 100% and height = 100%
Try this and see out put: -
<s:Button x="163" y="35" width="100%" height="100%" label="Кнопка"
click="button1_clickHandler(event)"/>
Again Try this and see out put: -
<s:Button x="0" y="0" width="100%" height="100%" label="Кнопка"
click="button1_clickHandler(event)"/>
You will come to know how component behavior.
Hope this may solve your problem.....