Flex - 检查选项卡下字段的更改

Question

我正在开发一个带有 4 个选项卡的 Flex 应用程序。 当用户切换选项卡时，我想将前一个选项卡重置为其初始状态。 另外我需要提醒用户，如果他没有保存所做的更改（如果有的话），将会丢失。

我计划在模型中设置一个变量，并在选项卡下的字段中发生任何更改时设置/重置它。 但我该如何监控呢？ 有没有可用的监听器？

另外，如何检查和重置上一个选项卡的状态？ 该选项卡下的内容仅来自组件。

[编辑] 我的问题是：

1. 如何检查用户是否在当前选项卡中进行了任何编辑？ 有些字段也是动态生成的。
2. 我在 TabNavigator 的 onchange 事件中调用一个函数，并询问用户是否确实要切换选项卡。我希望仅当用户在弹出的警报框中单击“是”时，另一个选项卡才能加载其内容。 但现在会弹出确认框，内容会加载到另一个选项卡中，如果用户单击“否”，则会返回到另一个选项卡。 在用户按下“是”之前，如何阻止加载其他选项卡内容的操作？

请提供您的宝贵意见。

Answer 1

对问题1的回答如下；
使用布尔变量来跟踪用户是否编辑了数据。 当用户选择选项卡时，将此变量设置为 false。 监听选项卡内所有字段的更改事件。 将所有字段的更改事件处理程序设置为将布尔值设置为 true 的方法。 对于动态字段，添加与其他字段相同的更改事件处理程序。 创建每个动态字段后立即执行此操作。 请参阅下面的代码；

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            private var userChangedData:Boolean=false

            function onUserChangedData()
            {
                trace("onUserChangedData")
                userChangedData=true
            }

            function onTabChanged()
            {
                trace("ontabchanged")
                trace(userChangedData)
                userChangedData=false
            }
        ]]>
    </mx:Script>
    <mx:Panel title="TabNavigator Container Example"
              height="90%"
              width="90%"
              paddingTop="10"
              paddingLeft="10"
              paddingRight="10"
              paddingBottom="10">

        <mx:TabNavigator id="tn"
                         width="100%"
                         height="100%"
                         change="onTabChanged()">
            <!-- Define each panel using a VBox container. -->

            <mx:VBox label="Panel 1">
                <mx:Label text="TabNavigator container panel 1"/>
                <mx:TextInput text="default"
                              change="onUserChangedData()"/>
                <mx:CheckBox label="check something"
                             change="onUserChangedData()"/>
            </mx:VBox>

            <mx:VBox label="Panel 2">
                <mx:Label text="TabNavigator container panel 2"/>
            </mx:VBox>

            <mx:VBox label="Panel 3">
                <mx:Label text="TabNavigator container panel 3"/>
            </mx:VBox>
        </mx:TabNavigator>


    </mx:Panel>

Answer 2

我还没有添加评论的声誉，但可以回答您的问题：

“是否可以添加一个全局 onchange/onkeypress 方法来挂钩整个应用程序并设置布尔值？否则我将不得不在多个位置进行编辑以添加 onchange 事件 – Basani”

是的，让每个需要发出“发生变化”信号的位置调度一个事件。 然后让指挥部监视该事件的调度。 该命令可以执行您需要的所有处理，包括在模型中设置 userDataChanged 布尔值。

听起来您正在根据您标记问题的方式使用 Cairngorm，所以这应该很容易支持。

Answer 3

对于 1)，您可以在每次用户编辑字段时调度一个事件。 该事件可以通过命令来处理，该命令将使用有关更新内容的正确信息来更新模型中的某些属性。 然后，您认为关心的任何人都可以绑定到这些属性。

对于 2)，在 onChange() 处理程序中调用 event.preventDefault()。 然后，仅当用户单击“是”时，您才能以编程方式选择下一个选项卡。