Flex 4:mx|tree - 如何禁用项目选择? [英] Flex 4: mx|tree - how can i disable items selection?
问题描述
我想创建一棵树，它的子节点包含我创建的特定 flex 组件.我覆盖了默认的 ItemRenderer 来实现这一点.
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.
在我的 ItemRenderer 中，我有:
In my ItemRenderer i have:
两种状态:
item和root_item.
一个在创建完成后执行的函数，它使用数据验证该组件应处于的正确状态，并将 currentState 更改为所需状态.
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.
谢谢！
项目在悬停效果上更改状态，因此或者我禁用项目选择或以某种方式阻止悬停效果更改状态.
The Item changes states on hover effect, so or I disable items selection or somehow i prevent the hover effect from changing the state.
这是我的代码:
主TreeTest.xml:
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>
正如你在这里看到的，我试图阻止 itemRollover 和 itemClick 但它没有解决我的问题.
as you can see here I tried to prevent both itemRollover and itemClick but it did not resolve my problem.
这是 TreeItemRenderer.xml:
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>
推荐答案
您可以为 itemClick 事件的树添加事件处理程序
You can add an event handler to the tree for the itemClick event
itemClick="tree_itemClickHandler(event)"
然后在事件处理程序中您可以取消 itemClick 事件
Then in the event handler you can cancel the itemClick event
protected function tree_itemClickHandler(event:ListEvent):void
{
tree.selectedItem = null;
event.preventDefault();
}
更新:
项目渲染器有 3 种默认状态:正常、悬停和选中.您需要使用带有 3 个默认状态的 basedOn 来引用您的自定义状态.理想情况下，您希望数据中包含状态，这样您就可以避免在 init() 中所做的所有工作.它还允许您将 basedOn 绑定到您的数据状态，如下所示:
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|tree - 如何禁用项目选择?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
