I was laying out my Flex components using mxml and had them working correctly. But then I wanted to switch them over to Actionscript because I wanted them to extend a base component that provides default functionality.
I've go the code working except that my components that used to fill the entire space using width="100%" and height="100%" appear to display just using the default sizes. Do you know How I can get them to take up the entire space again?
Here is a test component I am playing with that exhibits the problem.
Main.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:bbq="components.*" backgroundGradientColors="[#000000, #3333dd]" minWidth="480" minHeight="320" layout="vertical" verticalAlign="top" horizontalAlign="center" paddingLeft="0" paddingRight="0" paddingTop="30" paddingBottom="0" width="100%" height="100%" >
<mx:VBox backgroundColor="0xcccc66">
<mx:ViewStack id="mainViewStack" width="100%" height="100%" color="0x323232">
<bbq:TestComp id="testComp" height="100%" width="100%" />
<bbq:ResultsBox />
</mx:ViewStack>
</mx:VBox>
TestComp.as
package components {
import mx.containers.VBox;
import mx.containers.Panel;
import flash.events.*;
public class TestComp extends VBox {
private var p:Panel;
function TestComp(){
super();
percentHeight = 100;
percentWidth = 100;
}
override protected function createChildren():void {
super.createChildren();
p = new Panel();
p.percentHeight = 100;
p.percentWidth = 100;
p.title = "Test Comp";
addChild(p);
}
}
}
Add inherited method calls; calls to super() methods;
import mx.containers.VBox;
import mx.containers.Panel;
import flash.events.*;
public class TestComp extends VBox {
private var p:Panel;
function TestComp(){
super(); // add this line
percentHeight = 100;
percentWidth = 100;
}
override protected function createChildren():void {
super.createChildren(); // add this line
p = new Panel();
p.percentHeight = 100;
p.percentWidth = 100;
p.title = "Test Comp";
addChild(p);
}
}
In you mxml:
<local:TestComp width="100%" height="100%" />
I think I might know what it is. I think I explicitly set the width and height of one of the other components in the viewstack, and I think that affected the viewstack itself so that all of the other components that were added to it also go those dimensions.
resizeToContent=true
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.