http://livedocs.adobe.com/ Macromedia LiveDocs - online documentation with user feedback. Copyright 2009, Macromedia, Inc. 2009-11-25T14:17:56 en-us http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/fl/controls/dataGridClasses/DataGridCellEditor.html#68696 You can find DataGrid quickstarts here:<br>http://www.adobe.com/devnet/flash/quickstart/datagrid_pt1/<br>http://www.adobe.com/devnet/flash/quickstart/datagrid_pt2/ tderich 1 1 2007-06-19T14:46:41 http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/fl/controls/dataGridClasses/DataGridCellEditor.html#68583 11. Select File > New.<br />12. In the New Document dialog box that is displayed, select ActionScript File and then click the OK button.<br />13. In the script window, enter the following code to define the CustomCheckBoxCellEditor class:<br />// Based on class CellRenderer by Adobe Systems Incorporated.<br />package <br />{<br /> import fl.controls.ButtonLabelPlacement;<br /> import fl.controls.CheckBox;<br /> import fl.controls.DataGrid;<br /> import fl.controls.dataGridClasses.DataGridColumn;<br /> import fl.controls.LabelButton;<br /> import fl.controls.listClasses.CellRenderer;<br /> import fl.controls.listClasses.ListData;<br /> import fl.controls.listClasses.ICellRenderer;<br /> import fl.core.InvalidationType;<br /> import fl.core.UIComponent;<br /> import fl.data.DataProvider;<br /> import flash.display.DisplayObject;<br /> import flash.events.Event;<br /> import flash.events.MouseEvent;<br /> import flash.system.IME;<br /> <br /> [Style(name="icon", type="Class")]<br /> [Style(name="upIcon", type="Class")]<br /> [Style(name="downIcon", type="Class")]<br /> [Style(name="overIcon", type="Class")]<br /> [Style(name="disabledIcon", type="Class")]<br /> [Style(name="selectedDisabledIcon", type="Class")]<br /> [Style(name="selectedUpIcon", type="Class")]<br /> [Style(name="selectedDownIcon", type="Class")]<br /> [Style(name="selectedOverIcon", type="Class")]<br /> [Style(name="upSkin", type="Class")]<br /> [Style(name="downSkin", type="Class")]<br /> [Style(name="overSkin", type="Class")]<br /> [Style(name="disabledSkin", type="Class")]<br /> [Style(name="selectedDisabledSkin", type="Class")]<br /> [Style(name="selectedUpSkin", type="Class")]<br /> [Style(name="selectedDownSkin", type="Class")]<br /> [Style(name="selectedOverSkin", type="Class")]<br /> [Style(name="textFormat", type="flash.text.TextFormat")]<br /> [Style(name="disabledTextFormat", type="flash.text.TextFormat")]<br /> [Style(name="textPadding", type="Number", format="Length")]<br /><br /> public class CustomCheckBoxCellEditor extends CheckBox implements ICellRenderer {<br /> public var text:String;<br /> protected var _listData:ListData;<br /> protected var _data:Object;<br /> protected var _rowSelected:Boolean = true;<br /> protected var _showLabel:Boolean = false;<br /> protected var item_dg:DataGrid;<br /><br /> public function CustomCheckBoxCellEditor():void {<br /> super();<br /> focusEnabled = false;<br /> }<br /> <br /> private static var defaultStyles:Object = { icon:null,<br /> upIcon:"CheckBox_upIcon",downIcon:"CheckBox_downIcon",overIcon:"CheckBox_overIcon",<br /> disabledIcon:"CheckBox_disabledIcon",<br /> selectedDisabledIcon:"CheckBox_selectedDisabledIcon",<br /> focusRectSkin:null,<br /> focusRectPadding:null,<br /> selectedUpIcon:"CheckBox_selectedUpIcon",selectedDownIcon:"CheckBox_selectedDownIcon",selectedOverIcon:"CheckBox_selectedOverIcon",<br /> upSkin:"CellRenderer_upSkin",downSkin:"CellRenderer_downSkin",overSkin:"CellRenderer_overSkin",<br /> disabledSkin:"CellRenderer_disabledSkin",<br /> selectedDisabledSkin:"CellRenderer_selectedDisabledSkin",<br /> selectedUpSkin:"CellRenderer_selectedUpSkin",selectedDownSkin:"CellRenderer_selectedDownSkin",selectedOverSkin:"CellRenderer_selectedOverSkin",<br /> textFormat:null,<br /> disabledTextFormat:null,<br /> embedFonts:null,<br /> textPadding:5 };<br /> public static function getStyleDefinition():Object { return defaultStyles; }<br /> <br /> override public function setSize(width:Number,height:Number):void {<br /> super.setSize(width, height); <br /> }<br /> <br /> public function get listData():ListData {<br /> return _listData;<br /> } <br /><br /> public function set listData(value:ListData):void {<br /> _listData = value;<br /> text = _listData.label;<br /> label = (_showLabel)? _listData.label : "";<br /> setStyle("icon", _listData.icon);<br /> }<br /> <br /> public function get data():Object {<br /> return _data;<br /> } <br /><br /> public function set data(value:Object):void {<br /> _data = value;<br /> swapValue();<br /> drawNow();<br /> }<br /> <br /> public function get imeMode():String {<br /> return _imeMode;<br /> } <br /><br /> public function set imeMode(value:String):void {<br /> _imeMode = value;<br /> }<br /><br /> override public function get selected():Boolean {<br /> return super.selected;<br /> }<br /> <br /> override public function set selected(value:Boolean):void {<br /> swapValue();<br /> _rowSelected = value;<br /> }<br /> <br /> private function swapValue():void {<br /> var newValue:Boolean;<br /> // Get the name of the field in the data provider item associated with <br /> // the column being rendered<br /> item_dg = this.parent.parent.parent as DataGrid;<br /> var field_str:String = item_dg.getColumnAt(_listData.column).dataField;<br /> // Make sure the proper boolean value is set<br /> (_data[field_str]=="true" || _data[field_str]==1 || _data[field_str]==true)?<br /> newValue = false : newValue = true;<br /> // Update CellRenderer's appropriate values<br /> super.selected = newValue; // Status of the CheckBox<br /> text = String(newValue); // text property required to act as a DataGridCellEditor <br /> // The ListData object that handles the properties applied to the cell<br /> _listData = new ListData(String(newValue),<br /> _listData.icon,<br /> _listData.owner,<br /> _listData.index,<br /> _listData.row,<br /> _listData.column);<br /> // The DataGrid.dataProvider's item associated to the cell<br /> item_dg.editField(_listData.row,<br /> field_str,<br /> newValue);<br /> }<br /> <br /> override protected function toggleSelected(event:MouseEvent):void {<br /> // don't set selected or dispatch change event.<br /> swapValue();<br /> // Initiate an immediate draw operation<br /> drawNow();<br /> }<br /> <br /> override protected function drawLayout():void {<br /> var textPadding:Number = Number(getStyleValue("textPadding"));<br /> var textFieldX:Number = 0;<br /> // Align icon<br /> if (icon != null) {<br /> icon.x = textPadding;<br /> icon.y = Math.round((height-icon.height)>>1);<br /> textFieldX = icon.width + textPadding;<br /> }<br /> // Align text<br /> if (label.length > 0) {<br /> textField.visible = true;<br /> var textWidth:Number = Math.max(0, width - textFieldX - textPadding*2);<br /> textField.width = textWidth;<br /> textField.height = textField.textHeight + 4;<br /> textField.x = textFieldX + textPadding<br /> textField.y = Math.round((height-textField.height)>>1);<br /> } else {<br /> textField.visible = false;<br /> }<br /> // Size background<br /> background.width = width;<br /> background.height = height;<br /> }<br /> <br /> override protected function drawBackground():void{<br /> var styleName:String = (enabled) ? mouseState : "disabled";<br /> if (_rowSelected) {<br /> styleName = "selected"+styleName.substr(0,1).toUpperCase()+styleName.substr(1); <br /> }<br /> styleName += "Skin";<br /> var bg:DisplayObject = background;<br /> background = getDisplayObjectInstance(getStyleValue(styleName));<br /> addChildAt(background, 0);<br /> if (bg != null && bg != background) { removeChild(bg); }<br /> }<br /> }<br />} amadurell 0 0 2007-06-18T05:09:43 http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/fl/controls/dataGridClasses/DataGridCellEditor.html#68582 8. Select File > New.<br />9. In the New Document dialog box that is displayed, select ActionScript File and then click the OK button.<br />10. In the script window, enter the following code to define the CustomCheckBoxCellRenderer class:<br />// Based on class CellRenderer by Adobe Systems Incorporated.<br />package <br />{<br /> import fl.controls.ButtonLabelPlacement;<br /> import fl.controls.DataGrid;<br /> import fl.controls.dataGridClasses.DataGridColumn;<br /> import fl.controls.listClasses.ListData;<br /> import fl.controls.listClasses.ICellRenderer;<br /> import fl.controls.LabelButton;<br /> import fl.core.UIComponent;<br /> import flash.events.Event;<br /> import flash.events.MouseEvent;<br /> import fl.controls.CheckBox;<br /> import fl.controls.listClasses.CellRenderer;<br /> import flash.display.DisplayObject;<br /> <br /> [Style(name="icon", type="Class")]<br /> [Style(name="upIcon", type="Class")]<br /> [Style(name="downIcon", type="Class")]<br /> [Style(name="overIcon", type="Class")]<br /> [Style(name="disabledIcon", type="Class")]<br /> [Style(name="selectedDisabledIcon", type="Class")]<br /> [Style(name="selectedUpIcon", type="Class")]<br /> [Style(name="selectedDownIcon", type="Class")]<br /> [Style(name="selectedOverIcon", type="Class")]<br /> [Style(name="upSkin", type="Class")]<br /> [Style(name="downSkin", type="Class")]<br /> [Style(name="overSkin", type="Class")]<br /> [Style(name="disabledSkin", type="Class")]<br /> [Style(name="selectedDisabledSkin", type="Class")]<br /> [Style(name="selectedUpSkin", type="Class")]<br /> [Style(name="selectedDownSkin", type="Class")]<br /> [Style(name="selectedOverSkin", type="Class")]<br /> [Style(name="textFormat", type="flash.text.TextFormat")]<br /> [Style(name="disabledTextFormat", type="flash.text.TextFormat")]<br /> [Style(name="textPadding", type="Number", format="Length")]<br /><br /> public class CustomCheckBoxCellRenderer extends CheckBox implements ICellRenderer {<br /> protected var _listData:ListData;<br /> protected var _data:Object;<br /> protected var _rowSelected:Boolean;<br /> protected var _showLabel:Boolean = false; // Change this to true if you want the label to be shown<br /><br /> public function CustomCheckBoxCellRenderer():void {<br /> super();<br /> focusEnabled = false;<br /> }<br /> <br /> private static var defaultStyles:Object = { icon:null,<br /> upIcon:"CheckBox_upIcon",downIcon:"CheckBox_downIcon",overIcon:"CheckBox_overIcon",<br /> disabledIcon:"CheckBox_disabledIcon",<br /> selectedDisabledIcon:"CheckBox_selectedDisabledIcon",<br /> focusRectSkin:null,<br /> focusRectPadding:null,<br /> selectedUpIcon:"CheckBox_selectedUpIcon",selectedDownIcon:"CheckBox_selectedDownIcon",selectedOverIcon:"CheckBox_selectedOverIcon",<br /> upSkin:"CellRenderer_upSkin",downSkin:"CellRenderer_downSkin",overSkin:"CellRenderer_overSkin",<br /> disabledSkin:"CellRenderer_disabledSkin",<br /> selectedDisabledSkin:"CellRenderer_selectedDisabledSkin",<br /> selectedUpSkin:"CellRenderer_selectedUpSkin",selectedDownSkin:"CellRenderer_selectedDownSkin",selectedOverSkin:"CellRenderer_selectedOverSkin",<br /> textFormat:null,<br /> disabledTextFormat:null,<br /> embedFonts:null,<br /> textPadding:5 };<br /> public static function getStyleDefinition():Object { return defaultStyles; }<br /> <br /> override public function setSize(width:Number,height:Number):void {<br /> super.setSize(width, height); <br /> }<br /> <br /> public function get listData():ListData {<br /> return _listData;<br /> } <br /><br /> public function set listData(value:ListData):void {<br /> _listData = value;<br /> label = (_showLabel)? _listData.label : "";<br /> setStyle("icon", _listData.icon);<br /> }<br /> <br /> public function get data():Object {<br /> return _data;<br /> } <br /><br /> public function set data(value:Object):void {<br /> _data = value;<br /> }<br /> <br /> override public function get selected():Boolean {<br /> return super.selected;<br /> }<br /> <br /> override public function set selected(value:Boolean):void {<br /> // Get the name of the field in the data provider item associated with <br /> // the column being rendered<br /> var item_dg:DataGrid = this.parent.parent.parent as DataGrid;<br /> var field_str:String = item_dg.getColumnAt(_listData.column).dataField;<br /> // Make sure the proper boolean value is set<br /> (_data[field_str]=="true" || _data[field_str]==1 || _data[field_str]==true)?<br /> super.selected=true : super.selected=false;<br /> _rowSelected = value;<br /> }<br /> <br /> override protected function toggleSelected(event:MouseEvent):void {<br /> // don't set selected or dispatch change event.<br /> }<br /> <br /> override protected function drawLayout():void {<br /> var textPadding:Number = Number(getStyleValue("textPadding"));<br /> var textFieldX:Number = 0;<br /> // Align icon<br /> if (icon != null) {<br /> icon.x = textPadding;<br /> icon.y = Math.round((height-icon.height)>>1);<br /> textFieldX = icon.width + textPadding;<br /> }<br /> // Align text<br /> if (label.length > 0) {<br /> textField.visible = true;<br /> var textWidth:Number = Math.max(0, width - textFieldX - textPadding*2);<br /> textField.width = textWidth;<br /> textField.height = textField.textHeight + 4;<br /> textField.x = textFieldX + textPadding<br /> textField.y = Math.round((height-textField.height)>>1);<br /> } else {<br /> textField.visible = false;<br /> }<br /> // Size background<br /> background.width = width;<br /> background.height = height;<br /> }<br /> <br /> override protected function drawBackground():void{<br /> var styleName:String = (enabled) ? mouseState : "disabled";<br /> if (_rowSelected) {<br /> styleName = "selected"+styleName.substr(0,1).toUpperCase()+styleName.substr(1); <br /> }<br /> styleName += "Skin";<br /> var bg:DisplayObject = background;<br /> background = getDisplayObjectInstance(getStyleValue(styleName));<br /> addChildAt(background, 0);<br /> if (bg != null && bg != background) { removeChild(bg); }<br /> }<br /> }<br />}<br />(continues in next post) amadurell 0 0 2007-06-18T05:07:57 http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/fl/controls/dataGridClasses/DataGridCellEditor.html#68581 Here's an example of an editable DataGrid using custom CellRenderers to display and edit one of its columns using a CheckBox.<br /><br />1. Select File > New.<br />2. In the New Document dialog box that is displayed, select Flash File (ActionScript 3.0), and then click OK.<br />3. Select Window > Components to display the Components panel.<br />4. In the Components panel, drag a CheckBox and a DataGrid components to the Library.<br />5. Select Frame 1 of Layer 1 in the Timeline, and select Window > Actions.<br />6. Type the following script in the Actions panel:<br />import fl.controls.DataGrid;<br />import fl.data.DataProvider;<br />var myDP:DataProvider = new DataProvider;<br />myDP.addItem({fname:"John", lname:"Doe", acp:true});<br />myDP.addItem({fname:"Jane", lname:"Doe", acp:false});<br />myDP.addItem({fname:"Gene", lname:"Doe", acp:false});<br />myDP.addItem({fname:"Ginny", lname:"Doe", acp:true});<br />var myDG:DataGrid = new DataGrid();<br />myDG.width = 300;<br />myDG.height = 105;<br />myDG.x = (stage.stageWidth - myDG.width)/2;<br />myDG.y = (stage.stageHeight - myDG.height)/2;<br />myDG.addColumn("fname");<br />myDG.addColumn("lname");<br />myDG.addColumn("acp");<br />myDG.getColumnAt(0).headerText = "First Name";<br />myDG.getColumnAt(1).headerText = "Last Name";<br />myDG.getColumnAt(2).headerText = "ACP";<br />myDG.getColumnAt(2).cellRenderer = CustomCheckBoxCellRenderer;<br />myDG.getColumnAt(2).itemEditor = CustomCheckBoxCellEditor;<br />myDG.editable = true;<br />myDG.dataProvider = myDP;<br />addChild(myDG);<br />7. Select File > Save. Give the file a name and click the OK button.<br />(continues in next post) amadurell 0 0 2007-06-18T05:06:06