Update to the database - FLEX - mysql

I am working with a payment tracking mobile app in Flash Builder 4.6. I am using Flex data management system. I have few issues which are addressed as below:
When I add a contact and click save button, the new contact will be update instantly in the database. The "Add" "Delete" "Read" work well, only when comes to "Update", it just won't work. I clicked on the save button, there is no response - no error code at all.
The code (AddEditView)
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:valueObjects="valueObjects.*"
xmlns:studentsservice="services.studentsservice.*"
title="Add Student" add="view1_addHandler(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.rpc.events.ResultEvent;
protected function saveBtn_clickHandler(event:MouseEvent):void
{
if (currentState=="Add"){
var students:Students = new Students();
students.firstname = firstnameTextInput.text;
students.lastname = lastnameTextInput.text;
students.cellphone = cellphoneTextInput.text;
students.email = emailTextInput.text;
students.address = addressTextInput.text;
students.class_id = parseInt(classidTextInput.text);
students.photofile = photofileTextInput.text;
createStudentsResult.token = studentsService.createStudents(students);
studentsService.commit();
} else {
/* updateStudentsResult.token = studentsService.updateStudents(students);
studentsService.getDataManager(studentsService.DATA_MANAGER_STUDENTS).autoCommit=false; */
/* students.firstname = firstnameTextInput.text;
students.lastname = lastnameTextInput.text;
students.cellphone = cellphoneTextInput.text;
students.email = emailTextInput.text;
students.address = addressTextInput.text;
students.class_id = parseInt(classidTextInput.text);
students.photofile = photofileTextInput.text; */
updateStudentsResult.token = studentsService.updateStudents(students);
/* studentsService.getDataManager(studentsService.DATA_MANAGER_STUDENTS).autoCommit=false */;
}
}
protected function createStudentsResult_resultHandler(event:ResultEvent):void
{
navigator.replaceView(StudentDetail,event.result as int);
}
protected function cancelBtn_clickHandler(event:MouseEvent):void
{
navigator.popView();
studentsService.commit();
}
protected function view1_addHandler(event:FlexEvent):void
{
if(data == null){
currentState ="Add";
} else {
currentState ="Edit";
students = data as Students;
title ="Edit Student";
}
}
protected function updateStudentsResult_resultHandler(event:ResultEvent):void
{
navigator.popView();
}
]]>
</fx:Script>
<s:states>
<s:State name="Add"/>
<s:State name="Edit"/>
</s:states>
<fx:Declarations>
<valueObjects:Students id="students"/>
<s:CallResponder id="createStudentsResult" result="createStudentsResult_resultHandler(event)"/>
<studentsservice:StudentsService id="studentsService"/>
<s:CallResponder id="updateStudentsResult" result="updateStudentsResult_resultHandler(event)"/>
</fx:Declarations>
<s:actionContent>
<s:Button id="cancelBtn" label="Cancel" click="cancelBtn_clickHandler(event)"/>
<s:Button id="saveBtn" label="Save" click="saveBtn_clickHandler(event)"/>
</s:actionContent>
<s:Scroller left="0" right="0" top="0" bottom="0">
<s:VGroup width="100%" paddingLeft="10" paddingRight="10">
<s:Label paddingTop="15" text="First Name"/>
<s:TextInput id="firstnameTextInput" width="100%" text="#{students.firstname}"/>
<s:Label paddingTop="15" text="Last Name"/>
<s:TextInput id="lastnameTextInput" width="100%" text="#{students.lastname}"/>
<s:Label paddingTop="15" text="Cellphone"/>
<s:TextInput id="cellphoneTextInput" width="100%" text="#{students.cellphone}"/>
<s:Label paddingTop="15" text="Email"/>
<s:TextInput id="emailTextInput" width="100%" text="#{students.email}"/>
<s:Label paddingTop="15" text="Address"/>
<s:TextInput id="addressTextInput" width="100%" text="#{students.address}"/>
<s:Label paddingTop="15" text="Class ID"/>
<s:TextInput id="classidTextInput" width="100%" text="{students.class_id}"/>
<s:Label paddingTop="15" text="Photo file"/>
<s:TextInput id="photofileTextInput" width="100%" text="#{students.photofile}"/>
</s:VGroup>
</s:Scroller>
</s:View>
The code (StudentView)
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:valueObjects="valueObjects.*"
xmlns:studentsservice="services.studentsservice.*"
title="Add Student" add="view1_addHandler(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.rpc.events.ResultEvent;
protected function saveBtn_clickHandler(event:MouseEvent):void
{
if (currentState=="Add"){
var students:Students = new Students();
students.firstname = firstnameTextInput.text;
students.lastname = lastnameTextInput.text;
students.cellphone = cellphoneTextInput.text;
students.email = emailTextInput.text;
students.address = addressTextInput.text;
students.class_id = parseInt(classidTextInput.text);
students.photofile = photofileTextInput.text;
createStudentsResult.token = studentsService.createStudents(students);
studentsService.commit();
} else {
updateStudentsResult.token = studentsService.updateStudents(students);
}
}
protected function createStudentsResult_resultHandler(event:ResultEvent):void
{
navigator.replaceView(StudentDetail,event.result as int);
}
protected function cancelBtn_clickHandler(event:MouseEvent):void
{
navigator.popView();
studentsService.commit();
}
protected function view1_addHandler(event:FlexEvent):void
{
if(data == null){
currentState ="Add";
} else {
currentState ="Edit";
students = data as Students;
title ="Edit Student";
}
}
protected function updateStudentsResult_resultHandler(event:ResultEvent):void
{
navigator.popView();
}
]]>
</fx:Script>
<s:states>
<s:State name="Add"/>
<s:State name="Edit"/>
</s:states>
<fx:Declarations>
<valueObjects:Students id="students"/>
<s:CallResponder id="createStudentsResult" result="createStudentsResult_resultHandler(event)"/>
<studentsservice:StudentsService id="studentsService"/>
<s:CallResponder id="updateStudentsResult" result="updateStudentsResult_resultHandler(event)"/>
</fx:Declarations>
<s:actionContent>
<s:Button id="cancelBtn" label="Cancel" click="cancelBtn_clickHandler(event)"/>
<s:Button id="saveBtn" label="Save" click="saveBtn_clickHandler(event)"/>
</s:actionContent>
<s:Scroller left="0" right="0" top="0" bottom="0">
<s:VGroup width="100%" paddingLeft="10" paddingRight="10">
<s:Label paddingTop="15" text="First Name"/>
<s:TextInput id="firstnameTextInput" width="100%" text="#{students.firstname}"/>
<s:Label paddingTop="15" text="Last Name"/>
<s:TextInput id="lastnameTextInput" width="100%" text="#{students.lastname}"/>
<s:Label paddingTop="15" text="Cellphone"/>
<s:TextInput id="cellphoneTextInput" width="100%" text="#{students.cellphone}"/>
<s:Label paddingTop="15" text="Email"/>
<s:TextInput id="emailTextInput" width="100%" text="#{students.email}"/>
<s:Label paddingTop="15" text="Address"/>
<s:TextInput id="addressTextInput" width="100%" text="#{students.address}"/>
<s:Label paddingTop="15" text="Class ID"/>
<s:TextInput id="classidTextInput" width="100%" text="{students.class_id}"/>
<s:Label paddingTop="15" text="Photo file"/>
<s:TextInput id="photofileTextInput" width="100%" text="#{students.photofile}"/>
</s:VGroup>
</s:Scroller>
</s:View>
If someone has ever solved similar problem like this, please guide me thru this. Thank you in advance.

