DataGrid 中的 ActionScript 项呈现器

Posted 2023-02-22

【中文标题】DataGrid 中的 ActionScript 项呈现器

【英文标题】：ActionScript Item Renderer in DataGrid

【发布时间】：2011-12-10 06:17:10

【问题描述】：

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

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

我该怎么做？

谢谢

【参考方案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" 
                               />
            <mx:DataGridColumn id="dgc2" dataField="lname" headerText=" Last Name" 
                               />

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

</mx:Application>

【讨论】：

不确定自 2011 年 10 月以来是否发生了某些变化（我敢肯定），但由于您正在扩展 Button，因此您不需要实现这些接口，或者在 ActionButtonItemRenderer 中有一个 Button。你可以做this.label = "Take Action";。并且 Clickhandler 也已在 Button 类中设置。无论如何，您的回答为我指明了正确的方向，非常感谢。

【参考方案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。

【讨论】：

如果您想要一个好的答案，您需要对您的问题更具体一点。你问过如何在 ActionScript 中创建一个按钮，我给了你这个答案。你想做什么？也许提供一两个代码块？