FLEX dynamically created DataGrid using AS

2010-03-30  来源:本站原创  分类:Flash  人气:839 

<? Xml version = "1.0" encoding = "utf-8"?>
<Mx: Application xmlns: mx = " http://www.adobe.com/2006/mxml "Layout =" absolute ">
<mx:Script>
<! [CDATA [
import mx.collections.ArrayCollection;
import mx.controls.DataGrid;
import mx.events.ListEvent;
import mx.controls.Alert;
[Bindable]
private var dgDataArr: Array = [(name: "Jon", job: "officer"),
(Name: "James", job: "seller"),
(Name: "Jodon", job: "manager")];

private function itemClickHandler (e: ListEvent): void
(
Alert.show (e.target.toString ());
)

]]>
</ Mx: Script>
<mx:Component>
<mx:ComboBox dataProvider="{dt}" editable="true">
<mx:Script>
<! [CDATA [
private var dt: Array = ["officer", "seller", "manager"];
]]>
</ Mx: Script>
</ Mx: ComboBox>
</ Mx: Component>
<mx:DataGrid width="100%" x="10" y="20" fontSize="14" dataProvider="{dgDataArr}" editable="true" itemClick="itemClickHandler(event)">
<mx:columns>
<mx:DataGridColumn dataField="name" editable="false" />
<mx:DataGridColumn dataField="job" itemEditor="{comboboxEditor}">
</ Mx: DataGridColumn>
</ Mx: columns>
</ Mx: DataGrid>
</ Mx: Application>
Code to achieve is to create a DataGrid, in which job field you can edit and customize the editor is a ComboBox. <! - StartFragment ->

<! - StartFragment ->

Now look at how to use AS instead of MXML to create the same DataGrid.

1. The first to achieve this one:

View source

Print Help

1. < mx:DataGrid x = "10" y = "20" editable = "true" width = "100%" fontSize = "14" dataProvider = "{dgDataArr}" itemClick = "itemClickHandler(event)" ></ mx:DataGrid >

AS written something like this:

View source

Print Help

01. private function init(): void

02. {

03. var dgData:ArrayCollection = new ArrayCollection(dgDataArr);

04. var dataGrid:DataGrid = new DataGrid();

05. dataGrid.x = 10 ;

06. dataGrid.y = 20 ;

07. dataGrid.editable = true ;

08. dataGrid.percentWidth = 100 ;

09. dataGrid.setStyle( "fontSize" , 14 );

10. dataGrid.dataProvider = dgDataArr;

11. dataGrid.addEventListener(ListEvent.ITEM_CLICK, itemClickHandler);

12. addChild(dataGrid);

13. }

Can be seen in uniform in MXML using the XX = "" form, but written in AS are different. I did not read the book, when it started, confused, can not dataGrid.fontSize = 14 how to write it.

See next document, just know that behind each of the properties of MXML components three categories:

1.Properties normal properties, such as xy width, etc., written in AS is dataGrid.x = 10

2.Styles style attributes such as fontSize backgroundColor, etc., need to setStyle () settings, such as dataGrid.setStyle ("fontSize", 14);, can also set their styleName property is bound to a css in the page. Such as:

View source

Print Help

1. dataGrid.styleName = "datagrid" ;

View source

Print Help

1. < mx:Style >

2. .datagrid{

3. fontSize:14;

4. }

5. </ mx:Style >

3.Events event attribute, AS to use the event listener, itemClick = "itemClickHandler (event)" corresponds to such dataGrid.addEventListener (ListEvent.ITEM_CLICK, itemClickHandler);. Which corresponds to the specific property which case we should check the document has.

Width of which a little special, if you want to set the percentage width, which can not dataGrid.width = "100%", need to set percentWidth, actually set the width in MXML when there is a percent sign, if, instead of value will be passed to percentWidth width

There is also a property is rather special, is the dataProvider, it is a thing to achieve ICollectionView interface. If the incoming is Array, will automatically turn into ArrayCollection, if XMLList turned into XMLListCollection. Here a direct pass a ArrayCollection, is to use a different filter function after the call dataGrid.dataProvider not directly use dgData, such as dgData.filterFunction = myFilterFunction

2. Next, add the line:

View source

Print Help

1. var columns: Array = new Array ();

2. var col:DataGridColumn;

3. for ( var i:* in dgDataArr[ 0 ] ) {

4. col = new DataGridColumn(i);

5. if ( i == "name" ) col.editable = false ;

6. columns.push(col);

7. }

8. dataGrid.columns = columns;

There is only two columns property, use for in a bit wasted, here is an example. DataGrid with AS are generally write dynamically generated, data is uncertain, are used to add bar traversal.

