2

I need/want to add a s:TextInput to the headers of some of my datagrids to provide filtering functionality for the tables (the idea is: "type text in inputfield, hit enter, datagrid gets filtered"). For now I'm working on a HeaderRenderer using a s:TextInput, but there will also be Renderers using s:CheckBoxes and s:DropDownLists.

I'm trying to do this with a custom RendererSkin, but I'm running into several issues:

  1. You can't type in the s:TextInput (although the cursor changes to the I-Beam on mouseover and the control get the focus border).
  2. After interacting a few times with the headers, the s:TextInputs seem to "leak" some kind of white rectangle (see screenshot).
  3. verticalAlign="bottom" doesn't seem to work the way I assumed it would work.

So far my HeaderRenderer looks like this:

<?xml version="1.0" encoding="utf-8"?>
<s:DefaultGridHeaderRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"
    mouseEnabledWhereTransparent="true">
    <fx:Script>
        <![CDATA[
            import spark.components.DataGrid;
            import spark.components.GridColumnHeaderGroup;
            import spark.components.TextInput;
            import spark.components.gridClasses.GridColumn;
            import spark.components.gridClasses.IGridVisualElement;
            import spark.primitives.supportClasses.GraphicElement;

            import mx.collections.ArrayCollection;
            import mx.core.IFactory;
            import mx.core.IVisualElement;
            import mx.events.FlexEvent;

            // chrome color constants and variables
            private static const DEFAULT_COLOR_VALUE:uint = 0xCC;

            private static const DEFAULT_COLOR:uint = 0xCCCCCC;

            private static const DEFAULT_SYMBOL_COLOR:uint = 0x000000;

            private static var colorTransform:ColorTransform = new ColorTransform();

            private function dispatchChangeEvent(type:String):void {
                if (hasEventListener(type))
                    dispatchEvent(new Event(type));
            }

            // ----------------------------------
            // maxDisplayedLines
            // ----------------------------------
            private var _maxDisplayedLines:int = 1;

            [Bindable("maxDisplayedLinesChanged")]
            [Inspectable(minValue="-1")]
            override public function get maxDisplayedLines():int {
                return _maxDisplayedLines;
            }

            /**
             *  @private
             */
            override public function set maxDisplayedLines(value:int):void {
                if (value == _maxDisplayedLines)
                    return;

                _maxDisplayedLines = value;
                if (labelDisplay)
                    labelDisplay.maxDisplayedLines = value;

                invalidateSize();
                invalidateDisplayList();

                dispatchChangeEvent("maxDisplayedLinesChanged");
            }

            // ----------------------------------
            // sortIndicator
            // ----------------------------------
            private var _sortIndicator:IFactory;

            private var sortIndicatorInstance:IVisualElement;

            [Bindable("sortIndicatorChanged")]
            override public function get sortIndicator():IFactory {
                return (_sortIndicator) ? _sortIndicator : defaultSortIndicator;
            }

            override public function set sortIndicator(value:IFactory):void {
                if (_sortIndicator == value)
                    return;

                _sortIndicator = value;
                if (sortIndicatorInstance) {
                    sortIndicatorGroup.includeInLayout = false;
                    sortIndicatorGroup.removeElement(sortIndicatorInstance);
                    sortIndicatorInstance = null;
                }

                invalidateDisplayList();
                dispatchChangeEvent("sortIndicatorChanged");
            }

            override public function prepare(hasBeenRecycled:Boolean):void {
                super.prepare(hasBeenRecycled);

                if (labelDisplay && labelDisplayGroup && (labelDisplay.parent != labelDisplayGroup)) {
                    labelDisplayGroup.removeAllElements();
                    labelDisplayGroup.addElement(labelDisplay);
                }

                if (labelDisplayGroup.numChildren < 2) {
                    var filter:TextInput = new TextInput();
                    filter.percentWidth = 100;
                    filter.addEventListener(FlexEvent.ENTER, filter_handleEnter);
                    filterDisplayGroup.addElement(filter);
                }

                const column:GridColumn = this.column;
                if (sortIndicator && column && column.grid && column.grid.dataGrid && column.grid.dataGrid.columnHeaderGroup) {
                    const dataGrid:DataGrid = column.grid.dataGrid;
                    const columnHeaderGroup:GridColumnHeaderGroup = dataGrid.columnHeaderGroup;

                    if (columnHeaderGroup.isSortIndicatorVisible(column.columnIndex)) {
                        if (!sortIndicatorInstance) {
                            sortIndicatorInstance = sortIndicator.newInstance();
                            sortIndicatorGroup.addElement(sortIndicatorInstance);
                            chromeColorChanged = true;
                            invalidateDisplayList();
                        }

                        // Initialize sortIndicator
                        sortIndicatorInstance.visible = true;
                        const gridVisualElement:IGridVisualElement = sortIndicatorInstance as IGridVisualElement;
                        if (gridVisualElement)
                            gridVisualElement.prepareGridVisualElement(column.grid, -1, column.columnIndex);

                        sortIndicatorGroup.includeInLayout = true;
                        sortIndicatorGroup.scaleY = (column.sortDescending) ? 1 : -1;
                    } else {
                        if (sortIndicatorInstance) {
                            sortIndicatorGroup.removeElement(sortIndicatorInstance);
                            sortIndicatorGroup.includeInLayout = false;
                            sortIndicatorInstance = null;
                        }
                    }
                }
            }

            private var chromeColorChanged:Boolean = false;

            private var colorized:Boolean = false;

            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                // Apply chrome color
                if (chromeColorChanged) {
                    var chromeColor:uint = getStyle("chromeColor");

                    if (chromeColor != DEFAULT_COLOR || colorized) {
                        colorTransform.redOffset = ((chromeColor & (0xFF << 16)) >> 16) - DEFAULT_COLOR_VALUE;
                        colorTransform.greenOffset = ((chromeColor & (0xFF << 8)) >> 8) - DEFAULT_COLOR_VALUE;
                        colorTransform.blueOffset = (chromeColor & 0xFF) - DEFAULT_COLOR_VALUE;
                        colorTransform.alphaMultiplier = alpha;

                        transform.colorTransform = colorTransform;

                        var exclusions:Array = [labelDisplay, sortIndicatorInstance];

                        // Apply inverse colorizing to exclusions
                        if (exclusions && exclusions.length > 0) {
                            colorTransform.redOffset = -colorTransform.redOffset;
                            colorTransform.greenOffset = -colorTransform.greenOffset;
                            colorTransform.blueOffset = -colorTransform.blueOffset;

                            for (var i:int = 0; i < exclusions.length; i++) {
                                var exclusionObject:Object = exclusions[i];

                                if (exclusionObject && (exclusionObject is DisplayObject || exclusionObject is GraphicElement)) {
                                    colorTransform.alphaMultiplier = exclusionObject.alpha;
                                    exclusionObject.transform.colorTransform = colorTransform;
                                }
                            }
                        }

                        colorized = true;
                    }

                    chromeColorChanged = false;
                }

                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }

            override public function styleChanged(styleProp:String):void {
                var allStyles:Boolean = !styleProp || styleProp == "styleName";

                super.styleChanged(styleProp);

                if (allStyles || styleProp == "chromeColor") {
                    chromeColorChanged = true;
                    invalidateDisplayList();
                }
            }

            private function filter_handleEnter(event:FlexEvent):void {
                if (this.grid.dataProvider is ArrayCollection) {
                    (this.grid.dataProvider as ArrayCollection).refresh();
                }
            }
        ]]>
    </fx:Script>

    <fx:Declarations>
        <fx:Component id="defaultSortIndicator">
            <s:Path data="M 3.5 7.0 L 0.0 0.0 L 7.0 0.0 L 3.5 7.0" implements="spark.components.gridClasses.IGridVisualElement">
                <fx:Script>
                    <![CDATA[
                        import spark.components.DataGrid;
                        import spark.components.Grid;

                        public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void {
                            const dataGrid:DataGrid = grid.dataGrid;
                            if (!dataGrid)
                                return;

                            const color:uint = dataGrid.getStyle("symbolColor");
                            arrowFill1.color = color;
                            arrowFill2.color = color;
                        }
                    ]]>
                </fx:Script>

                <s:fill>
                    <s:RadialGradient rotation="90" focalPointRatio="1">
                        <s:GradientEntry id="arrowFill1" color="0" alpha="0.6"/>

                        <s:GradientEntry id="arrowFill2" color="0" alpha="0.8"/>
                    </s:RadialGradient>
                </s:fill>
            </s:Path>
        </fx:Component>

        <s:Label id="labelDisplay" verticalCenter="1" left="0" right="0" top="0" bottom="0" textAlign="start"
            fontWeight="bold" verticalAlign="bottom" maxDisplayedLines="1" showTruncationTip="true"/>
    </fx:Declarations>

    <s:states>
        <s:State name="normal"/>
        <s:State name="hovered"/>
        <s:State name="down"/>
    </s:states>

    <!-- layer 1: shadow -->

    <s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x000000" color.down="0xFFFFFF" alpha="0.01" alpha.down="0"/>

                <s:GradientEntry color="0x000000" color.down="0xFFFFFF" alpha="0.07" alpha.down="0.5"/>
            </s:LinearGradient>
        </s:fill>
    </s:Rect>

    <!-- layer 2: fill -->

    <s:Rect id="fill" left="0" right="0" top="0" bottom="0">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF" color.hovered="0xBBBDBD" color.down="0xAAAAAA" alpha="0.85"/>

                <s:GradientEntry color="0xD8D8D8" color.hovered="0x9FA0A1" color.down="0x929496" alpha="0.85"/>
            </s:LinearGradient>
        </s:fill>
    </s:Rect>

    <!-- layer 3: fill lowlight -->

    <s:Rect id="lowlight" left="0" right="0" top="0" bottom="0">
        <s:fill>
            <s:LinearGradient rotation="270">
                <s:GradientEntry color="0x000000" ratio="0.0" alpha="0.0627"/>

                <s:GradientEntry color="0x000000" ratio="0.48" alpha="0.0099"/>

                <s:GradientEntry color="0x000000" ratio="0.48001" alpha="0"/>
            </s:LinearGradient>
        </s:fill>
    </s:Rect>

    <!-- layer 4: fill highlight -->

    <s:Rect id="highlight" left="0" right="0" top="0" bottom="0">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF" ratio="0.0" alpha="0.33" alpha.hovered="0.22" alpha.down="0.12"/>

                <s:GradientEntry color="0xFFFFFF" ratio="0.48" alpha="0.33" alpha.hovered="0.22" alpha.down="0.12"/>

                <s:GradientEntry color="0xFFFFFF" ratio="0.48001" alpha="0"/>
            </s:LinearGradient>
        </s:fill>
    </s:Rect>

    <!-- layer 5: highlight stroke (all states except down) -->

    <s:Rect id="highlightStroke" left="0" right="0" top="0" bottom="0" excludeFrom="down">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0xFFFFFF" alpha.hovered="0.22"/>

                <s:GradientEntry color="0xD8D8D8" alpha.hovered="0.22"/>
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>

    <!-- layer 6: highlight stroke (down state only) -->

    <s:Rect id="hldownstroke1" left="0" right="0" top="0" bottom="0" includeIn="down">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.0"/>

                <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.001"/>

                <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.0011"/>

                <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.965"/>

                <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.9651"/>
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>

    <s:Rect id="hldownstroke2" left="1" right="1" top="1" bottom="1" includeIn="down">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0x000000" alpha="0.09" ratio="0.0"/>

                <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.0001"/>
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>

    <s:VGroup bottom="5" left="7" right="7" top="5" gap="2" verticalAlign="bottom">
        <s:Group id="filterDisplayGroup" width="100%"/>

        <s:HGroup bottom="5" left="7" right="7" top="5" gap="2" verticalAlign="bottom">
            <s:Group id="labelDisplayGroup" width="100%" left="8" right="8"/>

            <s:Group id="sortIndicatorGroup" includeInLayout="false"/>
        </s:HGroup>
    </s:VGroup>