My suspision studentsService.commit(); is saving the data into the DB, if the currentState='edit' this code is unreachable. so, in the else block also you have to do a studentsService.commit();

Do you try adding listeners on your service object (RemoteObject) for "invoke", "result", or "fault" to find out what was happening?
I think the request didn't send as you wish. Check out the FaultEvent for more details.

Related

Update total value datagrid when drag drop values - Adobe Flex

I have two datagrid, and each has total label. This label sums all the values of each datagrid.
When I drag and drop a value from one datagrid to another, the two label total must be updated according to the values of each datagrid.
However, a sum is delayed.
The code:
<?xml version="1.0"?>
<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"
width="650"
creationComplete="initApp();">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.DataGridEvent;
import mx.events.DragEvent;
private function initApp():void {
dgA.dataProvider = new ArrayCollection([
{Expense:'Electricity', Value:300, minNo: 100, maxNo: 500},
{Expense:'Phone', Value:200, minNo: 50, maxNo: 300},
{Expense:'Contract A', Value:5000, minNo: 4000, maxNo: 6000},
{Expense:'Contract B', Value:6000, minNo: 4500, maxNo: 8500},
{Expense:'Contract C', Value:3000, minNo: 2500, maxNo: 3500}
]);
dgB.dataProvider = new ArrayCollection([]);
sumA();
}
private function disableEditing(event:DataGridEvent):void {
if(event.columnIndex==0)
{
event.preventDefault();
}
}
public function sumA():void {
var sum:Number = 0;
for (var k:String in dgA.dataProvider){
sum += dgA.dataProvider[k]['Value'];
}
totalA.text = sum.toString();
}
public function sumB():void {
var sum:Number = 0;
for (var k:String in dgB.dataProvider){
sum += dgB.dataProvider[k]['Value'];
}
totalB.text = sum.toString();
}
public function dragDropHandler(event:DragEvent):void {
sumA();
sumB();
}
]]>
</fx:Script>
<s:HGroup>
<s:VGroup>
<s:Label text="Cost 1"/>
<mx:DataGrid id="dgA"
allowMultipleSelection="true"
dragEnabled="true"
dropEnabled="true"
dragMoveEnabled="true"
dragDrop="dragDropHandler(event)">
<mx:columns>
<mx:DataGridColumn dataField="Expense"/>
<mx:DataGridColumn dataField="Value"/>
</mx:columns>
</mx:DataGrid>
<s:Form>
<s:FormItem label="Total">
<s:Label id="totalA"/>
</s:FormItem>
</s:Form>
</s:VGroup>
<s:VGroup>
<s:Label text="Cost 2"/>
<mx:DataGrid id="dgB"
allowMultipleSelection="true"
dragEnabled="true"
dropEnabled="true"
dragMoveEnabled="true"
editable="true"
itemEditBeginning="disableEditing(event);"
dragDrop="dragDropHandler(event)">
<mx:columns>
<mx:DataGridColumn dataField="Expense"/>
<mx:DataGridColumn dataField="Value" editorDataField="value">
<mx:itemEditor>
<fx:Component>
<mx:NumericStepper stepSize="1" width="35" height="20">
<fx:Script>
<![CDATA[
override public function set data(value:Object):void
{
super.data = value;
if (value && value.hasOwnProperty("minNo")) {
minimum = value.minNo;
}
if (value && value.hasOwnProperty("maxNo")) {
maximum = value.maxNo;
}
}
]]>
</fx:Script>
</mx:NumericStepper>
</fx:Component>
</mx:itemEditor>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
<s:Form>
<s:FormItem label="Total">
<s:Label id="totalB"/>
</s:FormItem>
</s:Form>
</s:VGroup>
</s:HGroup>
</s:Application>
Use callLater() method to call the sum method from dragDropHandler as below
public function dragDropHandler(event:DragEvent):void {
callLater(doTotal);
}
public function doTotal():void{
sumA();
sumB();
}
I tested it and it is working fine for me.