3. Last is to use the ComboBox editing.

Pass itemRender and itemEditor must be a realization of what IFactory interface, IFactory interface, very simple, only one newInstance () function, DataGrid in the rendering of each column and each column editor, all call this function returns a new renderer. DataGrid default renderer is DataGridItemRenderer, editor of the renderer is TextInput. With the following statement can be the editor of a column is set to ComboBox:

View source

Print Help

1. var comboboxFactory:ClassFactory = new ClassFactory(ComboBox);

2. col.itemEditor = comboboxFactory;

ClassFactory is achieved IFactory interface class, so the above settings for each col the column will be called when the editor comboboxFactory.newInstance () generates a ComboBox instance.
If it is just like the above settings, the result is editing out of no value to the ComboBox, it does not allow editing, how to pass value in?
ClassFactory have properties property lets you pass values to each ComboBox:

View source

Print Help

1. comboboxFactory.properties = { dataProvider: [ "officer" , "seller" , "manager" ], editable: true };

After editing, DataGrid will default to the text editor to the dataProvider property value stored in, and sent to itemRender. If there's no text editor attributes, such as NumericStepper, would need to part set editorDataField property, specify the editing where to go get the modified value. For example: col.editorDataField = "value"

If you want to have more freedom, you can write your own realization IFactory interface class, the newInstance () returns an instance of where on the line:

View source

Print Help

01. package

02. {

03. import mx.controls.ComboBox;

04. import mx.core.IFactory;

05. public class CustomComboBox implements IFactory

06. {

07. private var customData: Array = [ "officer" , "seller" , "manager" ];

08. public function CustomComboBox() { }

09. public function newInstance():*

10. {

11. var combobox:ComboBox = new ComboBox();

12. combobox.dataProvider = customData;

13. combobox.editable = true ;

14. combobox.setStyle( "fontWeight" , "normal" );

15. return combobox;

16. }

17. }

18. }

And then to itemEditor an example: col.itemEditor = new CustomComboBox ();

This article, written at the beginning of the MXML DataGrid on the whole generated by the AS. Complete code:

View source

Print Help

01. <? xml version = "1.0" encoding = "utf-8" ?>

02. < mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml" layout = "absolute" initialize = "init()" >

03. < mx:Script >

04. <![CDATA[

05. import mx.controls.dataGridClasses.DataGridColumn;

06. import mx.collections.ArrayCollection;

07. import mx.controls.DataGrid;

08. import mx.events.ListEvent;

09. import mx.controls.ComboBox;

10. [Bindable]

11. private var dgDataArr:Array = [{name: "Jon", job: "officer"},

12. {name: "James", job: "seller"},

13. {name: "Jodon", job: "manager"}];

14.

15. private function init():void

16. {

17. var dgData:ArrayCollection = new ArrayCollection(dgDataArr);

18. dgData.filterFunction

19. var dataGrid:DataGrid = new DataGrid();

20. dataGrid.x = 10;

21. dataGrid.y = 20;

22. dataGrid.editable = true;

23. dataGrid.percentWidth = 100;

24. dataGrid.setStyle("fontSize", 14);

25. dataGrid.styleName

26. dataGrid.dataProvider = dgData;

27. dataGrid.addEventListener(ListEvent.ITEM_CLICK, itemClickHandler);

28. addChild(dataGrid);

29.

30. var columns:Array = new Array();

31. var col:DataGridColumn;

32. for ( var i:* in dgDataArr[0] ) {

33. col = new DataGridColumn(i);

34. if ( i == "name" ) col.editable = false;

35. if ( i == "job" ) {

36. var comboboxFactory:ClassFactory = new ClassFactory(ComboBox);

37. comboboxFactory.properties = { dataProvider: ["officer", "seller", "manager"], editable: true };

38. col.itemEditor = comboboxFactory;

39. }

40. columns.push(col);

41. }

42. dataGrid.columns = columns;

43.

44. }

45. private function itemClickHandler(e:ListEvent):void

46. {

47. trace(e.target);

48. }

49.

50. ]]>

51. </ mx:Script >

52. </ mx:Application >

