Flex DataGrid:根据另一个值更改值? [英] Flex DataGrid: Change value based on another value?

查看:91
本文介绍了Flex DataGrid:根据另一个值更改值?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在Flex中有一个DataGrid,一列为复选框,另一列为数值。当单击复选框时,如果选中该复选框,数值应该更改为0,如果选中该复选框,则该值应改为预定义的最小值。这是我的代码:

 < mx:DataGrid x =0y =45width =272 height =525dataProvider ={dp}variableRowHeight =trueeditable =trueid =equipmentDGverticalAlign =middle> 
< mx:columns>

< mx:DataGridColumn headerText =headerStyleName =gridheaderwidth =20dataField =includededitorDataField =selectedrendererIsEditor =true>
< mx:itemRenderer>
< fx:Component>
< mx:CheckBox click =handleClicks(event)>
< fx:脚本>
<![CDATA [
public function handleClicks(event:MouseEvent)):void
{
data.included =!data.included;

if(data.included&& data.antal == 0)
data.antal = data.minNo;
else if(!data.included)
data.antal = 0;
}
]]>
< / fx:脚本>
< / mx:CheckBox>
< / fx:Component>
< / mx:itemRenderer>
< / mx:DataGridColumn>
< mx:DataGridColumn headerText =AntalheaderStyleName =gridheaderwidth =40dataField =antaleditorDataField =valueeditable =true>
< mx:itemEditor>
< fx:Component>

< mx:NumericStepper stepSize =1width =35height =20focusOut =numericstepper1_changeHandler(event)>
< fx:脚本>
<![CDATA [
import mx.events.NumericStepperEvent;
覆盖公共函数集数据(value:Object):void
{
super.data = value;

if(value&& value.hasOwnProperty(minNo))
minimum = value.minNo;

if(value&&  value.hasOwnProperty(maxNo))
maximum = value.maxNo;
}

protected function numericstepper1_changeHandler(event:Event):void
{
if(data.antal> 0)
data.included = true ;
else
data.included = false;
}

]]>
< / fx:脚本>

< / mx:NumericStepper>

< / fx:Component>
< / mx:itemEditor>
< / mx:DataGridColumn>


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

数据中的值更新(我可以看到它,当我关闭并打开这个对话框),但它不会在数据网格中立即更新。

解决方案

在数据对象中,确保触发每次包含的财产都会发生变化。在你的第二个itemRenderer听事件和更新的价值,每当属性更改。



概念上像这样:



在数据对象中:

  private var _included:Boolean; 
public function get included():Boolean {
return this._included;
}

public function set included(value:Boolean):void
this._included = value;
this.dispatchEvent(new Event('includedChanged');
}

将渲染器添加到您的第二列,如下所示:

 < mx:DataGridColumn headerText =AntalheaderStyleName =gridheader width =40dataField =antaleditorDataField =valueeditable =true> 
< mx:itemRenderer>
< fx:Component>
< mx:标签dataChange =onDataChange()>
< fx:Script>
<![CDATA [
public function onDataChange():void {
thistext = data [ 'Antal'];
this.data.addEventListener('includedChanged',onIncludedChange);
}
public function onIncludedChange(e:Event):void {
this.text =数据['Antal'];
}
]]>
< / fx:脚本>
< / mx:Label>
< / fx :Component>
< / mx:itemRenderer>
< mx:itemEditor>
< fx:Component>

< mx: cStepper stepSize =1width =35height =20focusOut =numericstepper1_changeHandler(event)>
< fx:脚本>
<![CDATA [
import mx.events.NumericStepperEvent;
覆盖公共函数集数据(value:Object):void {
super.data = value;

if(value&& value.hasOwnProperty(minNo))
minimum = value.minNo;

if(value&&  value.hasOwnProperty(maxNo))
maximum = value.maxNo;
}

protected function numericstepper1_changeHandler(event:Event):void
{
if(data.antal> 0)
data.included = true ;
else
data.included = false;
}

]]>
< / fx:脚本>
< / mx:NumericStepper>
< / fx:Component>
< / mx:itemEditor>
< / mx:DataGridColumn>