Checkbox not checked in dropdown itemrendere flex

I have DropDownlist which have Itemrenderer like following:
<s:DropDownList dataProvider="{testList}" labelField="test"
itemRenderer="DropDownSelectRenderer"/>
ItemRenderer:
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" >
<fx:Script>
<![CDATA[
protected function onChange(event:Event):void
{
trace("checked");
}
]]>
</fx:Script>
<s:CheckBox id="chkBox" selected="{data.selected}" change="onChange(event)" />
<s:Label id="lblCon" fontSize="14" text="{data.test}" />
</s:ItemRenderer>
I want the CheckBox chkBox change and label lblCon on a click event,
but When I open the Dropdown and try to click on the CheckBox, the DropDown is closed and the CheckBox is not checked.
Any help is appreciated.
You might want to use PopUpButton as below:
<?xml version="1.0"?>
<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">
<fx:Script><![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var testList:ArrayCollection = new ArrayCollection([
{"test":"Test A", "selected": false},
{"test":"Test B", "selected": true},
{"test":"Test C", "selected": false},
{"test":"Test D", "selected": false}
]);
protected function closeButtonClickHandler(event:MouseEvent):void {
testPopUp.close();
}
]]></fx:Script>
<mx:PopUpButton id="testPopUp"
width="150">
<mx:popUp>
<mx:VBox width="150" backgroundColor="0xd3d3d3">
<mx:List id="list"
dataProvider="{testList}"
height="{testList.length * 25}"
width="100"
borderStyle="none">
<mx:itemRenderer>
<fx:Component>
<mx:CheckBox height="20">
<fx:Script>
<![CDATA[
override public function set data(value:Object):void
{
super.data = value;
if (value && value.test)
{
super.label = value.test;
super.selected = value.selected;
}
}
]]>
</fx:Script>
</mx:CheckBox>
</fx:Component>
</mx:itemRenderer>
</mx:List>
<mx:Button label="Close"
click="closeButtonClickHandler(event)"/>
</mx:VBox>
</mx:popUp>
</mx:PopUpButton>
</s:Application>

