zoukankan      html  css  js  c++  java
  • Flex4 自定义Datagrid的itemRenderer和headerRenderer

    先看图片:

     因为项目中需要用到datagrid,而且需要在其中嵌入dropdownlist,包括header和item。

    一开始嵌入的是Combobox,但是发现用Combobox的话,稍微动一个datagrid,如改变大小等,Combobox里的数据立刻不见了,所以使用dropdownlist控件,反正是Flex4.1。

     废话完毕,上代码:

    for datagrid:

    代码
    <mx:DataGrid id="dgList" width="100%"  height="100%" dataTipFunction="buildToolTip"
                             variableRowHeight
    ="true" sortableColumns="false" visible="false">
                    
    <mx:columns>    
                        
    <mx:DataGridColumn headerText="chkSave" visible="false">
                            
    <mx:itemRenderer>                            
                                
    <fx:Component>
                                    
    <mx:CheckBox selected="{data.chkSave}"/>        
                                
    </fx:Component>
                            
    </mx:itemRenderer>
                        
    </mx:DataGridColumn>
                        
    <mx:DataGridColumn headerText="chkDel" visible="false">
                            
    <mx:itemRenderer>
                                
    <fx:Component>
                                    
    <mx:CheckBox selected="{data.chkDel}" />        
                                
    </fx:Component>
                            
    </mx:itemRenderer>
                        
    </mx:DataGridColumn>
                        
    <mx:DataGridColumn dataField="Xbrl" headerText="XBRL" itemRenderer="cons.com.epro.child.myCombox" />                    
                        
    <mx:DataGridColumn headerText="Column1" dataField="Column1" width="200" showDataTips="true"/>            
                        
    <mx:DataGridColumn headerText="NOTE" dataField="NOTE" width="50" />
                        
                        
    <mx:DataGridColumn headerText="Column2" dataField="Column2" width="90" wordWrap="true"  headerRenderer="cons.com.epro.child.myComboxHeader" />
                        
    <mx:DataGridColumn headerText="Column3" dataField="Column3" width="90" wordWrap="true"  headerRenderer="cons.com.epro.child.myComboxHeader" />
                        
    <mx:DataGridColumn headerText="Column4" dataField="Column4" width="90" wordWrap="true"  headerRenderer="cons.com.epro.child.myComboxHeader"/>
                        
    <mx:DataGridColumn headerText="Column5" dataField="Column5" width="90" wordWrap="true"  headerRenderer="cons.com.epro.child.myComboxHeader"/>
                        
    <mx:DataGridColumn headerText="Column6" dataField="Column6" width="90" wordWrap="true"  headerRenderer="cons.com.epro.child.myComboxHeader"/>
                        
    <mx:DataGridColumn headerText="Column7" dataField="Column7" width="90" wordWrap="true"  headerRenderer="cons.com.epro.child.myComboxHeader"/>
                        
    <mx:DataGridColumn headerText="Column8" dataField="Column8" width="90" wordWrap="true"  headerRenderer="cons.com.epro.child.myComboxHeader"/> 
                        
    <mx:DataGridColumn headerText="Column9" dataField="Column9" width="90" wordWrap="true"  headerRenderer="cons.com.epro.child.myComboxHeader"/>
                        
                    
    </mx:columns>
                
    </mx:DataGrid>

    for myCombox:

    代码
    <?xml version="1.0" encoding="utf-8"?>
    <s:MXDataGridItemRenderer 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
    ="cc()"
                              focusEnabled
    ="true">
        
    <fx:Script>
            
    <![CDATA[
                import flash.events.Event;
                
                import mx.collections.
    *;
                import mx.controls.Alert;
                import mx.controls.DataGrid;
                import mx.events.FlexEvent;
                import mx.events.IndexChangedEvent;
                import mx.events.ListEvent;
                import mx.events.ScrollEvent;
                
                import spark.events.IndexChangeEvent;

                
    private function cc():void{
                    
    if(owner is DataGrid)
                        DataGrid(owner).addEventListener(
    "scroll", dXbrl_creationCompleteHandler);
                }
                
    override public function set data(value:Object):void
                {
                    
    if(value != null)
                    {
                        super.data 
    = value;
                        
                        
                    }   
                }            
                

                
    protected function dXbrl_creationCompleteHandler(event:ScrollEvent):void
                {
                    var arr:ArrayCollection 
    = dXbrl.dataProvider as ArrayCollection;
                    var isEquity:Boolean
    =false;
                    
    if(data.IsEquity)
                        isEquity
    =true;
                    var i:
    int=0;
                    
                    
    for(i=0;i<arr.length;i++)
                    {
                        
    if(isEquity)
                        {
                            
    if(arr[i].line_item==data.XbrlSelected)
                            {
                                dXbrl.selectedIndex
    =i;
                                
    break;
                            }
                        }
                        
    else{                        
                        
                            
    if(arr[i].pdf_item==data.XbrlSelected)
                            {
                                dXbrl.selectedIndex
    =i;
                                
    break;
                            }
                        }
                    }
                    dXbrl_changeHandler();
                    
    //data.dispatchEvent(event);
                    
    //dXbrl.selectedIndex=dXbrl.dataProvider.getItemIndex(data.XbrlSelected);
                }
                
                
    protected function dXbrl_changeHandler():void
                {                
                    data.XbrlSelected
    =dXbrl.selectedItem.pdf_item;
                    data.XbrlSelectedText
    =dXbrl.selectedItem.pdf_item;
                    data.XbrlSelectedValue
    =dXbrl.selectedItem.line_item;
                    
                }

            ]]
    >
        
    </fx:Script>
        
        
    <s:DropDownList id="dXbrl" labelField="pdf_item" dataProvider="{data.Xbrl as ArrayCollection}" width="100%"
                        creationComplete
    ="dXbrl_creationCompleteHandler(null)" change="dXbrl_changeHandler()"
                        toolTip
    ="{dXbrl.selectedItem.pdf_item}"  />
        
        
    </s:MXDataGridItemRenderer>

    for myComboxHeader:

    代码
    <?xml version="1.0" encoding="utf-8"?>
    <s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                              xmlns:s
    ="library://ns.adobe.com/flex/spark" 
                              xmlns:mx
    ="library://ns.adobe.com/flex/mx" 
                              focusEnabled
    ="true" creationComplete="cc()">
        
    <fx:Script>
            
    <![CDATA[
                import mx.collections.
    *;
                import mx.collections.ArrayCollection;
                import mx.controls.Alert;
                import mx.controls.DataGrid;
                import mx.controls.dataGridClasses.DataGridColumn;
                import mx.controls.dataGridClasses.DataGridHeader;
                import mx.events.FlexEvent;
                
                import spark.events.IndexChangeEvent;
                [Bindable]
                
    private var headItems:ArrayCollection=new ArrayCollection([
                    {label:
    "company",data:1},
                    {label:
    "group",data:2}
                    ]);
                
    private var col:DataGridColumn=null;
                
    override public function set data(value:Object):void
                {                
                    
    if(value != null)
                    {
                        col 
    = (value as DataGridColumn);
                        super.data 
    = value;    
                    }                
                }
                
    override public function get data():Object{
                    
    return headItems;
                }
                
    protected function cc():void{                
                    var dg:DataGrid 
    =this.parent.parent as DataGrid;
                    
    if(col!=null)
                        col.headerText
    =dHeader.selectedItem.label;
                }
                
            ]]
    >
        
    </fx:Script>
        
    <s:layout>        
            
    <s:VerticalLayout/>
        
    </s:layout>    
        
        
    <s:DropDownList id="dHeader" labelField="label" selectedIndex="0" width="80" dataProvider="{headItems}"
                             change
    ="cc()" />    
    </s:MXDataGridItemRenderer>

    其中,itemRenderer不是问题,难点在HeaderRender上面,因为需要获取header上的ddl选择的值,而flex的datagrid大家知道,他是不能像c#那样findControl的,所以我用了一个全局变量private var col:DataGridColumn=null;来存储当前是哪一列,然后将ddl的值绑定到该列的headerText上.

    搜索了N多资料,摸索了好久,总算搞定了

  • 相关阅读:
    [LeetCode]2. Add Two Numbers链表相加
    Integration between Dynamics 365 and Dynamics 365 Finance and Operation
    向视图列添加自定义图标和提示信息 -- PowerApps / Dynamics365
    Update the Power Apps portals solution
    Migrate portal configuration
    Use variable to setup related components visible
    Loyalty management on Retail of Dynamic 365
    Modern Fluent UI controls in Power Apps
    Change screen size and orientation of a canvas app in Power App
    Communication Plan for Power Platform
  • 原文地址:https://www.cnblogs.com/4kapple/p/1874887.html
Copyright © 2011-2022 走看看