flex4 datagrid里点击链接打开图片的方法

简介:

1. 在datagrid里面 加入链接


链接新窗口显示相关的图片


如下


<mx:DataGridColumn  resizable="false" editable="false" headerText="查看大图" >   
      <mx:itemRenderer>   
       <fx:Component>   
        <mx:HBox width="100%" horizontalGap="0">   
         <mx:LinkButton label="查看大图" click="parentDocument.viewBigImage()" />   
         
        </mx:HBox>   
       </fx:Component>   
      </mx:itemRenderer>   
     </mx:DataGridColumn>

 

 

方法:

   /**
    * 原作查看大图 yanek 增加该方法
    */
   public function viewBigImage():void{
    //选中的行数
    var k:int = this.originalPicList.selectedIndex;
    //Alert.show("k="+k);

    //获取dataGrid中的数据
    var arr : Array =(originalPicList.dataProvider as ArrayCollection).source;
    //获取当前选中行的dictType列的数据
    var path:String = arr[k]["picUrlImage"].toString();
    
    var path1:String = this.originalPicList.selectedItem.picUrlImage;
    
    
    //Alert.show("path="+path);
    
    
    var window : ViewBigImage = PopUpManager.createPopUp(this,ViewBigImage,true) as ViewBigImage;
    window.owner = this;
    //window.bigimage.source = path;
    window.bigimage.source = path1;
    PopUpManager.centerPopUp(window);//弹出子窗口
    
   }
   //////////////////////

 

注意:取得路径的方法 var path1:String = this.originalPicList.selectedItem.picUrlImage;

 

 

 


弹出新窗口代码:ViewBigImage.mxml

 

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow 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" minHeight="600" close="PopUpManager.removePopUp(this)" title="大图查看" width="681" height="498">
 <s:layout>
  <s:BasicLayout/>
 </s:layout>
 
 <fx:Script>
  <![CDATA[
   
   import mx.collections.ArrayCollection;
   import mx.controls.Alert;
   import mx.core.Application;
   import mx.managers.PopUpManager;
   import mx.rpc.events.ResultEvent;
   
   
   private var trme : String = Math.random().toString();
   private var dtArray : ArrayCollection = new ArrayCollection();
   
   
   
   protected function init():void{
    
   }
   
   protected function close_window():void{
    PopUpManager.removePopUp(this);
   }
   
  ]]>
 </fx:Script>
 <fx:Declarations>
  <!-- 将非可视元素(例如服务、值对象)放在此处 -->
 </fx:Declarations>
 <mx:Image x="58" y="20" width="564" height="391" id="bigimage"/>
</s:TitleWindow>

目录
相关文章
|
3月前
|
开发者 容器
flex 布局属性在实际项目中的应用场景有哪些?
flex 布局属性在实际项目中的应用场景有哪些?
|
2月前
|
前端开发 UED 容器
使用 Flex 布局实现垂直居中效果
【10月更文挑战第7天】
171 57
|
1月前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。
|
19天前
|
容器
HTML中使用Flex布局实现双行夹批效果
在HTML中,还可以用table元素来实现双行夹批效果,但比flex布局代码更复杂,效果也不见得更理想。
|
21天前
|
开发者 UED 容器
鸿蒙next版开发:ArkTS组件通用属性(Flex布局)
在HarmonyOS next中,ArkTS的Flex布局是一种强大且灵活的布局方式,支持水平或垂直方向排列元素,并能动态调整大小和位置以适应不同屏幕。主要属性包括justifyContent、alignItems、direction和wrap,适用于导航栏、侧边栏和表单等多种场景。示例代码展示了如何使用这些属性创建美观的布局。
58 10
|
1月前
|
容器
在 Flex 布局中,如何设置元素在侧轴上的初始对齐方式?
【10月更文挑战第22天】同时,还可以进一步探索其他 Flex 布局相关的属性和技巧,以更好地掌握 Flex 布局的强大功能,创造出更具创意和适应性的页面布局。
29 2
|
2月前
|
前端开发 容器
flex布局
【10月更文挑战第7天】
33 1
flex布局属性简介
flex布局属性简介