datagrid| Create | In dynamic Flex2, DataGrid If we do not specify columns familiar, the DataGrid automatically creates columns automatically based on the property names of the Dataprovider rows of data, such as the following code:
<?xml version= "1.0" encoding= "Utf-8"?>
<mx:application xmlns:mx= "Http://www.macromedia.com/2005/mxml" xmlns= "*"
layout= "vertical" creationcomplete= "Loaddgview ()" >
<mx:Script>
<! [cdata[
[bindable]
public Var works:array= [
{id:1, Name: ' Feiy ', Sex: ' Male '},
{id:2, Name: ' Wenj ', Sex: ' Fmale '}];
private Var workscolumns:array= [
{columnName: "id", HeaderText: "Work ' s ID", width:100},
{columnName: "name", HeaderText: "Work ' s name", width:200},
{columnName: "Sex", HeaderText: "Work ' Sex", width:100}];
[bindable]
public Var departments:array=[
{id:1, Name: ' Tech Dept. '},
{id:2, Name: ' Service dept '}];
private Var departmentscolumns:array= [
{columnName: "id", HeaderText: "Department ' s ID", width:200},
{columnName: "name", HeaderText: "Department ' s name", width:200}];
Private Function Loaddgview () {
if (type_cb.selectedindex==0) {
View_dg.dataprovider=works;
}else{
view_dg.dataprovider=departments;
}
}
]]>
</mx:Script>
<mx:HBox>
<mx:combobox id= "TYPE_CB" change= "Loaddgview ()" >
<mx:dataProvider>
<mx:Array>
<mx:object label= "Works"/>
<mx:object label= "departments"/>
</mx:Array>
</mx:dataProvider>
</mx:ComboBox>
</mx:HBox>
<mx:datagrid id= "VIEW_DG"/>
</mx:Application>
View Sample
When we choose Works, the DataGrid automatically generates three columns of DataGridColumn based on the data in the Dataprovider:works array, and when you choose departments, it's convenient to change it to two columns.
This function of the DataGrid component, which is not in the Flex1.5, is a major improvement in the FLEX2.
But if the header of our DataGrid is inconsistent with the list, or if we do not need to display all of the data for each row, then the method of the DataGrid's implicit automatic creation of columns no longer applies, at which point we need to manually create the columns ourselves.
The DataGrid uses the Columns property to identify column information. The Column property is a mx.controls.gridclasses.DataGridColumn array, so to create a table column dynamically, you simply create a datagridcolumn array and assign it to the Columns property of the DataGrid. The code for the previous example, we have improved as follows:
<?xml version= "1.0" encoding= "Utf-8"?>
<mx:application xmlns:mx= "Http://www.macromedia.com/2005/mxml" xmlns= "*"
layout= "vertical" creationcomplete= "Loaddgview ()" >
<mx:Script>
<! [cdata[
Import Mx.controls.gridclasses.DataGridColumn;
[bindable]
public Var works:array= [
{id:1, Name: ' Feiy ', Sex: ' Male '},
{id:2, Name: ' Wenj ', Sex: ' Fmale '}];
private Var workscolumns:array= [
{columnName: "id", HeaderText: "Work ' s ID", width:100},
{columnName: "name", HeaderText: "Work ' s name", width:200},
{columnName: "Sex", HeaderText: "Work ' Sex", width:100}];
[bindable]
public Var departments:array=[
{id:1, Name: ' Tech Dept. '},
{id:2, Name: ' Service dept '}];
private Var departmentscolumns:array= [
{columnName: "id", HeaderText: "Department ' s ID", width:200},
{columnName: "name", HeaderText: "Department ' s name", width:200}];
Private Function Loaddgview () {
if (type_cb.selectedindex==0) {
var columns:array=new Array ();
for (Var i:int;i<workscolumns.length;i++) {
var item:object=workscolumns[i];
var dgcolumn:datagridcolumn=new datagridcolumn ();
Dgcolumn.columnname=item.columnname;
Dgcolumn.headertext=item.headertext;
Dgcolumn.width=item.width;
Columns.push (Dgcolumn);
}
View_dg.columns=columns;
View_dg.dataprovider=works;
}else{
var columns:array=new Array ();
for (Var i:int;i<departmentscolumns.length;i++) {
var item:object=departmentscolumns[i];
var dgcolumn:datagridcolumn=new datagridcolumn ();
Dgcolumn.columnname=item.columnname;
Dgcolumn.headertext=item.headertext;
Dgcolumn.width=item.width;
Columns.push (Dgcolumn);
}
View_dg.columns=columns;
view_dg.dataprovider=departments;
}
}
]]>
</mx:Script>
<mx:HBox>
<mx:combobox id= "TYPE_CB" change= "Loaddgview ()" >
<mx:dataProvider>
<mx:Array>
<mx:object label= "Works"/>
<mx:object label= "departments"/>
</mx:Array>
</mx:dataProvider>
</mx:ComboBox>
</mx:HBox>
<mx:datagrid id= "VIEW_DG"/>
</mx:Application>
View Sample
The red section is for the added code, and relative to the previous code, we have added two arrays: Workscolumns and Departmentscolumns, which hold the DataGridColumn attribute of the corresponding data, and then in the Loaddgview function, Creates a corresponding DataGridColumn array based on the corresponding column array, and assigns it to view_db.columns at the end.