Change Background Color of datagrid cell based on more than one condition in Flex

Hi I'm very new to Adobe Flex, apologize if my question sounds stupid. Anyhow here it is.
I am trying simple datagrid which checks basically 2 conditions
1) If the Artist is 01 and Album is 'Album 01' set Background to corresponding cell in Column 'Year'.
With my below code 'set Style' to Background Color as property is not working but changing the font color is working and secondly i am not sure how to write the code to get the above nested conditions working? If anybody could help me in this aspect i would be really be grateful.
Thank you! in Advance.
Below is the code:
Newdatagrid.mxml
<?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" minHeight="600" >
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
[Bindable]
public static var initDG:ArrayCollection = new ArrayCollection([
{Artist:'01', Album:'Album 01', Year:'2008'},
{Artist:'01', Album:'Album 02', Year:'2009'},
{Artist:'03', Album:'Album 03', Year:'2007'},
{Artist:'03', Album:'Album 04', Year:'2003'},
]);
]]>
</fx:Script>
<s:VGroup>
<s:DataGrid id="myGrid" width="360" dataProvider="{initDG}">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="Artist" headerText="Artist" itemRenderer="CellRenderer"/>
<s:GridColumn dataField="Album" headerText="Album" itemRenderer="CellRenderer"/>
<s:GridColumn dataField="Year" headerText="Year" itemRenderer="CellRenderer"/>
</s:ArrayList>
</s:columns>
</s:DataGrid>
</s:VGroup>
</s:Application>
Renderer:
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
implements="mx.controls.listClasses.IDropInListItemRenderer">
<fx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
import mx.controls.Alert;
private var _listData:BaseListData;
[Bindable]private var isSelected:Boolean = false;
override public function set data( value:Object ) : void
{
super.data = value;
lblData.text = data[column.dataField];
if (data[column.dataField].valueOf() >= 2008){
//styleName="myStyles.BgColor";
setStyle('backgroundColor',0xFFFF00);
}else{
setStyle('backgroundColor',0x32CD32);
}
}
[Bindable]public function get listData() : BaseListData
{
return _listData;
}
public function set listData( value:BaseListData ) : void
{
_listData = value;
}
]]>
</fx:Script>
<s:Label id="lblData" top="9" left="7" width="100%" height="100%" textAlign="center"/>
</s:GridItemRenderer>
My Desired Output: Condition: If Artist=01 and Year >= 2008 then cell Background of Year change to Red
The class GridItemRenderer has no such style backgroundColor.
So it has no effect setting it.
What you can do is to add a Rect to the ItemRenderer and set its color property according to your condition.
an example would be something like:
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true">
<fx:Script>
<![CDATA[
override public function prepare(hasBeenRecycled:Boolean):void {
if(this.data) {
if(this.data.Year >= 2008 && this.data.Artist == '01' && column.dataField == 'Year')
bgColor.color = 0xFF0000;
else
bgColor.color = 0xFFFFFF;
}
}
]]>
</fx:Script>
<s:Rect top="0" bottom="0" left="0" right="0">
<s:fill>
<s:SolidColor id="bgColor" color="0xFFFFFF"/>
</s:fill>
</s:Rect>
<s:Label id="labelDisplay" top="9" left="7"/>
</s:GridItemRenderer>
<?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" minWidth="955" minHeight="600" >
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
[Bindable]
public static var initDG:ArrayCollection = new ArrayCollection([
{Artist:'01', Album:'Album 01', Year:'2008'},
{Artist:'01', Album:'Album 02', Year:'2009'},
{Artist:'03', Album:'Album 03', Year:'2007'},
{Artist:'03', Album:'Album 04', Year:'2003'},
]);
]]>
</fx:Script>
<s:VGroup>
<s:DataGrid id="myGrid" width="360" dataProvider="{initDG}">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="Artist" headerText="Artist"/>
<s:GridColumn dataField="Album" headerText="Album"/>
<s:GridColumn dataField="Year" headerText="Year" itemRenderer="CellRenderer"/>
</s:ArrayList>
</s:columns>
</s:DataGrid>
</s:VGroup>
</s:WindowedApplication>
----------------------------CellRenderer.mxml------------------------
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true">
<fx:Script>
<![CDATA[
override public function prepare(hasBeenRecycled:Boolean):void {
lblData.text = data[column.dataField]
if(this.data) {
lblData.text = data[column.dataField];
if(this.data.Year >= 2008&&this.data.Artist==01)
bgColor.color = 0xFF0000;
else
bgColor.color = 0xFFFFFF;
}
}
]]>
</fx:Script>
<s:Rect top="0" bottom="0" left="0" right="0">
<s:fill>
<s:SolidColor id="bgColor" color="0xFFFFFF"/>
</s:fill>
</s:Rect>
<s:Label id="lblData" top="9" left="7" width="100%" height="100%" textAlign="center"/>
</s:GridItemRenderer>

