Форум Flasher.ru - resize содержимого компонента List

Форум Flasher.ru (http://www.flasher.ru/forum/index.php)

- Flex (http://www.flasher.ru/forum/forumdisplay.php?f=84)

- - resize содержимого компонента List (http://www.flasher.ru/forum/showthread.php?t=154026)

resize содержимого компонента List

Здравствуйте уважаемые программисты.
У меня вот такой лист

Код:

<s:List width="100%" height="50%" dataProvider="{arrMonths}">

  <s:layout>

    <s:HorizontalLayout gap="0"/>

  </s:layout>

                

  <s:itemRenderer>

    <fx:Component>

      <s:ItemRenderer>  <!-- Всего будет 12 элементов -->

        <s:Panel width="100%" height="100%">

          <s:Label text="{data}" left="10" top="8" fontSize="15"/>

        </s:Panel>

      </s:ItemRenderer>

    </fx:Component>

  </s:itemRenderer>

</s:List>

Подскажите плиз можно ли сделать так, чтобы все 12 элементов располагались по ширине листа и ресайзились вместе с ним.

Я уже пробовал переопределить measure() в объекте класса ItemRenderer. Если написать

Код AS3:

override protected function measure():void

                        {

                                super.measure();

 

                                this.measuredHeight=parent.height;

                                this.measuredWidth=Math.round(parent.width/12);

                        }

то ширина панелек пересчитывается, но какого-то черта проект не запускается пока не развернешь и обратно не свернешь окно браузера. Не понимаю что происходит, помогите плиз.

Сделал так...

Код:

<s:List width="100%" height="50%" dataProvider="{arrMonths}">

                <s:layout>

                        <s:HorizontalLayout gap="0"/>

                </s:layout>

                

                <s:itemRenderer>

                        <fx:Component>

                                <s:ItemRenderer>

                                        <s:HGroup width="100%" height="100%">

                                                <s:Panel width="100%" height="100%" 

                                                                                 minHeight="30" minWidth="30">

                                                       <s:Label text="{data}" left="10" top="8" fontSize="15"/>

                                                </s:Panel>

                                        </s:HGroup>

                                </s:ItemRenderer>

                        </fx:Component>

                </s:itemRenderer>

        </s:List>

все равно по ширине ничего не ресайзицца. Panel width="100%" вместо 100 вставлял другие цифры ничего не помогает

Добавлено через 2 минуты
Правда не очень догоняю как это вообще должно было помощь.

Если сделать так...

Код:

<s:ItemRenderer width="100%" height="100%">

то ресайзицца по высоте, а по ширине никак хоть ты убейся

Вы наверное не совсем правильно поняли вопрос.
Мне нужно чтобы мой ИтемРендереры располагались в Листе по всей его ширине

Пршу прощения, был не внимателен и не понял вопрос

AntonSurkont, доброго времени суток!
Слегка поэксперементировал на твою тему... На мой взгляд, самый простой вариант сделать так:

Код AS3:

         <fx:Script>

                <![CDATA[

 

                        //...

 

                        [Bindable]

                        protected var item_width:int;

 

                        protected function application1_creationCompleteHandler(event:FlexEvent):void

                        {

                                //...

                                item_width = int(list.width/12);

                        }

 

                ]]>

        </fx:Script>

        <s:List id="list" width="100%" height="50%" dataProvider="{arrMonths}">

                <s:layout>

                        <s:HorizontalLayout columnWidth="{item_width}" gap="0" variableColumnWidth="false"/>

                </s:layout>

 

                <s:itemRenderer>

                        <fx:Component>

                                <s:ItemRenderer>

                                        <s:Panel width="100%" height="100%">

                                                <s:Label text="{data}" left="10" top="8" fontSize="15"/>

                                        </s:Panel>

                                </s:ItemRenderer>

                        </fx:Component>

                </s:itemRenderer>

        </s:List>

т.е. привязать ширину колонки из лейаута списка к переменной, высчитываемой из ширины списка. Если нужно менять в реалтайме, то можно ловить какое-нибудь событие изменения списка и соответствующим образом менять ширину.

мне кажется, этот вариант громоздкий и если еще покопаться можно найти более лаконичный способ средствами флекса, но тем не менее, работает)

Размещением элементов должен заниматься layout. Пришется layout:

Код AS3:

package alatar.layouts

{

    import mx.core.ILayoutElement;

 

    import spark.components.supportClasses.GroupBase;

    import spark.layouts.supportClasses.LayoutBase;

 

    public class SimplePagedLayout extends LayoutBase

    {

        override public function measure():void

        {

            var totalWidth:Number = 0;

            var totalHeight:Number = 0;

 

            var layoutTarget:GroupBase = target;

            var count:int = layoutTarget.numElements;

            for (var i:int = 0; i < count; i++)

            {

                var element:ILayoutElement = useVirtualLayout ? 

                    layoutTarget.getVirtualElementAt(i) :

                    layoutTarget.getElementAt(i);

 

                if (!element)

                    element = typicalLayoutElement;

 

                var elementWidth:Number = layoutTarget.width;

                var elementHeight:Number = layoutTarget.height;

 

                totalWidth += elementWidth;

                totalHeight = elementHeight;

            }

 

            layoutTarget.measuredWidth = totalWidth;

            layoutTarget.measuredHeight = totalHeight;

 

            layoutTarget.measuredMinWidth = totalWidth;

            layoutTarget.measuredMinHeight = totalHeight; 

        }

 

        override public function updateDisplayList(containerWidth:Number,

                                                   containerHeight:Number):void

        {

            var x:Number = 0;

            var y:Number = 0;

            var maxWidth:Number = 0;

            var maxHeight:Number = 0;

            var rowHeight:Number = 0;

 

            var layoutTarget:GroupBase = target;

            var count:int = layoutTarget.numElements;

            for (var i:int = 0; i < count; i++)

            {

                var element:ILayoutElement = useVirtualLayout ? 

                    layoutTarget.getVirtualElementAt(i) :

                    layoutTarget.getElementAt(i);

 

                element.setLayoutBoundsSize(layoutTarget.width, layoutTarget.height);

 

                var elementWidth:Number = layoutTarget.width;

                var elementHeight:Number = layoutTarget.height;

 

                element.setLayoutBoundsPosition(x, y);

 

                maxWidth = Math.max(maxWidth, x + elementWidth);

                maxHeight = elementHeight;

 

                x += elementWidth;

            }

 

            layoutTarget.setContentSize(maxWidth, maxHeight);

        }

    }

}

потом

Код:

<s:List width="100%" height="50%" dataProvider="{arrMonths}">

  <s:layout>

    <layouts:SimplePagedLayout/>

  </s:layout>

                

  <s:itemRenderer>

    <fx:Component>

      <s:ItemRenderer>  <!-- Всего будет 12 элементов -->

        <s:Panel width="100%" height="100%">

          <s:Label text="{data}" left="10" top="8" fontSize="15"/>

        </s:Panel>

      </s:ItemRenderer>

    </fx:Component>

  </s:itemRenderer>

</s:List>

Спасибо

Добавлено через 56 минут
alatar подскажите плиз, а как сделать чтобы 12 компонентов ровно располагались по ширине листа без горизонтальной прокрутки.

Код:

<s:Panel width="9%" height="100%"> делал

<s:ItemRenderer width="9%" height="100%"> делал ну вообщем перебрал все возможные width

в measure var elementWidth:Number = Math.round(layoutTarget.width/12); делал
если попытаться изменить layoutTarget.width=Math.round(layoutTarget.width/12); в updateDisplayList проект вешается
я трейсил layoutTarget.width он у меня 1280 почему такой большой?

Добавлено через 1 час 20 минут
Вот так получилось

Код AS3:

package longCalendar.layouts

{

        import mx.core.ILayoutElement;

 

        import spark.components.supportClasses.GroupBase;

        import spark.layouts.supportClasses.LayoutBase;

 

        public class SimplePagedLayout extends LayoutBase

        {

                public function SimplePagedLayout()

                {

                        super();

                }

 

                override public function measure():void

                {

                        var totalWidth:Number = 0;

                        var totalHeight:Number = 0;

                        var layoutTarget:GroupBase = target;

                        var count:int = layoutTarget.numElements;

 

                        for (var i:int = 0; i < count; i++)

                        {

                                var element:ILayoutElement = useVirtualLayout ? 

                                        layoutTarget.getVirtualElementAt(i) :

                                        layoutTarget.getElementAt(i);

 

                                if (!element)

                                        element = typicalLayoutElement;

 

                                var elementWidth:Number = layoutTarget.width;

                                var elementHeight:Number = layoutTarget.height;

 

                                totalWidth = elementWidth;

                                totalHeight = elementHeight;

                        }

                        layoutTarget.measuredWidth = totalWidth;

                        layoutTarget.measuredHeight = totalHeight;

 

                        layoutTarget.measuredMinWidth = totalWidth;

                        layoutTarget.measuredMinHeight = totalHeight; 

                }

 

                override public function updateDisplayList(containerWidth:Number,

                                                                                                                                                                                         containerHeight:Number):void

                {

                        var x:Number = 0;

                        var y:Number = 0;

                        var maxWidth:Number = 0;

                        var maxHeight:Number = 0;

                        var rowHeight:Number = 0;

 

                        var layoutTarget:GroupBase = target;

                        var count:int = layoutTarget.numElements;

                        for (var i:int = 0; i < count; i++)

                        {

                                var element:ILayoutElement = useVirtualLayout ? 

                                        layoutTarget.getVirtualElementAt(i) :

                                        layoutTarget.getElementAt(i);

 

                                element.setLayoutBoundsSize(Math.round(layoutTarget.width/12), layoutTarget.height);

 

                                var elementWidth:Number = Math.round(layoutTarget.width/12);

                                var elementHeight:Number = layoutTarget.height;

 

                                element.setLayoutBoundsPosition(x, y);

 

                                maxWidth = Math.max(maxWidth, x + elementWidth);

                                maxHeight = elementHeight;

 

                                x += elementWidth;

                        }

 

                        //layoutTarget.setContentSize(maxWidth, maxHeight);

                }

        }

}

Пардон, думал вам надо что бы один элемент был на всю ширину списка. :)

Цитата:

если попытаться изменить layoutTarget.width=Math.round(layoutTarget.width/12); в updateDisplayList проект вешается

Еще бы он не вешался. Вы пытаетесь изменить размеры списка, при изменении размеров списка вызывается updateDisplayList в его layout... Дальше я думаю понятно.

Еще раз спасибо