相关文章
  • FLEX dynamically created DataGrid using AS 2010-03-30

    <? Xml version = "1.0" encoding = "utf-8"?> <Mx: Application xmlns: mx = " http://www.adobe.com/2006/mxml "Layout =" absolute "> <mx:Script> <! [CDATA [ import mx.collections.ArrayCollection; im

  • Skills: dynamically created SQL statement 2009-06-12

    MATT on his blog, has posted a dynamically created SQL statements Bo-wen. In the text, he referred to himself using the IN operator when a database query problems: According to the set of external incoming IN operator in the number of decisions place

  • JS dynamically created element 2010-04-01

    1, JS dynamically created iframe <script language="JavaScript"> var ifm = document.createElement("iframe"); ifm.id="ifm"; ifm.width="100%"; ifm.frameborder=1; ifm.src="http://www.cnfol.com"; document

  • dynamically created js onchange event select and give 2010-06-30

    function createSelect(iid,pid,num)// Create select { var mySelect = document.createElement("select"); mySelect.id = iid; if(window.addEventListener) // Mozilla, Netscape, Firefox { mySelect.addEventListener('change', mychange,false); } else// IE

  • Dynamically created checkbox check box for the name could not be assigned 2010-10-13

    Today, with document.createElement ('input') dynamically created checkbox check box, and found its name can not be assigned, either directly or by obj.name et obj.setAttribute ('name', 'myname') do not allow the properties displayed a bit later in th

  • Dynamically created SVG element 2010-07-25

    When the SVG graphics more complex, the rows of people to write xml will collapse. If the first variable in the javascript to set some properties in the map, and then dynamically generate the much easier. But only when a large number of duplicate for

  • Flex to export datagrid content to Excel 2010-08-24

    flex datagrid content to Export to Excel Article Category: Flash Programming SDK to version 3.4 and above: <? Xml version = "1.0" encoding = "utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout=

  • Dynamically created by the program cluster environment Ehcache RMI distributed cache 2010-10-21

    Keywords: Ehcache, RMI Replicated Caching, clustering Ehcache User Manual Ehcache support RMI, JMS, JGroups, and other cache cluster environment, replication strategy, the official Ehcache can refer to the specific user manual: http://ehcache.org/doc

  • 在Flex中给datagrid添加右键菜单项的具体实现 2014-06-20

    Flex中如何给datagrid添加右键菜单项,其实很简单,下面有个不错的教程,感兴趣的朋友可以参考下 <?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="

  • java script dynamically created css 2009-03-11

    Javascript to dynamically create the first node Style: var style = document.createElement ( "link"); style.href = "style.css"; style.rel = "stylesheet"; style.type = 'text / css "; document.getElementsByTagName ( "H

  • js dynamically created table 2009-10-04

    We use JS operational capacity of DOM to dynamically create a form, you can dynamically add rows, delete rows, select the check box a full-function! Has the following three files: 1. Dom.css . tbl ( font-size: 12px; border: 1px solid # ebebee; ) . ce

  • flex in the DataGrid using external xml file as a data source 2010-02-24

    <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:XML source="students.xml" /> <mx:XMLListCollection source="

  • web workflow management system developed more than 20 branch nodes dynamically created processes 2010-05-30

    Workflow system in practice, there is often a running process instance according to the dynamic generation of N branch of the case, and each branch is a sequence of process-oriented operations to be run after the completion of each branch, and then p

  • Flex Application in Datagrid (one per line modified to delete button) 2010-09-25

    datagrid Reference: http://xaajie.javaeye.com/blog/434447

  • Dynamically created table 2010-10-18

    create user testa identified by testa default tablespace users quota unlimited on users; grant resource, create session to testa; conn testa / testa; create table aa (id int); ---- current user testa, the sentence can be successfully create or replac

  • dwr dynamically created table. the primary key query load data [javascript to achieve] 2011-01-03

    dwr dynamically create a table of several steps: Premise: dwr Following successful tests, step one: create a table structure in the table, for later display, such as: <thead> <tr> <th> <input type=checkbox> </ th> <th>

  • Flex paging in datagrid 2011-01-10

    PagingBar.mxml <? Xml version = "1.0" encoding = "utf-8"?> <MX: HBox xmlns: MX = " http://www.adobe.com/2006/mxml "backgroundColor =" White "> <mx:Script> <! [CDATA [ import mx.collections.Array

  • js dynamically created. delete table 2009-06-02

    Generate a 2000 * 5 the table, the contents of each cell is the line number + comma + column number Method 1: Use the createElement generated table, use insertRow and insertCell method to generate the ranks of the contents of the cell to use the prop

  • Dynamically created div 2009-08-13

    function setpc (x, y, t) ( var mydiv = document.createElement ( "div"); / / mydiv.setAttribute ( "id", t); mydiv.id = t; mydiv.style.width = "63px"; mydiv.style.height = "18px"; mydiv.style.position = "absolute

  • JS to dynamically created elements and other elements 2010-03-17

    <script> var aElement = document.createElement ("input"); aElement.setAttribute ("id", "the_fee_str"); aElement.id = "the_fee_str"; aElement.type = "hidden"; aElement.size = "30"; aElement.