Flex 4：mx |树 - 我如何禁用项目选择？ [英] Flex 4: mx|tree - how can i disable items selection?

查看：223
本文介绍了Flex 4：mx |树 - 我如何禁用项目选择？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想创建一个树，它的子节点包含我创建的特定的flex组件。

在我的ItemRenderer中，我有：


    li>

    两个状态：项目和 root_item 。

  1. 创建完成后执行的函数，使用数据验证该组件应该处于的正确状态并更改 currentState 到所需的状态。

我的问题是，一旦用户点击任何元素，它会自动改变到第一个混乱的状态。



我怎样才能禁用项目选择？

谢谢！


$ b当然，我希望用户能够上下钻取树，但不能选择项目。 $ b

update



项目改变悬停效果的状态，所以或者我禁用项目选择，或者以某种方式防止悬停效果改变状态。 >

另一个更新



这是我的代码：

主要TreeTest.xml：

 <？xml version =1.0encoding =utf-8？> 
  xmlns：s =library：//ns.adobe.com/flex/spark 
 xmlns：mx =library：//ns.adobe.com/flex/mxminWidth =955autoLayout =falseminHeight =600> 
< fx：声明> 
 <！ - 在这里放置非可视元素（例如服务，值对象） - > 
< fx：XML id =treeData> 
< node label =notifications> 
< node label =Winningsis_root =yes> 
< node label =winner/> 
< / node> 
< node label =挑战is_root =是> 
< / node> 
 < / node> 
< node label =Lucky charmsis_root =yes> 
< / node> 
< node label =好友请求is_root =yes> 
< / node> 
< / node> 
< / fx：XML> 
< / fx：声明> 
 
