当文本长度很大时，在网格内呈现的 LinkBut​​ton 会显示水平滚动条

Posted 2023-02-18

【中文标题】当文本长度很大时，在网格内呈现的 LinkBut​​ton 会显示水平滚动条

【英文标题】：LinkButton rendered inside a grid shows a horizontal scroll bar when length of text is big

【发布时间】：2014-01-09 22:08:28

【问题描述】：

我正在尝试在数据网格单元格中创建链接，但无法移除水平滚动条

这是我的例子

///////////////////////////////////////////
//GridExample.mxml - Main application
///////////////////////////////////////////

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

<mx:Box id="myCustomBox"   initialize="assignData();">


    <fx:Script>

        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.collections.HierarchicalData;

            [Embed("dialog_error.png")] 
            private var myImage:Class; 


            public function assignData():void 
                var retVal:ArrayCollection = new ArrayCollection();
                var hData:HierarchicalData = new HierarchicalData();
                var s:String = '["Property":"AA","Value":2,"RowIdentifier":"AA","Property":"BB","Value":"Nice looking link","RowIdentifier":"BB","Property":"CC","Value":"sdfgusgdfugadgfuasygdfgauidsguiasgdfugasuidfguiasg","RowIdentifier":"CC"]';
                var pSets:Object = JSON.parse(s);
                var propertySets:Array = pSets as Array;
                for (var i:int=0;i<propertySets.length;i++) 
                 
                    var item:Object = propertySets[i];
                    var arrayElt:Object = Property: item["Property"], RowIdentifier: item["RowIdentifier"], Value: item["Value"];
                    retVal.addItem(arrayElt);
                

                hData.source = retVal;
                myGridId.dataProvider = hData;

            
        ]]>
    </fx:Script>


    <mx:AdvancedDataGrid id="myGridId" 
                         variableRowHeight="true"
                         
                         showHeaders="false" 
                         includeInLayout="myGridId.visible"
                         defaultLeafIcon="null"
                         >  


        <mx:columns >
            <mx:AdvancedDataGridColumn  dataField="Property" headerText="Property" backgroundColor="#E5EFF5"  wordWrap="true" />
            <mx:AdvancedDataGridColumn  dataField="Value" headerText="Value" backgroundColor="white"  itemRenderer="ExampleRenderer"/>
            <mx:AdvancedDataGridColumn  dataField="RowIdentifier" visible="false"/>
        </mx:columns> 


    </mx:AdvancedDataGrid>      

</mx:Box>

</s:WindowedApplication>


///////////////////////////////////////////
//ExampleRenderer.mxml - ItemRenderer used
///////////////////////////////////////////

<?xml version="1.0"?>

<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" textAlign="center" creationComplete="renderNow()" >
<mx:Script>
    <![CDATA[
        import mx.events.FlexEvent;
        import mx.controls.LinkButton;
        import mx.controls.Alert;


        private function renderNow():void 
            var dataObject:Object = super.data;
            var rowId:String = dataObject["RowIdentifier"];
            var label:LinkButton = new LinkButton();
            label.addEventListener(MouseEvent.CLICK, mouseClick);
            label.percentWidth = 100;
            label.label = dataObject["Value"];
            label.setStyle("horizontalScrollPolicy","off");
            label.setStyle("textAlign","left");
            label.setStyle("paddingLeft",3);
            this.addChild(label);
        

        override public function set data(value:Object):void
        
            super.data = value;
            dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
        

        private function mouseClick(e:MouseEvent):void
            Alert.show("Clicked on a link");
        
    ]]>
</mx:Script>

</mx:Box>

LinkBut​​ton 生成了可以点击的漂亮链接，在 web 视图中它看起来非常好，带有漂亮的悬停会产生下划线（就像链接一样）等，但是当文本很长时，水平滚动条会掩盖文本本身.如何摆脱水平滚动条（我尝试关闭horizo​​ntalScrollPolicy，但没有帮助）。我不介意是否隐藏了超出行长度的额外文本，因为无论如何我都会为每个单元格添加一个工具提示。感谢您提供任何帮助。

谢谢。

【参考方案1】：

将 minWidth 设置为 0 以及 percentWidth=100 修复它。