Flex 3 DataGrid Tab標籤訂單

我一直在試圖讓Tab鍵順序在這個DataGrid上工作一段時間，現在我無法弄清楚我做錯了什麼。任何人都可以發現它？Flex 3 DataGrid Tab標籤訂單

<?xml version="1.0" encoding="utf-8"?> 
<controls:MDataGrid xmlns:mx="http://www.adobe.com/2006/mxml" 
       xmlns:controls="com.iwobanas.controls.*" 
       xmlns:dgc="com.iwobanas.controls.dataGridClasses.*" 
       dataProvider="{locator.vendorInvoices}"> 

<mx:Script> 
    <![CDATA[ 
     import com.model.PayablesLocator; 

     [Bindable] private var locator:PayablesLocator = PayablesLocator.getInstance(); 
    ]]> 
</mx:Script> 

<controls:columns> 

    <dgc:MDataGridColumn dataField="loadNumber" 
         headerText="Load"/> 

    <dgc:MDataGridColumn dataField="carrierName" 
         headerText="Carrier"/> 

    <mx:DataGridColumn dataField="vendorInvoiceNumber" 
         headerText="Vendor Invoice #" 
         rendererIsEditor="true" 
         editorDataField="vendorInvoiceNumber"> 
     <mx:itemRenderer> 
      <mx:Component> 
       <mx:HBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">       

        <mx:Script> 
         <![CDATA[ 
          protected function invoiceNumberInput_changeHandler(event:Event):void { 
           data.vendorInvoiceNumber = invoiceNumberInput.text; 
          } 
         ]]> 
        </mx:Script> 

        <mx:TextInput id="invoiceNumberInput" 
            text="{data.vendorInvoiceNumber}" 
            editable="true" 
            width="95%" 
            change="invoiceNumberInput_changeHandler(event)"/> 
       </mx:HBox> 
      </mx:Component> 
     </mx:itemRenderer> 
    </mx:DataGridColumn> 

    <mx:DataGridColumn dataField="vendorInvoiceDate" 
         headerText="Invoice Date" 
         rendererIsEditor="true" 
         editorDataField="vendorInvoiceDate"> 
     <mx:itemRenderer> 
      <mx:Component> 
       <mx:HBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle"> 

        <mx:Script> 
         <![CDATA[ 
          import mx.controls.Alert; 
          import mx.events.CalendarLayoutChangeEvent; 
          import mx.events.CloseEvent; 

          protected function invoiceDateChanged(event:CalendarLayoutChangeEvent):void { 
           data.vendorInvoiceDate = event.newDate; 
          } 
         ]]> 
        </mx:Script> 

        <mx:DateField id="vendorInvoiceDateInput" 
            selectedDate="{data.vendorInvoiceDate}" 
            editable="true" 
            width="95%" 
            change="invoiceDateChanged(event)"/>      
       </mx:HBox> 

      </mx:Component> 
     </mx:itemRenderer> 
    </mx:DataGridColumn> 

    <mx:DataGridColumn dataField="isSelected" 
         headerText="Select" 
         rendererIsEditor="true" 
         editorDataField="isSelected"> 
     <mx:itemRenderer> 
      <mx:Component> 
       <mx:HBox horizontalAlign="center" verticalAlign="middle">      

        <mx:Script> 
         <![CDATA[ 
          import com.controller.PayablesController; 

          private var control:PayablesController = PayablesController.getInstance(); 

          private function onCheckboxClick():void { 

           data.isSelected = selectionCheckBox.selected; 
           control.updateBatchSelections(); 
          } 
         ]]> 
        </mx:Script>  

        <mx:CheckBox id="selectionCheckBox" 
           selected="{data.isSelected}" 
           change="onCheckboxClick()"/> 
       </mx:HBox> 
      </mx:Component> 
     </mx:itemRenderer> 
    </mx:DataGridColumn> 

</controls:columns>

我試圖讓Tab順序爲每一行如下：供應商發票>發票日期>選擇，但是當我嘗試選項卡下一場就跳轉到該網址瀏覽器（在這種情況下是IE）。我嘗試了一些網上發現的東西，但沒有一個似乎能夠工作。

任何幫助將不勝感激。

- Charly

來源

2012-02-20 CreepingCharly

嗨查理，你可以列出你已經嘗試了一些東西（的tabIndex是：第一，）當發佈有關自定義組件的問題時，請包括一個API鏈接，我發現這個我相信是你正在使用的一個，但是如果我們不需要搜索，它會讓每個人都更容易http://reusable-fx.googlecode.com/svn/trunk/docs/com/iwobanas/controls/MDataGrid.html – shaunhusain 2012-02-20 20:59:56

啊我也想我知道我爲什麼建議贏了'沒有工作，爲什麼你嘗試過的其他東西可能不起作用。 DataGridColumn和其他網格列類基本上都是用於描述需要爲網格動態創建的UI組件的模型對象，所以您不是直接使用這些標記定義UIComponent，而是給它描述如何創建他們需要它們時。因此，您可能需要通過查看自定義的headerRenderer對象來適當地設置每個實例上的tabIndex – shaunhusain 2012-02-20 21:02:58

