2

セルの 1 つに画像とテキストを含むレイアウト作業が必要な AdvancedDataGrid を作成したいと考えています。ここに私が解決しようとしている問題のトップレベルのビューがあります

(私のグリッドは次のようになります-最初の列のプロパティ「名前」と2番目のプロパティ「値」)

<mx:AdvancedDataGrid showHeaders="false" defaultLeafIcon="{null}">  

    <mx:columns>
        <mx:AdvancedDataGridColumn  dataField="Property" headerText="Property" backgroundColor="#E5EFF5" width="0.4" wordWrap="true"/>
        <mx:AdvancedDataGridColumn  dataField="Value" headerText="Value" backgroundColor="white" width="0.6"/>
    </mx:columns> 


</mx:AdvancedDataGrid>

(グリッドの dataProvider は次のようになります)

var retVal:ArrayCollection = new ArrayCollection([

{Property:'AA', Value:1},
{Property:'BB',  Value: <Object that requires custom formatting when displayed in the grid>},                                                          
{Property:'CC',  Value:"Simple string"}
                                                         ]);

プロパティ BB だけでも、特定のレイアウトでの画像とテキストのレイアウトを含む、より複雑なビューがあります。他のすべてのプロパティには、特別な書式設定を必要としない単純な文字列または数値があります。

itemRenderer のようなものは、特定の列のすべての列エントリがグリッド内に表示されたときに同じようにフォーマットされているわけではないため、使用するのが難しすぎることが証明されています。

AdvancedDataGrid を使用しているのは、グリッド内で (子を使用して) ツリーのようなナビゲーションを提供するためです。これは最終的に必要になるものです。

私はフレックスが初めてなので、例が役に立ちます。

ありがとうございました。

私は例を作成しようとしましたが、それは私が望むことをしていません

// GridExample.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                   xmlns:s="library://ns.adobe.com/flex/spark" 
                   xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<fx:Script>


    <![CDATA[
        import mx.collections.ArrayCollection;



        [Bindable]
        var data:ArrayCollection = new ArrayCollection([{Property:'AA', RowIdentifier: "SimpleType", Value:3},
                                                        {Property:'BB', RowIdentifier: "ArrayType", Value:["one", "two", "three"]}, 
                                                        {Property:'CC',  RowIdentifier: "SimpleType", Value:"My string"}
                                                        ]);

    ]]>
</fx:Script>

<mx:Box height="300" width="300">

    <mx:AdvancedDataGrid  
                         variableRowHeight="true"
                         width="100%"
                         showHeaders="false" 
                         defaultLeafIcon="{null}"
                         dataProvider="{data}">  


        <mx:columns>
            <mx:AdvancedDataGridColumn  dataField="Property" headerText="Property" backgroundColor="#E5EFF5" width="0.4" wordWrap="true"/>
            <mx:AdvancedDataGridColumn  dataField="Value" headerText="Value" backgroundColor="white" width="0.6" itemRenderer="ExampleRenderer"/>
            <mx:AdvancedDataGridColumn  dataField="RowIdentifier" visible="false"/>
        </mx:columns> 


    </mx:AdvancedDataGrid>      

</mx:Box>

</s:WindowedApplication>

//ExampleRenderer.mxml 

<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" textAlign="center"    creationComplete="renderNow()" >
<mx:Script>
    <![CDATA[

        import mx.containers.HBox;
        import mx.containers.VBox;
        import mx.controls.Alert;
        import mx.controls.Image;
        import mx.controls.Label;
        import mx.resources.ResourceManager;

        private var dataObject:Object;



        private function renderNow():void {

            var rowId:String = dataObject["RowIdentifier"];
            if (rowId == "ArrayType"){
                var valueObj:Array = dataObject["Value"];
                var vBox:VBox = new VBox();
                vBox.percentHeight = 100;
                vBox.percentWidth = 100;


                for (var i:uint=0; i<valueObj.length;i++){
                    //Create the hBoxes that will wrap the host icon and the host Ip                    
                    var hBox:HBox = new HBox();

                    //Add host icon to the box
                    var imageIcon:Image = new Image();
                    imageIcon.source = "@Embed(source='adobe.png')";
                    hBox.addChild(imageIcon);


                    //Appears to the right
                    var label2:Label = new Label();
                    label2.text = valueObj[i];
                    label2.percentHeight = 100;
                    label2.percentWidth = 70;
                    hBox.addChild(label2);

                    //Add the hBox to the vBox
                    vBox.addChild(hBox);                    
                }
                this.addChild(vBox);
            }
            else{
                var iLabel:Label = new Label();
                iLabel.text = dataObject["Value"];
                iLabel.percentHeight = 100;
                iLabel.percentWidth = 100;
                this.addChild(iLabel);
            }
        }

        override public function set data(value:Object):void
        {
            dataObject = value;
        }
    ]]>
</mx:Script>

</mx:Box>

これを実行した結果、間違ったグリッド セルが表示されます (ボックスの幅と高さがパーセンテージで設定されている場合、プロパティ値が完全にオフになり、サイズを変更しようとすると、それらが走り回ります)

私がしていることのどこが悪いのかを見つけるのを手伝ってもらえますか? どんな助けでも大歓迎です。

よろしく

4

1 に答える 1