< fx：Script> 
 <！[CDATA [
 import mx.controls.Alert; 
导入mx.controls.listClasses.ListBase; 
导入mx.events.ListEvent; 
 protected function tree_itemClickHandler（event：ListEvent）：void 
 {
 tree.selectedItem = null; 
 event.preventDefault（）; 
 
 
 protected function tree_itemRollOverHandler（event：ListEvent）：void {
 event.preventDefault（）; 
} 
]]> 
< / fx：Script> 
 
  ; 
 
< / s：Application>

你可以在这里看到我试图阻止itemRollover和itemClick，但它没有解决我的问题。



这是TreeItemRenderer.xml： 

 <？xml version =1.0encoding =utf-8？> 
  xmlns：s =library：//ns.adobe.com/flex/spark 
 xmlns：mx =library：//ns.adobe.com/flex/mxcreationComplete =init（）> 
 
< s：州> 
< s：State name =root_item/> 
 < / s：州> 
< fx：Script> 
<！[CDATA [
 import com.flexer.Debug; 
 
导入mx.binding.utils.ChangeWatcher; 
导入mx.controls.Alert; 
导入mx.events.StateChangeEvent; 
 
 private function _stateChangeEventHandler（e：StateChangeEvent）：void {
 Alert.show（state changed to+ e.target.currentState）; 
 
 
 $ b私有函数init（）：void {
 var theXML：XMLList = XMLList（this.data）; 
 var theState：String =（theXML.attribute（is_root）==yes？root_item：item）; 
 this.currentState = theState; 
 this.addEventListener（StateChangeEvent.CURRENT_STATE_CHANGE，this._stateChangeEventHandler）; 
 // Alert.show（theXML.attribute（is_root））; 
 // Alert.show（theXML.attribute（label）+（theXML.attribute（is_root）==yes？true：false））; 
} 
 
]]> 
< / fx：Script> 
 < s：Rect id =indentationSpacerwidth ={treeListData.indent}percentHeight =100alpha =0> 
< s：fill> 
< s：SolidColor color =0xFFFFFF/> 
< / s：fill> 
< / s：Rect> 
 < s：BitmapImage source ={treeListData.disclosureIcon}visible ={treeListData.hasChildren}/> 
< / s：Group> 
< s：BitmapImage source ={treeListData.icon}/> 
 < / s：HGroup> 
< / s：MXTreeItemRenderer>


解决方案

您可以将事件处理程序添加到itemClick事件 

  itemClick =tree_itemClickHandler（event）

然后在事件处理程序中，您可以取消itemClick事件 

 受保护的函数tree_itemClickHandler（event：ListEvent）：void 
 {
 tree.selectedItem = null; 
 event.preventDefault（）;

更新： b

项呈示器有3个默认状态：正常，悬停和选择。您需要使用3种默认状态下的basedOn来引用您的自定义状态。理想情况下，您需要数据中的状态，以避免在init（）中执行的所有工作。它也允许你绑定basedOn到你的数据的状态，如：

pre $ < s：states>
< s：State name =root_item/>
< / s：州>然后，不管父列表发送的默认状态如何，显示将基于什么是在你的数据。


I want to create a tree that it's child nodes contain specific flex components that I created. I override the default ItemRenderer to achieve this.

In my ItemRenderer i have:

  1. two states: item and root_item.

  2. a function that executes after creation complete that using the data validates the proper state that this component should be in and changes the currentState to the desired state.

My problem is that once the user clicks on any of the elements, it changes automatically to the first state which mess things up.

how can I disable items selection at all ? of course I want the user to be able to drill up and down the trees but not to select the items.

thanks!

update

The Item changes states on hover effect, so or I disable items selection or somehow i prevent the hover effect from changing the state.

another update

this is my code:

the main TreeTest.xml:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" autoLayout="false" minHeight="600">
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
    <fx:XML id="treeData">
        <node label="notifications">
        <node label="Winnings" is_root="yes">
            <node label="winner"/>
        </node>
        <node label="Challenges" is_root="yes">
        </node>
        <node label="Achievements" is_root="yes">
        </node>
        <node label="Lucky charms" is_root="yes">
        </node>
        <node label="Friend requests" is_root="yes">
        </node>
        </node>
    </fx:XML>  
</fx:Declarations>

<fx:Script>
    <![CDATA[
        import mx.controls.Alert;
        import mx.controls.listClasses.ListBase;
        import mx.events.ListEvent;
        protected function tree_itemClickHandler(event:ListEvent):void
        {
            tree.selectedItem = null;
            event.preventDefault();
        }

        protected function tree_itemRollOverHandler(event:ListEvent):void {
            event.preventDefault();
        }
    ]]>
</fx:Script>

<mx:Tree id="tree" itemRollOver="tree_itemRollOverHandler(event)" itemClick="tree_itemClickHandler(event)" dataProvider="{treeData}"  folderOpenIcon="{null}" folderClosedIcon="{null}" defaultLeafIcon="{null}" width="1024" height="768" labelField="@label" itemRenderer="TreeItemRenderer" showRoot="false"  allowMultipleSelection="false" allowDragSelection="false"/>

</s:Application>

as you can see here I tried to prevent both itemRollover and itemClick but it did not resolve my problem.

this is the TreeItemRenderer.xml:

<?xml version="1.0" encoding="utf-8"?>
<s:MXTreeItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                  xmlns:s="library://ns.adobe.com/flex/spark" 
                  xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init()">

<s:states>
    <s:State name="root_item" />            
    <s:State name="item" />
</s:states>
<fx:Script>
    <![CDATA[
        import com.flexer.Debug;

        import mx.binding.utils.ChangeWatcher;
        import mx.controls.Alert;
        import mx.events.StateChangeEvent;

        private function _stateChangeEventHandler(e:StateChangeEvent):void {
            Alert.show("state changed to " + e.target.currentState);
        }


        private function init():void {
            var theXML:XMLList = XMLList(this.data);
            var theState:String =( theXML.attribute("is_root") == "yes"  ? "root_item" : "item");
            this.currentState=theState;
            this.addEventListener(StateChangeEvent.CURRENT_STATE_CHANGE,this._stateChangeEventHandler);
//          Alert.show(theXML.attribute("is_root"));
//          Alert.show(theXML.attribute("label") + (theXML.attribute("is_root") == "yes" ? "true" : "false"));
        }

    ]]>
</fx:Script>
<s:HGroup left="0" right="0" top="0" bottom="0" verticalAlign="middle" includeIn="root_item">
    <s:Rect id="indentationSpacer" width="{treeListData.indent}" percentHeight="100" alpha="0">
        <s:fill>
            <s:SolidColor color="0xFFFFFF" />
        </s:fill>
    </s:Rect>
    <s:Group id="disclosureGroup">
        <s:BitmapImage source="{treeListData.disclosureIcon}" visible="{treeListData.hasChildren}" />
    </s:Group>
    <s:BitmapImage source="{treeListData.icon}" />
    <s:Label id="labelField" text="{treeListData.label}" paddingTop="2"/>
</s:HGroup>
</s:MXTreeItemRenderer>

解决方案

You can add an event handler to the tree for the itemClick event

itemClick="tree_itemClickHandler(event)"

Then in the event handler you can cancel the itemClick event

protected function tree_itemClickHandler(event:ListEvent):void
{
    tree.selectedItem = null;
    event.preventDefault();
}

Update:

The item renderer has 3 default states: normal, hovered, and selected. You need to use basedOn with the 3 default states to reference your custom states. Ideally you would want the state in your data so you can avoid all of the work you're doing in init(). It would also allow you to bind basedOn to the state of your data as such:

<s:states>
    <s:State name="normal" basedOn="{data.@state}"/>
    <s:State name="hovered" basedOn="{data.@state}"/>
    <s:State name="selected" basedOn="{data.@state}"/>
    <s:State name="root_item" />            
    <s:State name="item" />
</s:states>

Then regardless of the default state that is sent by the parent list the display will be based upon what is in your data.

这篇关于Flex 4：mx |树 - 我如何禁用项目选择？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