通过打开模式对话框来编辑数据网格

时间:2012-06-01 13:51:02

标签: flex datagrid

当我单击Flex Datagrid中的列时,我想打开一个包含一些问题的对话框。关闭对话框后,我想用对话框中的信息填充该单元格。

到目前为止我所拥有的是:

        public function startEdit(event:DataGridEvent):void {
            // event.dataField is null, so we figure it out ourselves
            var column:DataGridColumn = dgQObjects.columns[event.columnIndex];
            if (column.dataField == "parameters") {
                // depending on the type, we can fill in parameters
                var type:String = ListCollectionView(dgQObjects.dataProvider).getItemAt(event.rowIndex).type;
                switch(type) {
                    case "Gauge":
                        event.preventDefault();

                        quartzObjects[event.rowIndex].parameters = "foo";
                        updateLocalStorage();
                        dgQObjects.validateNow();
                        break;
                    case "Indicator":
                        break;
                    case "New Row":
                        event.preventDefault();
                        break;
                }
            }

        }

它将'parameters'设置为'foo',所以这很好,但它没有显示在datagrid中(validateNow()什么都不做)。另外,如果我输入Alert(),startEdit会继续触发,而我永远无法关闭Alertbox。网格定义如下:

  <QuartzUI:DoubleClickDataGrid width="800" x="10" y="10" height="337" 
             id="dgQObjects"
             editable="true"
             itemEditBegin="{startEdit(event)}"
             itemEditEnd="{checkQuartzObjects()}"
             creationComplete="{initDataGrid()}"
             >

(DoublieClickDataGrid是DataGrid的子类)

1 个答案:

答案 0 :(得分:0)

您应该通过模型对象上的数据绑定来完成此操作。它会让你的生活更轻松。假设以下DataGrid:

<s:DataGrid id="dg" dataProvider="{dp}" 
            doubleClickEnabled="true" 
            doubleClick="editSelectedItem()">

    <s:columns>
        <s:ArrayList>
            <s:GridColumn dataField="name" />
        </s:ArrayList>
    </s:columns>
</s:DataGrid>
默认情况下,

doubleClickEnabledfalse,因此我们必须明确设置它才能捕获doubleClick个事件。现在让我们看一下editSelectedItem()方法:

private function editSelectedItem():void {
    var popup:MyEditor = new MyEditor();
    popup.data = dg.selectedItem as MyClass;
    PopUpManager.addPopUp(popup, this, true);
    PopUpManager.centerPopUp(popup);
}

我们只创建一个新视图并将其传递给当前选定的datagrid项。然后我们将其打开为模态弹出窗口。 (请注意,我没有添加任何代码来再次关闭弹出窗口,以使我的示例尽可能简单)。现在,MyEditor视图如下所示:

<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:m="net.riastar.model.*"
         title="Edit label"
         width="400" height="300" >

    <fx:Declarations>
        <m:MyClass id="data" />
    </fx:Declarations>

    <s:TextInput text="@{data.name}" />

</s:Panel>

我们使用双向数据绑定来编辑name实例的MyClass属性(请注意,此属性必须标记为Bindable才能生效)。这对于一个工作示例就足够了:如果您现在编辑TextInput中的值,您将在后台看到DataGrid中的相应值更改。