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

AntonSurkont · 11.04.2011, 18:34

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

Код:

<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);
			}

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

AntonSurkont · 11.04.2011, 19:29

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

Код:

<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 · 11.04.2011, 19:57

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

CyberDude · 11.04.2011, 20:25

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

Andy Tim · 12.04.2011, 09:22

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>

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

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

AntonSurkont · 12.04.2011, 11:48

Спасибо

alatar · 12.04.2011, 12:04

Размещением элементов должен заниматься 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>

AntonSurkont · 12.04.2011, 12:06

Спасибо

Добавлено через 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);
		}
	}
}

alatar · 12.04.2011, 13:30

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

Цитата:

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

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

AntonSurkont · 12.04.2011, 13:42

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