I have a DataGrid in Flex, with one column a checkbox and another a numeric value. When the checkbox is clicked, the numeric value should change, either to 0 if the checkbox is unselected, or to a pre-defined minimum value if the checkbox is selected. Here is the code I have:

<mx:DataGrid x="0" y="45" width="272" height="525" dataProvider="{dp}" variableRowHeight="true" editable="true" id="equipmentDG" verticalAlign="middle">                
    <mx:columns>                    

        <mx:DataGridColumn headerText="" headerStyleName="gridheader" width="20" dataField="included" editorDataField="selected" rendererIsEditor="true">
            <mx:itemRenderer>
                <fx:Component>
                    <mx:CheckBox click="handleClicks(event)">
                        <fx:Script>
                            <![CDATA[
                            public function handleClicks(event:MouseEvent):void
                            {
                                data.included = !data.included;

                                if(data.included && data.antal == 0)     
                                    data.antal = data.minNo; 
                                else if(!data.included) 
                                    data.antal = 0;
                            }
                            ]]>
                        </fx:Script>
                    </mx:CheckBox>
                </fx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
        <mx:DataGridColumn headerText="Antal" headerStyleName="gridheader" width="40" dataField="antal" editorDataField="value" editable="true">
            <mx:itemEditor>
                <fx:Component>

                    <mx:NumericStepper stepSize="1" width="35" height="20"  focusOut="numericstepper1_changeHandler(event)">
                        <fx:Script>
                            <![CDATA[
                            import mx.events.NumericStepperEvent;
                            override public function set data(value:Object):void
                            {
                                super.data = value;

                                if (value && value.hasOwnProperty("minNo"))
                                    minimum = value.minNo;

                                if (value && value.hasOwnProperty("maxNo"))
                                    maximum = value.maxNo;                                              
                            }

                            protected function numericstepper1_changeHandler(event:Event):void
                            {
                                if(data.antal > 0)
                                    data.included = true;
                                else
                                    data.included = false;
                            }

                            ]]>
                        </fx:Script>

                    </mx:NumericStepper>                                        

                </fx:Component>
            </mx:itemEditor>
        </mx:DataGridColumn>


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

The value updates in the data (I can see it when I close and open the dialog this is in), but it doesn't update instantly in the data grid. How can I make the value visibly change as soon as the checkbox is clicked?

解决方案

In your data object, make sure to fire an event every time the included property changes. In your 2nd itemRenderer listen to the event and update the value whenever the property changes.

Conceptually like this:

In the data object:

private var _included : Boolean;
public function get included():Boolean{
 return this._included;
}

public function set included(value:Boolean):void
 this._included = value;
 this.dispatchEvent(new Event('includedChanged');
}

Add a renderer to your second column, like this:

 <mx:DataGridColumn headerText="Antal" headerStyleName="gridheader" width="40" dataField="antal" editorDataField="value" editable="true">
  <mx:itemRenderer>
   <fx:Component>
   <mx:Label dataChange="onDataChange()" >
    <fx:Script>
     <![CDATA[
      public function onDataChange():void{
       thistext = data['Antal'];
       this.data.addEventListener('includedChanged',onIncludedChange);
      }
      public function onIncludedChange(e:Event):void{
       this.text = data['Antal'];
      }
     ]]>
    </fx:Script>
   </mx:Label>
  </fx:Component>
  </mx:itemRenderer>
  <mx:itemEditor>
   <fx:Component>

    <mx:NumericStepper stepSize="1" width="35" height="20"  focusOut="numericstepper1_changeHandler(event)">
     <fx:Script>
      <![CDATA[
       import mx.events.NumericStepperEvent;
       override public function set data(value:Object):void{
        super.data = value;

        if (value && value.hasOwnProperty("minNo"))
         minimum = value.minNo;

        if (value && value.hasOwnProperty("maxNo"))
          maximum = value.maxNo;                                              
        }

        protected function numericstepper1_changeHandler(event:Event):void
        {
         if(data.antal > 0)
          data.included = true;
         else
          data.included = false;
         }

         ]]>
        </fx:Script>
       </mx:NumericStepper>                                        
      </fx:Component>
     </mx:itemEditor>
    </mx:DataGridColumn>

这篇关于Flex DataGrid:根据另一个值更改值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