image в dataGrid

7 views
Skip to first unread message

Hawkins

unread,
Feb 7, 2010, 1:17:54 PM2/7/10
to ruFlex
Есть пустой DataGrid после загрузки xml динамически создаются столбцы
(с соответствующими названиями ) и распихиваются данные. Это все
работает.
Но в xml в одном из столбцов могут быть адрес картинки, нужно чтобы
вместо адреса в столбец внедрить Image и в него грузить картинку по
этому адресу.Понимаю, что как-то через itemRenderer делать надо, но
пока не получилось. подскажите плз.(лучше сразу кодом)
Заранее спасибо.

Alexander Negoda

unread,
Feb 7, 2010, 2:33:33 PM2/7/10
to ruf...@googlegroups.com
http://www.adobe.com/devnet/flex/quickstart/using_item_renderers/#component_render

Думаешь, что здесь какой-то особенный код покажут? ;)

Alexander Negoda

unread,
Feb 7, 2010, 2:34:09 PM2/7/10
to ruf...@googlegroups.com

Denis Borisenko

unread,
Feb 7, 2010, 2:34:34 PM2/7/10
to ruf...@googlegroups.com
Можно так

<mx:DataGrid dataProvider="{dataProvider}">
            <mx:columns>
                <mx:DataGridColumn>
                    <mx:itemRenderer>
                        <mx:Component>
                            <mx:Image source="{data.imageURL}" />
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>
...
</mx:DataGrid>
--
Denis Borisenko

Alexander Negoda

unread,
Feb 7, 2010, 2:59:17 PM2/7/10
to ruf...@googlegroups.com


7 февраля 2010 г. 23:34 пользователь Denis Borisenko <dbori...@gmail.com> написал:
Скорей уж тогда так:

  <mx:Image source="{data.@imageURL}" />

у него ведь xml

Denis Borisenko

unread,
Feb 7, 2010, 3:01:29 PM2/7/10
to ruf...@googlegroups.com
у него ведь xml
И что? @imageURL - это только для атрибутов. А если урл заложен как child, то к нему можно через точку обращаться. Все зависит от структуры xml

--
Denis Borisenko


Hawkins

unread,
Feb 7, 2010, 3:39:58 PM2/7/10
to ruFlex
Через mxml я допер как это делать (именно так как вы и показывали), а
вот ка динамически создавая DataGridColumn налету(в зависимости от
xml) это делать не очень понятно? Например в xml может придти
несколько изображений и тогда нужно сделать для одной ячейки несколько
объектов image. Я делаю так.
1. гружу xml
2.парсю/создаю DataGridColumn
3.делаю из него arrayCollection(формат xml кривоват но менять нельзя)
4. запихиваю в dataProvider

Alexander Negoda

unread,
Feb 7, 2010, 4:48:23 PM2/7/10
to ruf...@googlegroups.com

1. гружу xml
2.парсю/создаю DataGridColumn
3.делаю из него arrayCollection(формат xml кривоват но менять нельзя)
4. запихиваю в dataProvider


Код покажи. 

Hawkins

unread,
Feb 7, 2010, 5:04:21 PM2/7/10
to ruFlex
Вообщем пока делаю так :
<mx:DataGridColumn dataField="image">
<mx:itemRenderer>
<mx:Component>
<mx:Box >
<mx:Image id="img">
<mx:Script>
<![CDATA[
import mx.states.AddChild;
import mx.controls.Image;
override public function set data( value:Object ) : void {
super.data = value;
img.source='http://groups.google.ru/intl/ru/images/logos/
groups_logo_sm.gif';
}
]]>
</mx:Script>
</mx:Image>
</mx:Box>

</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
Создал сразу столбец в котором image сразу прописан. Видимо вместо
этого придеться писать свой наследник itemRenderer который также будет
оверрайдить set data и парсить содержимое, и если несколько картинок
динамически напихивать в себя нужное кол-во image обьектов.
пока не совсем понял как именно аттачить динамически созднные image,
пороюсь в хелпе. (но если кто сразу подскажет - спасибо)

Hawkins

unread,
Feb 7, 2010, 5:04:27 PM2/7/10
to ruFlex
Вообщем пока делаю так :
<mx:DataGridColumn dataField="image">
<mx:itemRenderer>
<mx:Component>

<mx:Box >
<mx:Image id="img">
<mx:Script>
<![CDATA[
import mx.states.AddChild;
import mx.controls.Image;
override public function set data( value:Object ) : void {
super.data = value;
img.source='http://groups.google.ru/intl/ru/images/logos/
groups_logo_sm.gif';
}
]]>
</mx:Script>
</mx:Image>
</mx:Box>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>

Alexander Negoda

unread,
Feb 7, 2010, 7:06:24 PM2/7/10
to ruf...@googlegroups.com
Как-то сложно всё.

Пишем рендерер ImageRenderer.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="init()"
>
<mx:Script>
<![CDATA[
import mx.controls.Image;
private function init():void{
for each(var url:String in data.images){
var img:Image = new Image();
img.source = url;
img.width = 25;
img.height = 25;
this.addChild(img)
}
}
]]>
</mx:Script>
</mx:HBox>


Далее создаём DataGrid:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="init()"
>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var provider:ArrayCollection = new ArrayCollection();
private function init():void{
provider.addItem({title:'Post Title1', images:['img1.png', 'img2.png', 'img3.png']})
provider.addItem({title:'Post Title2', images:['img1.png', 'img2.png', 'img3.png']})
provider.addItem({title:'Post Title3', images:['img1.png', 'img2.png', 'img3.png']})
}
]]>
</mx:Script>
<mx:DataGrid x="0" y="0" width="500" height="500" dataProvider="{provider}">
      <mx:columns>
        <mx:DataGridColumn headerText="Post Name" dataField="title"/>
        <mx:DataGridColumn headerText="Images" itemRenderer="ImageRenderer"/>
      </mx:columns>
    </mx:DataGrid>
</mx:Application>


Как из xml-я сделать ArrayCollection ты вроде (как сам сказал выше) разобрался.

Hawkins

unread,
Feb 8, 2010, 3:13:35 AM2/8/10
to ruFlex
То что нужно, спасибо большое.

Hawkins

unread,
Feb 8, 2010, 3:13:40 AM2/8/10
to ruFlex
То что нужно, спасибо большое.
Reply all
Reply to author
Forward
0 new messages