1

ドロップダウンの最大幅を設定するために、コンボ ボックス スキンでプロパティ popUpWidthMatchesAnchorWidth="false" を使用しています。このたびに、コンボボックスのユーザー タイプでデータ プロバイダーを更新するたびに、データ プロバイダーが変更されるたびに、ドロップダウンの幅が最大幅に調整されず、適切に配置されません。

Dataprovider の変更時に、ドロップダウンの幅を要素の最大幅に設定し、ドロップダウンの位置を適切に揃えたいと考えています。

    [HostComponent("spark.components.ComboBox")]
    ]]>
</fx:Metadata> 

<fx:Script fb:purpose="styling">
    <![CDATA[       
        private var paddingChanged:Boolean;
        private var cornerRadiusChanged:Boolean;
        private var cornerRadius:Number = 0;            
        static private const contentFill:Array = ["bgFill"];
        override public function get contentItems():Array { return contentFill };

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

            if (paddingChanged && textInput)
            {

                var padding:Number;

                padding = getStyle("paddingLeft");
                if (textInput.getStyle("paddingLeft") != padding)
                    textInput.setStyle("paddingLeft", padding);

                padding = getStyle("paddingTop");
                if (textInput.getStyle("paddingTop") != padding)
                    textInput.setStyle("paddingTop", padding);

                padding = getStyle("paddingRight");
                if (textInput.getStyle("paddingRight") != padding)
                    textInput.setStyle("paddingRight", padding);

                padding = getStyle("paddingBottom");
                if (textInput.getStyle("paddingBottom") != padding)
                    textInput.setStyle("paddingBottom", padding);
                paddingChanged = false;
            }

            if (cornerRadiusChanged)
            {
                cornerRadiusChanged = false;
            }
        }

        override public function styleChanged(styleProp:String):void
        {
            var allStyles:Boolean = !styleProp || styleProp == "styleName";

            super.styleChanged(styleProp);

            if (allStyles || styleProp.indexOf("padding") == 0)
            {
                paddingChanged = true;
                invalidateProperties();
            }
            if (allStyles || styleProp == "cornerRadius")
            {
                cornerRadiusChanged = true;
                invalidateProperties();
            }                
        }


        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            if (getStyle("borderVisible") == false)
            {
                if (border)
                    border.visible = false;
                if (background)
                {
                    background.left = background.top = background.right = background.bottom = 0;
                }
                if (scroller)
                    scroller.minViewportInset = 0;
            }
            else
            {
                if (border)
                    border.visible = true;
                if (background)
                {
                    background.left = background.top = background.right = background.bottom = 1;
                }
                if (scroller)
                    scroller.minViewportInset = 1;
            }

            if (dropShadow)
                dropShadow.visible = getStyle("dropShadowVisible");



            if (borderStroke)
            {
                borderStroke.color = getStyle("borderColor");
                borderStroke.alpha = getStyle("borderAlpha");
            }
            super.updateDisplayList(unscaledWidth, unscaledHeight);
        }
    ]]>
</fx:Script>

<s:states>
    <s:State name="normal" />
    <s:State name="open" />
    <s:State name="disabled" />
</s:states>


<s:PopUpAnchor id="popUp"  displayPopUp.normal="false" displayPopUp.open="true" includeIn="open"
               left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto"
               popUpPosition="below" popUpWidthMatchesAnchorWidth="false">


    <s:Group id="dropDown" maxHeight="112" minHeight="22" minWidth="{this.width}">


        <s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.45" distance="7" 
                                 angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>


        <s:Rect id="border" left="0" right="0" top="0" bottom="0">
            <s:stroke>

                <s:SolidColorStroke id="borderStroke" weight="1"/>
            </s:stroke>
        </s:Rect>


        <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
            <s:fill>

                <s:SolidColor id="bgFill" color="0xFFFFFF" />
            </s:fill>
        </s:Rect>


        <s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" hasFocusableChildren="false" minViewportInset="1">

            <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
                <s:layout>
                    <s:VerticalLayout gap="0" horizontalAlign="contentJustify" requestedMinRowCount="1" requestedMaxRowCount="6"/>
                </s:layout>
            </s:DataGroup> 
        </s:Scroller>
    </s:Group>
</s:PopUpAnchor>


<s:Button id="openButton" width="19" right="0" top="0" bottom="0" focusEnabled="false"
          skinClass="spark.skins.spark.ComboBoxButtonSkin" tabEnabled="false" />  

<s:TextInput id="textInput" enabled.disabled="false"
             left="0" right="18" top="0" bottom="0" 
             skinClass="spark.skins.spark.ComboBoxTextInputSkin"/>

4

1 に答える 1

1

コンボボックスのテキスト入力の変更でデータプロバイダーが変更されるたびに、このコードを使用して、コンボボックスのドロップダウンの位置を設定する必要があります。

LayoutManager.getInstance().validateNow();

(this.skin as ComboBoxSkin).popUp.updatePopUpTransform();

于 2013-07-09T06:41:32.373 に答える