</s:DefaultGridHeaderRenderer>

So basically, what I want is this (basically a much simpler form of this $800 datagrid component):

enter image description here

What I currently have is this (with the above mentioned problems):

enter image description here enter image description here

  • The "Longname" column shows the white "leak" on mouse over
  • The s:TextInput in the "Shortname" column seems to have focus but you can't type in it
  • The label of the "Id" column is still vertically centered, although it should be on the bottom

Can anyone give me a hint what's going wrong with my Renderer (primarily why the freck I can't type in the inputfield and where this white thing does come from)?

zero323
  • 322,348
  • 103
  • 959
  • 935
  • 1
    Why are you adding it dynamically? Why not write it in mxml at the place where your `filterDisplayGroup` is now. Anyway, I see that `labelDisplayGroup` is cleared before `labelDisplay` is added. Not so with `filterDisplayGroup`. If the `prepare` method is called multiple times, you'll end up with a bunch of TextInputs on top of each other. – RIAstar May 07 '12 at 22:46
  • Hmmm good point about putting it in statically and not at runtime. I'm going to try that later when I get back to work. Also, I do check the number of children on the `filterDisplayGroup` before adding the `TextInput` so it will be only added once to each Renderer. I did run into your scenario, getting dozens of inputfields stacked in the header, which is why I put it in the `if (labelDisplayGroup.numChildren < 2) {...}` check. –  May 08 '12 at 04:47
  • As far as I can tell that `labelDisplayGroup.numChildren < 2` condition will always be `true`. You clear `labelDisplayGroup` and add one element just before that evaluation, so `labelDisplayGroup.numChildren` will always be `1` (or `0` if that first condition isn't met. You do realise that's `labelDisplayGroup` you're checking and not `filterDisplayGroup`, don't you? Also note that `numChildren` does not necessarily have the same value as `numElements` (though in this case it probably will). – RIAstar May 08 '12 at 08:59
  • I just noticed you extend `DefaultGridHeaderRenderer` and copied all its functions and graphics, which means they will be in there twice. That would definitely qualify as a potential source for trouble. Try extending `GridItemRenderer` instead. – RIAstar May 08 '12 at 09:06
  • @RIAstar: I copied all the graphics because otherwise any column to which I assigned the custom renderer would get a flat white background instead of the normal gradient+highlights. And yeah, the `if()` check is a mess, good that I don't need it any longer. ;) Adding the `TextInput` directly in MXML apparently solved most of my problems (no white leaks any more and I can click and type in the inputfield). –  May 08 '12 at 11:52

3 Answers3

1

Datagrid:

<mx:DataGrid id="myGrid" dataProvider="{initDG}" variableRowHeight="true"> 
    <mx:columns>
        <mx:DataGridColumn headerText="col1"/>
        <mx:DataGridColumn headerText="col2"/>
        <mx:DataGridColumn headerText="col3"/>
        <mx:DataGridColumn headerRenderer="col4DGheaderRenderer"/>
    </mx:columns>       
</mx:DataGrid>

Then the full code for col4DGheaderRenderer:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:s="library://ns.adobe.com/flex/spark">
    <s:TextInput/>
    <mx:Label text="label text"/>
</mx:VBox>
Dom
  • 2,569
  • 1
  • 18
  • 28
  • 1
    Yup, and that's a mx DataGrid in my answer. Want it to work now? Use my example. – Dom May 07 '12 at 23:03
  • Haven't thought about using a very basic and simple HeaderRenderer as you suggest. I'm going to give it a try with a much more simplified version later. –  May 08 '12 at 04:48
  • Looked all over for this answer. I knew it had to be more simple than what I've been finding. This is the most elegant way of solving this. Question: How do I pass data like values for a dropDownList, or default text into the header renderer? Can you update your answer, or should I make a new question? – Wes Dec 15 '16 at 20:14
0

As we've discussed in the comments, there are quite a few things in your code that could be possible sources for misbehaviour. I happened to have a header renderer lying around with very similar functionality that works perfectly. So I'll just dump the code here and you can start working off of that.

Some notes:

  • this renderer has simplified graphics: you can paste the graphics of the default Spark renderer back in and replace my fill component)
  • it extends GridItemRenderer instead of DefaultGridHeaderRenderer (as discussed in comments)
  • it has the TextInput added through mxml, not dynamically through ActionScript, which reduces complexity

