DataGrid 中的 ActionScript 项呈现器

Question

我正在使用来自blog.flexexamples.com 的这个示例。

我有一个数据网格并尝试将按钮动态添加到数据网格列之一。但我希望这个 Button 作为 ItemRenderer 用 ActionScript 而不是 MXML 编写。

我该怎么做？

谢谢

Answer 1

我想这就是你需要的。

ActionButtonItemRenderer.as：

package
{
    import flash.events.MouseEvent;

    import mx.controls.Alert;
    import mx.controls.Button;
    import mx.controls.listClasses.IDropInListItemRenderer;
    import mx.controls.listClasses.IListItemRenderer;
    import mx.core.IFlexDisplayObject;

    public class ActionButtonItemRenderer extends Button implements IFlexDisplayObject, IListItemRenderer, IDropInListItemRenderer
    {
        public var btn:Button;
        public function ActionButtonItemRenderer()
        {
            super();
            btn = new Button();
            btn.label = "Take Action";
            btn.addEventListener(MouseEvent.CLICK,clickHandler);
            btn.visible = btn.includeInLayout = true;

        }

        override protected function clickHandler(event:MouseEvent):void
        {
            super.clickHandler(event);
            Alert.show("Button clicked");

        }
    }
}

---

DynamicDataGridButton.mxml：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600">
    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Add column" click="init();" />
    </mx:ApplicationControlBar>
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            private var arr:ArrayCollection = new ArrayCollection
                (
                    [
                        {fname:'A',lname:'B'},
                        {fname:'C',lname:'B'},
                        {fname:'D',lname:'B'}
                    ]           
                );

            private function addDataGridColumn(dataField:String):void {
                var dgc:DataGridColumn = new DataGridColumn(dataField);
                dgc.itemRenderer = new ClassFactory(ActionButtonItemRenderer);
                var cols:Array = dg.columns;
                cols.push(dgc);
                dg.columns = cols;
            }

            private function init():void {
                addDataGridColumn("Details");
            }
        ]]>
    </mx:Script>
    <mx:DataGrid id="dg" dataProvider="{arr}">
        <mx:columns>
            <mx:DataGridColumn id="dgc1" dataField="fname" headerText="First Name" 
                               width="75"/>
            <mx:DataGridColumn id="dgc2" dataField="lname" headerText=" Last Name" 
                               width="150"/>

        </mx:columns>
    </mx:DataGrid>

</mx:Application>

Answer 2

要以 AS3 语法动态创建按钮，您可以这样做：

var button:Button = new Button();

然后在创建按钮后，您可以像这样设置它的属性：

button.label = "Click Me!";

最后，您可以将其添加到您的其中一项中：

var dp:Array = [{label: "Button 1", button: button},{label: "Button 2", button: button}];
myDg.dataProvider = dp;

然后你将它提供给你的数据网格，布局如下：

<mx:DataGrid id="myDG" variableRowHeight="true">
  <mx:columns>
    <mx:DataGridColumn dataField="label" headerText="Labels"/>
    <mx:DataGridColumn dataField="button" headerText="Buttons"/>
  </mx:columns>
</mx:DataGrid>

不确定这是否真的有效，您可能必须在整个列上都有一个按钮 itemRenderer，例如 this example。