Mx grid - очень странная раскладка - PullRequest
Новая
       28

Mx grid - очень странная раскладка

0 голосов
/ 22 февраля 2012

enter image description here Я работаю с flex 4.6 и пытаюсь использовать компонент mx: grid для отображения компонента в моем окне Air. Цель состоит в том, чтобы выровнять некоторые компоненты и получить хороший эффект изменения размера. Ниже приведен пример кода и скриншот 

    <?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer 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%" verticalCenter="0" borderColor="#A8CB17">
    <fx:Declarations>
        <!-- Placer ici les éléments non visuels (services et objets de valeur, par exemple). -->
    </fx:Declarations>
    <mx:Grid width="100%"
             paddingBottom="5" paddingTop="5" paddingLeft="0" paddingRight="0" >
        <mx:GridRow id="cdr1" verticalAlign="middle" width="100%" >
            <mx:GridItem colSpan="2" width="100%" verticalAlign="middle" horizontalAlign="left">
                <s:Label text="Label" fontWeight="bold" width="100%" paddingTop="5" color="#333333"/>
            </mx:GridItem>
        </mx:GridRow>
        <mx:GridRow id="cdr2" width="100%" borderVisible="true" dropShadowVisible="false"
                    verticalAlign="middle">
            <mx:GridItem width="100%" colSpan="1" horizontalAlign="right" verticalAlign="middle">
                <s:Label width="100%" horizontalCenter="0" text="Label1" textAlign="right"/>
            </mx:GridItem>
            <mx:GridItem colSpan="2" width="100%" verticalAlign="middle" horizontalAlign="left">
                <s:HGroup width="100%">
                    <s:CheckBox id="cbMolC1" label="Cb I" width="33%"/>
                    <s:CheckBox id="cbMolC2" label="cb. II" width="33%"/>
                    <s:CheckBox id="cbMolC3" label="Cb III" width="33%"/>
                </s:HGroup>
            </mx:GridItem>
            <mx:GridItem colSpan="4" width="100%" verticalAlign="middle" horizontalAlign="left">
                <s:TextInput id="tiClassMol" width="100%"/>
            </mx:GridItem>

        </mx:GridRow>

        <mx:GridRow id="cdr3" verticalAlign="middle" width="100%" >
            <mx:GridItem colSpan="1" width="100%" verticalAlign="middle" horizontalAlign="right">
                <s:Label width="100%" horizontalCenter="0" text="Label 2" textAlign="right"/>
            </mx:GridItem>
            <mx:GridItem colSpan="2" width="100%" verticalAlign="middle" horizontalAlign="right">
                <s:HGroup width="100%">
                    <s:CheckBox id="cbMolC1" label="Cb I" width="33%"/>
                    <s:CheckBox id="cbMolC2" label="Cb II" width="33%"/>
                    <s:CheckBox id="cbMolC3" label="Cb III" width="33%"/>
                </s:HGroup>
            </mx:GridItem>
            <mx:GridItem colSpan="4" width="100%" verticalAlign="middle" horizontalAlign="left">
                <s:TextInput id="tiClassMol" width="100%"/>
            </mx:GridItem>
        </mx:GridRow>
    </mx:Grid>
</s:BorderContainer>

Моя проблема в том, что даже если textinput размещен на элементе сетки, у которого colspan = 4, размер этого элемента сетки такой же, как у первого элемента сетки, у которого colspan = 1.

Итак, я думаю, это очень странно.

Не могли бы вы помочь мне.

Спасибо

1 Ответ

0 голосов
/ 23 февраля 2012

Почему вы используете mx: Grid при использовании Flex 4?!

Если вам нужна форма, я определенно рекомендую вам использовать Spark Form вместо Grid,который устарел.

...