.

<s:GridItemRenderer minWidth="21" minHeight="21"
                xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:vmm="library://ns.vmm.be/flex/components">

<fx:Declarations>
    <fx:Component id="defaultSortIndicator">
        <s:Path data="M 3.5 7.0 L 0.0 0.0 L 7.0 0.0 L 3.5 7.0" implements="spark.components.gridClasses.IGridVisualElement">

            <s:fill>
                <s:RadialGradient rotation="90" focalPointRatio="1">    
                    <s:GradientEntry id="arrowFill1" color="0" alpha="0.6" />
                    <s:GradientEntry id="arrowFill2" color="0" alpha="0.8" />
                </s:RadialGradient>
            </s:fill>
        </s:Path>
    </fx:Component>

    <s:Label id="labelDisplay" verticalCenter="1" left="0" right="0" top="0" bottom="0"
             textAlign="start" verticalAlign="middle" maxDisplayedLines="1" showTruncationTip="true"
             color.normal="0x555555" color="0x90a938" fontWeight="bold" />
</fx:Declarations>

<fx:Script>
    <![CDATA[
        import spark.components.gridClasses.IGridVisualElement;
        import mx.core.IVisualElement;

        import spark.components.DataGrid;
        import spark.components.GridColumnHeaderGroup;
        import spark.components.gridClasses.GridColumn;
        import spark.primitives.supportClasses.GraphicElement;


        private function dispatchChangeEvent(type:String):void {
            if (hasEventListener(type)) dispatchEvent(new Event(type));
        }            

        //----------------------------------
        //  maxDisplayedLines
        //----------------------------------

        private var _maxDisplayedLines:int = 1;

        [Bindable("maxDisplayedLinesChanged")]
        [Inspectable(minValue="-1")]
        public function get maxDisplayedLines():int {
            return _maxDisplayedLines;
        }

        public function set maxDisplayedLines(value:int):void {
            if (value == _maxDisplayedLines) return;

            _maxDisplayedLines = value;
            if (labelDisplay) labelDisplay.maxDisplayedLines = value;

            invalidateSize();
            invalidateDisplayList();

            dispatchChangeEvent("maxDisplayedLinesChanged");
        }

        //----------------------------------
        //  sortIndicator
        //----------------------------------

        private var _sortIndicator:IFactory;
        private var sortIndicatorInstance:IVisualElement;

        [Bindable("sortIndicatorChanged")]
        public function get sortIndicator():IFactory {
            return (_sortIndicator) ? _sortIndicator : defaultSortIndicator;
        }

        public function set sortIndicator(value:IFactory):void {
            if (_sortIndicator == value) return;

            _sortIndicator = value;
            if (sortIndicatorInstance) {
                sortIndicatorGroup.includeInLayout = false;
                sortIndicatorGroup.removeElement(sortIndicatorInstance);
                sortIndicatorInstance = null;
            }

            invalidateDisplayList();
            dispatchChangeEvent("sortIndicatorChanged");
        }

        override public function prepare(hasBeenRecycled:Boolean):void {
            super.prepare(hasBeenRecycled);

            if (labelDisplay && labelDisplayGroup && (labelDisplay.parent != labelDisplayGroup)) {
                labelDisplayGroup.removeAllElements();
                labelDisplayGroup.addElement(labelDisplay);
            }

            const column:GridColumn = this.column;
            if (sortIndicator && column && column.grid && column.grid.dataGrid && column.grid.dataGrid.columnHeaderGroup) {
                const dataGrid:DataGrid = column.grid.dataGrid;
                const columnHeaderGroup:GridColumnHeaderGroup = dataGrid.columnHeaderGroup;

                if (columnHeaderGroup.isSortIndicatorVisible(column.columnIndex)) {
                    if (!sortIndicatorInstance) {
                        sortIndicatorInstance = sortIndicator.newInstance();
                        sortIndicatorGroup.addElement(sortIndicatorInstance);
                        invalidateDisplayList();
                    }

                    // Initialize sortIndicator
                    sortIndicatorInstance.visible = true;
                    const gridVisualElement:IGridVisualElement = sortIndicatorInstance as IGridVisualElement;
                    if (gridVisualElement)
                        gridVisualElement.prepareGridVisualElement(column.grid, -1, column.columnIndex);

                    sortIndicatorGroup.includeInLayout = true;
                    sortIndicatorGroup.scaleY = (column.sortDescending) ? 1 : -1;
                }
                else if (sortIndicatorInstance) {
                    sortIndicatorGroup.removeElement(sortIndicatorInstance);
                    sortIndicatorGroup.includeInLayout = false;
                    sortIndicatorInstance = null;
                }
            }
        }

        override public function styleChanged(styleProp:String):void {
            var allStyles:Boolean = !styleProp || styleProp == "styleName";
            super.styleChanged(styleProp);
            if (allStyles) invalidateDisplayList();
        }
    ]]>