How to populate the combobox with the header Text of the datagrid dynamically in flex 4?

I have a button "get data" on clicking which my data grid gets populated. I want to populate the combobox at the same time with the column name of the data grid. On generating call, the result are getting stored in the last result, whihc then i am storing to the array .
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.events.ListEvent;
import mx.rpc.events.ResultEvent;
import services.ServiceManager;
import spark.events.IndexChangeEvent;
[Bindable] public var ArrColl_selectOptionComboBox:ArrayCollection = new ArrayCollection;
[Bindable] public var SelectOption:ArrayCollection = new ArrayCollection;
[Bindable] public var mainArrColl:ArrayCollection = new ArrayCollection;
[Bindable] public var DGDataProvider:ArrayCollection = new ArrayCollection;
[Bindable] public var DGDataProvider1:ArrayCollection = new ArrayCollection;
public function clear():void
{
DGDataProvider = new ArrayCollection;
}
//clicking on the Get Data button to retrieve from the Jiraissue
protected function button_clickHandler(event:MouseEvent):void
{
getAllJiraissueResult2.token=jiraissueService1.getAllJiraissue();
}
protected function getAllJiraissueResult2_resultHandler(event:ResultEvent):void
{
mainArrColl = getAllJiraissueResult2.lastResult as ArrayCollection;
DGDataProvider = mainArrColl;
}
//protected function Combobox_Option_changeHandler(event:ListEvent):void
//{
//myLabel.text = "You selected: " + ComboBox(event.target).selectedItem.label;
//Value.prompt="Select Value";
//Value.selectedIndex=-1; // reset so prompt shows
//}
]]>
</fx:Script>
<fx:Declarations>
<jiraissueservice1:JiraissueService1 id="jiraissueService1" fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)" showBusyCursor="true"/>
<s:CallResponder id="getAllJiraissueResult2" result="getAllJiraissueResult2_resultHandler(event)"/>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Button x="59" y="49" label="GET DATA" id="button" click="button_clickHandler(event)"/>
<mx:DataGrid x="60" y="299" width="800" id="dataGrid" dataProvider="{DGDataProvider}">
<mx:columns>
<mx:DataGridColumn headerText="pkey" dataField="pkey"/>
<mx:DataGridColumn headerText="PROJECT" dataField="pname"/>
<mx:DataGridColumn headerText="CREATED" dataField="CREATED"/>
<mx:DataGridColumn headerText="defectType" dataField="stringvalue"/>
<mx:DataGridColumn headerText="Reporter" dataField="REPORTER"/>
<mx:DataGridColumn headerText="ASSIGNEE" dataField="ASSIGNEE"/>
<mx:DataGridColumn headerText="SLA" dataField="SLA"/>
</mx:columns>
</mx:DataGrid>
<s:Button x="214" y="49" label="RESET" click="clear()"/>
<s:Button x="557" y="168" label="Button"/>
<mx:ComboBox id="Combobox_Option" width="201" dataProvider="{SelectOption}" labelField="label"
prompt="Select Option"
x="59" y="169"/>
<mx:ComboBox id="Value" width="201" labelField="label"
prompt="Select Value" dataProvider="{DGDataProvider1}"
x="308" y="169"/>
<s:Label id="myLabel" text="You selected:" fontWeight="bold" x="59" y="275"/>
If I have understood your question correctly you just want to populate your combobox with datagrid's column names after getting the data. If it is so you can use "columns" property of your grid as dataprovider of the combobox. The "labelField" property should be set to "headerText". After clearing the grid you set the dataprovider of the cb to null.
Here is a simple code:
<?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" minHeight="600">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.CollectionEvent;
[Bindable]private var dp:ArrayCollection = new ArrayCollection([
{artist:"Pavement", album:"Slanted and Enchanted", year:"2010", price:39.1},
{artist:"ABBA", album:"Ring Ring", year:"1973", price:45.2},
{artist:"The Betles", album:"Please Please Me", year:"1963", price:29.1}]);
private function onBtnLoad():void
{
myGrid.dataProvider = dp;
cbCategories.dataProvider = myGrid.columns;
cbCategories.labelField = "headerText";
}
private function onBtnReset():void
{
myGrid.dataProvider = null;
cbCategories.selectedIndex = -1;
cbCategories.dataProvider = null;
}
]]>
</fx:Script>
<s:VGroup x="70" y="50">
<s:DataGrid id="myGrid" width="420" height="100" >
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="artist" headerText="Artist's name" width="150"/>
<s:GridColumn dataField="album" headerText="Album"/>
<s:GridColumn dataField="year" headerText="Year" width="50"/>
<s:GridColumn dataField="price" headerText="Price" width="50"/>
</s:ArrayList>
</s:columns>
</s:DataGrid>
<s:HGroup>
<s:Button id="btnLoad" label="Load Data" click="onBtnLoad()"/>
<s:Button id="btnReset" label="Reset" click="onBtnReset()"/>
</s:HGroup>
<s:HGroup verticalAlign="bottom">
<s:Label text="Categories:" width="70"/>
<s:ComboBox id="cbCategories"/>
</s:HGroup>
</s:VGroup>
</s:Application>

Flex 3 DataGrid Tab Order

I've been trying to get the tab order to work on this datagrid for some time now and I can't figure out what I am doing wrong. Can anyone spot it?
<?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>
I'm trying to get the tab order as follows for each row: Vendor Invoice > Invoice Date > Select, but when I try to tab to the next field it jumps to the URL of the browser (IE in this case). I've tried a bunch of things found on the net, but none of them have seemed to work.
Any help would be greatly appreciated.
--Charly
There is no built in support for this. This will work if you have editable cells, and that too it will only work if your editors implement IFocusManagerComponent. (In this case your editors are wrapped inside HBoxes which do not). If you were using the spark datagrid, you could use : http://squaredi.blogspot.com/2011/09/precision-focus-control-within-spark.html
Resulting working code:
<?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>