沒有內置的支持。如果您有可編輯的單元格，這將起作用，並且只有在您的編輯器實現了IFocusManagerComponent時，它纔會起作用。（在這種情況下，你的編輯被包裹在HBox裏面）。如果您使用的火花DataGrid中，你可以使用：http://squaredi.blogspot.com/2011/09/precision-focus-control-within-spark.html

來源

2012-02-22 23:37:03

感謝靈活。這是我最終能夠工作的。看起來，如果我們的商店最終可以搬到Spark，它會很好。 – CreepingCharly 2012-02-23 17:15:06

沒問題。僅供參考，沒有必要將您的編輯器包裝在HBox中，特別是因爲您在HBox中只有一個控制器。所以你可以使用 2012-02-23 23:46:58

得到的工作代碼：

<?xml version="1.0" encoding="utf-8"?> 
<controls:MDataGrid xmlns:mx="http://www.adobe.com/2006/mxml" 
       xmlns:controls="com.iwobanas.controls.*" 
       xmlns:dgc="com.iwobanas.controls.dataGridClasses.*" 
       dataProvider="{locator.vendorInvoices}" 
       editable="true"> 

<mx:Script> 
    <![CDATA[ 
     import com.model.PayablesLocator; 

     [Bindable] private var locator:PayablesLocator = PayablesLocator.getInstance(); 
    ]]> 
</mx:Script> 

<controls:columns> 

    <dgc:MDataGridColumn dataField="loadNumber" 
         headerText="Load" 
         editable="false"/> 

    <dgc:MDataGridColumn dataField="carrierName" 
         headerText="Carrier" 
         editable="false"/> 

    <mx:DataGridColumn dataField="vendorInvoiceNumber" 
         headerText="Vendor Invoice #" 
         rendererIsEditor="true" 
         editorDataField="value"> 
     <mx:itemRenderer> 
      <mx:Component> 
       <mx:HBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle" 
         implements="mx.managers.IFocusManagerComponent">      

        <mx:Script> 
         <![CDATA[ 
          [Bindable] public var value:String; 

          override public function drawFocus(draw:Boolean):void { 
           invoiceNumberInput.setFocus(); 
          } 
         ]]> 
        </mx:Script> 

        <mx:TextInput id="invoiceNumberInput" 
            text="{value}" 
            width="95%"/> 

       </mx:HBox> 
      </mx:Component> 
     </mx:itemRenderer> 
    </mx:DataGridColumn> 

    <mx:DataGridColumn dataField="vendorInvoiceDate" 
         headerText="Invoice Date" 
         rendererIsEditor="true" 
         editorDataField="value"> 
     <mx:itemRenderer> 
      <mx:Component> 
       <mx:HBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle" 
         implements="mx.managers.IFocusManagerComponent">      

        <mx:Script> 
         <![CDATA[ 
          [Bindable] public var value:Date; 

          override public function drawFocus(draw:Boolean):void { 
           vendorInvoiceDateInput.setFocus(); 
          } 
         ]]> 
        </mx:Script> 

        <mx:DateField id="vendorInvoiceDateInput" 
            selectedDate="{value}" 
            editable="true" 
            width="95%"/> 

       </mx:HBox> 
      </mx:Component> 
     </mx:itemRenderer> 
    </mx:DataGridColumn> 

    <mx:DataGridColumn editorDataField="isSelected" 
         headerText="Select" 
         rendererIsEditor="true">   
     <mx:itemRenderer> 
      <mx:Component> 

       <mx:HBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle" 
         implements="mx.controls.listClasses.IDropInListItemRenderer,mx.managers.IFocusManagerComponent"> 

        <mx:Script> 
         <![CDATA[ 
          import com.controller.PayablesController; 

          import mx.controls.dataGridClasses.DataGridListData; 
          import mx.controls.listClasses.BaseListData; 

          private var control:PayablesController = PayablesController.getInstance(); 

          private var _listData:DataGridListData; 
          [Bindable] public var isSelected:Boolean; 

          override public function drawFocus(draw:Boolean):void { 
           selectionCheckBox.setFocus(); 
          } 

          override public function get data():Object { 
           return super.data; 

          } 

          override public function set data(value:Object):void { 
           super.data = value; 
           selectionCheckBox.selected = data.isSelected 
          } 

          public function get listData():BaseListData { 
           return _listData; 
          } 

          public function set listData(value:BaseListData):void { 
           _listData = DataGridListData(value); 
          } 

          protected function onChange(event:Event):void { 
           data.isSelected = selectionCheckBox.selected; 
           control.updateBatchSelections(); 
          }        
         ]]> 
        </mx:Script> 

        <mx:CheckBox id="selectionCheckBox" change="onChange(event)"/> 

       </mx:HBox> 

      </mx:Component> 
     </mx:itemRenderer> 
    </mx:DataGridColumn> 

</controls:columns>

來源

2012-02-23 17:20:39 CreepingCharly

Flex 3 DataGrid Tab標籤訂單

回答

相關問題