</fx:Script>

<s:states>
    <s:State name="normal" />
    <s:State name="hovered" />
    <s:State name="down" />
</s:states>      

<s:Rect id="fill" left="0" right="0" top="0" bottom="0">
    <s:fill>
        <s:LinearGradient rotation="90">
            <s:GradientEntry color.normal="0xf9f9f9" color.hovered="0xfcfdfa" 
                             color.down="0xdceac2" alpha="0.85" />
            <s:GradientEntry color.normal="0xeaeaea" color.hovered="0xdceac2"
                             color.down="0xd2e1b5" alpha="0.85" />
        </s:LinearGradient>
    </s:fill>
</s:Rect>

<s:VGroup left="7" right="7" top="5" bottom="5" gap="6" verticalAlign="middle">
    <s:TextInput width="100%" />
    <s:HGroup width="100%">
        <s:Group id="labelDisplayGroup" width="100%" />
        <s:Group id="sortIndicatorGroup" includeInLayout="false" />
    </s:HGroup>
</s:VGroup>

</s:GridItemRenderer>
RIAstar
  • 11,912
  • 20
  • 37
0

The below code shows you how to put Input box inside Header using Header Renderer .I hope this will solve the problem.

<fx:Script>
    <![CDATA[
        import mx.controls.Alert;
        protected function button1_clickHandler(event:MouseEvent):void
        {
            Alert.show(s.headerText);

        }
    ]]>
</fx:Script>

<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<mx:DataGrid id="myGrid" x="-4" y="0" width="528" horizontalScrollPolicy="off"
             variableRowHeight="true" verticalScrollPolicy="off"> 
    <mx:columns>
        <mx:DataGridColumn headerText="col1"/>
        <mx:DataGridColumn headerText="col2"/>
        <mx:DataGridColumn headerText="col3"/>
        <mx:DataGridColumn  id="s">
        <mx:headerRenderer>
            <fx:Component>
                    <mx:VBox >
                        <s:TextInput width="{outerDocument.s.width}" id="p" change="{outerDocument.s.headerText=p.text}"/>
                        <s:Label text="col4"/>
                    </mx:VBox>  
            </fx:Component>
        </mx:headerRenderer>
        </mx:DataGridColumn>
    </mx:columns>       
</mx:DataGrid>
<s:Button x="10" y="150" label="click" click="button1_clickHandler(event)"/>
shukla
  • 57
  • 6