Buttons dynamisch im Datagrid erzeugen

[RaleKay]

Hi,

ich bin schon auf der Suche in Google fast verzweifelt, von daher erlaube ich mir jetzt einfach mal mein Problem zu Posten ;-)

Ich habe in einer AIR-App ein Datagrid, welches ich mit Daten (Produkte) aus einer Datenbank befülle. Das funktioniert alles wunderbar. Jetzt soll aber in jeder Zeile dynamisch eine Combobox und ein Button erzeugt werden. Der Button hat immer das gleiche Label. In der ComboBox kann man zwischen verschiedenen Formaten wählen. Im Hintergrund soll aber jeder Button einer Funktion die Artikelnummer des Produkts übergeben.

Ich habe mich hierfür an einem Tutorial von Adobe orientiert. Leider bekomme ich dabei immer einen Fehler, egal was ich auch mache.

Bisher sieht mein Code dazu folgendermaßen aus:

function selectResult(event:SQLEvent):void
{	
	selectStmt.removeEventListener(SQLEvent.RESULT, selectResult);
	selectStmt.removeEventListener(SQLErrorEvent.ERROR, selectError);
	
	var result:SQLResult = selectStmt.getResult();
	
	var numRows:int = result.data.length;
	var products:Array = new Array();
	var dp:DataProvider = new DataProvider();
	
	for (var i:int = 0; i < numRows; i++)
	{		
		var product:Array = new Array();		
		for (var prop:String in result.data[i])
		{
			product[prop] = result.data[i][prop];
		}
		
		dp.addItem({
			PZN:product["pzn_id"],
			Artikelnummer:product["product_sku"], 
			Produktname:product["product_name"],
			Menge:product["product_unit"],
			Downloads:0
		});
	}
	
	var columns:uint = resultsGrid.getColumnCount();
	if(columns > 0)
	{
		resultsGrid.removeAllColumns();
	}
	
	var product_pzn:DataGridColumn = new DataGridColumn("PZN");
	var product_sku:DataGridColumn = new DataGridColumn("Artikelnummer");
	var product_name:DataGridColumn = new DataGridColumn("Produktname");
	var product_unit:DataGridColumn = new DataGridColumn("Menge");
	var product_download:DataGridColumn = new DataGridColumn("Downloads");
	
	product_pzn.width = 100;
	product_sku.width = 100;
	product_name.width = 250;
	product_unit.width = 100;

        //hier bekomme ich einen Fehler, da es beim rendern nicht klappt
	product_download.cellRenderer = "ComboBoxCell";
	
	
	resultsGrid.addColumn(product_pzn);
	resultsGrid.addColumn(product_sku);
	resultsGrid.addColumn(product_name);
	resultsGrid.addColumn(product_unit);
	resultsGrid.addColumn(product_download);
	
	resultsGrid.dataProvider = dp;
	addChild(resultsGrid);
}

Ich würde mich freuen, wenn mir einer von euch einen Denkanstoß geben könnte.

Mfg

Ralle

[RaleKay]

Hat keiner eine Idee, wie ich das lösen könnte?

[Omega Psi]

Du musst den Button als ItemRenderer für die Column setzen.

[RaleKay]

Hi,

ich hab das jetzt trotz der sehr knappen Antwort mal probiert. Ich kenn mich zwar nicht so gut aus und bekomme immer wieder den Fehler "Zugriff auf eine nicht definierte Eigenschaft itemRenderer". Wäre nett, wenn man das ganze evtl. en bissel ausführlicher beschreiben könnt. Ich will ja was lernen.

Mfg

Ralle

[RaleKay]

Hi,

Ich meine zu glauben, dass der Fehler irgendwo in der .as-Datei liegt. Im Internet finde ich immer den Verweis auf das oben bereits erwähnte Tutorial, aber bei Befehlen wie

listOwner.dataProvider.editField(getCellIndex().itemIndex, getDataLabel(), combo.selectedItem.data);

bekomme ich immer einen Fehler. Ich hab jetzt mal versucht die Skripte noch ein wenig zu ändern, doch leider ohne Erfolg. Ich bekomme dazu immer folgenden Fehler:

TypeError: Error #2007: Parameter child must be non-null.
at flash.display:isplayObjectContainer/addChild()
at fl.controls:ataGrid/drawList()
at fl.controls:ataGrid/draw()
at fl.core::UIComponent/callLaterDispatcher()

Hier mal mein kompletter Code:
fla-Datei

Daten werden aus der Datenbank ausgelesen und in das DataGrid geschrieben. Zusätzlich zu den Daten soll noch ein Button oder eine ComboBox in die letzte Spalte des DG. Bei einem Klick oder Auswahl (bei Combo) soll dann ein Speichern-Dialog sich öffnen,....

Daher brauche ich einen Dynamischen Namen für die Komponente, damit ich dem Savedialog sagen kann, welche Datei er speichern soll.

import fl.controls.*;
import fl.controls.Button;
import fl.controls.ComboBox;
import fl.controls.DataGrid;
import fl.controls.ScrollPolicy;
import fl.controls.listClasses.*;
import fl.controls.dataGridClasses.*;
import fl.controls.progressBarClasses.*;
import fl.controls.listClasses.CellRenderer;
import fl.controls.dataGridClasses.DataGridColumn;
import fl.containers.*;
import fl.data.DataProvider;
import flash.data.SQLStatement;
import flash.display.MovieClip;
import fl.core.UIComponent;

function getData():void
{    
    selectStmt = new SQLStatement();
    selectStmt.sqlConnection = conn;
    var sql:String      = "SELECT * ";
        sql         += "FROM products INNER JOIN pzn_xref ";
        sql            += "ON products.product_sku = pzn_xref.product_id ";
        sql            += "ORDER BY products.product_sku";
    selectStmt.text = sql;
    
    selectStmt.addEventListener(SQLEvent.RESULT, selectResult);
    selectStmt.addEventListener(SQLErrorEvent.ERROR, selectError);
    
    selectStmt.execute();
}

function selectResult(event:SQLEvent):void
{    
    selectStmt.removeEventListener(SQLEvent.RESULT, selectResult);
    selectStmt.removeEventListener(SQLErrorEvent.ERROR, selectError);
    
    var result:SQLResult = selectStmt.getResult();
    
    var numRows:int = result.data.length;
    var products:Array = new Array();
    var dp:DataProvider = new DataProvider();
    
    for (var i:int = 0; i < numRows; i++)
    {        
        var product:Array = new Array();        
        for (var prop:String in result.data[i])
        {
            product[prop] = result.data[i][prop];
        }
        
        dp.addItem({
            PZN:product["pzn_id"],
            Artikelnummer:product["product_sku"], 
            Produktname:product["product_name"],
            Menge:product["product_unit"],
            Downloads:0
        });
    }

    var columns:uint = resultsGrid.getColumnCount();
    if(columns > 0)
    {
        resultsGrid.removeAllColumns();
    }
    
    var product_pzn:DataGridColumn = new DataGridColumn("PZN");
    var product_sku:DataGridColumn = new DataGridColumn("Artikelnummer");
    var product_name:DataGridColumn = new DataGridColumn("Produktname");
    var product_unit:DataGridColumn = new DataGridColumn("Menge");
    var product_download:DataGridColumn = new DataGridColumn("Downloads");
    
    product_pzn.width = 100;
    product_sku.width = 100;
    product_name.width = 250;
    product_unit.width = 100;
    
    product_download.cellRenderer = "ComboBoxCell";
    
    resultsGrid.addColumn(product_pzn);
    resultsGrid.addColumn(product_sku);
    resultsGrid.addColumn(product_name);
    resultsGrid.addColumn(product_unit);
    resultsGrid.addColumn(product_download);
    
    resultsGrid.dataProvider = dp;
    addChild(resultsGrid);
}

function selectError(event:SQLErrorEvent):void
{    
    selectStmt.removeEventListener(SQLEvent.RESULT, selectResult);
    selectStmt.removeEventListener(SQLErrorEvent.ERROR, selectError);
    
    trace("SELECT error:", event.error);
    trace("event.error.message:", event.error.message);
    trace("event.error.details:", event.error.details);
}

as-Datei

Das ist die abgewandelte Version von dem Adobe Beispiel (welches noch mehr Fehler verursacht, als diese).

package 
{ 
    // Import the required component classes. 
    import fl.containers.UILoader; 
    import fl.controls.listClasses.ICellRenderer; 
    import fl.controls.listClasses.CellRenderer; 
    import fl.controls.listClasses.ListData; 
    import fl.core.InvalidationType; 
    import fl.data.DataProvider; 
    import flash.events.Event; 
    import flash.display.MovieClip;
    import fl.controls.ComboBox
    import fl.controls.DataGrid
    import fl.core.UIComponent

    class ComboBoxCell extends UIComponent
    {
    
        private var combo:ComboBox = new ComboBox();
        private var owner;                        // The row that contains the cell.
        private var listOwner : DataGrid;        // The reference of the list type component that contains this cell.  
        private var getCellIndex : Function;    // A function we receive from the parent list (in this case a DataGrid).
        private var getDataLabel : Function;    // A function we receive from the parent list (in this case a DataGrid).
        
        private static var PREFERRED_HEIGHT_OFFSET = 4;     // The preferred offset height of the cell containing the ComboBox.
        private static var PREFERRED_WIDTH = 100;             // The preferred width of the cell containing the Combobox.
        private static var COMBOBOX_HEIGHT = 20;            // The height of the ComboBox.
        private static var COMBOBOX_WIDTH_OFFSET = 10;         // Amount of space we will add between the ComboBox and its cell so it looks better.
        private var startDepth:Number = 10;
        
        // Array of label/data pairs that define the ComboBox data provider.
        private var COMBOBOX_DATA_PROVIDER:DataProvider = new DataProvider();

        // Constructor:  Should be empty.
        public function ComboBoxCell()
        {
        }
    
        //Creates a ComboBox object and sets listeners.
        public function createChildren():void
        {
            COMBOBOX_DATA_PROVIDER.addItem({label: "unrated", data: 0});
            COMBOBOX_DATA_PROVIDER.addItem({label: "low", data: 1});
            COMBOBOX_DATA_PROVIDER.addItem({label: "medium", data: 2});
            COMBOBOX_DATA_PROVIDER.addItem({label: "high", data: 3});
            // Assign the data provider.
            combo.dataProvider = COMBOBOX_DATA_PROVIDER;
    
            // Register this class instance as a listener for the ComboBox instance.
            combo.addEventListener("change", change);
            combo.addEventListener("open", open); 
        }
    
        public function size():void
        {
            /*  Set the size and location of the ComboBox.
            Note: setSize() is already implemented by UIComponent
            which this class extends.  UI component in turn expects this class
            to implement size(). */
            combo.setSize(width, COMBOBOX_HEIGHT);
        }
    
        public function setValue(str:String, item:Object, sel:Boolean):void
        {
            /*  Sets the ComboBox to the correspoinding cell data from the list owner's data provider if the cell data matches
            with any items available for the ComboBox. */
            
            var drawCombo:Boolean = true;
            if (item[getDataLabel()]!=undefined)
            {
                /* For each item's data in the ComboBox, verify if it matches
                the assigned data for the cell this ComboBox is in.  
                Set the selectedIndex of the ComboBox to what matches. */
                for(var i:Number = 0; i < combo.length; i++) 
                {
                    if( combo.getItemAt(i).data == item[getDataLabel()] ) 
                    {
                        combo.selectedIndex = i;
                        break;
                    }
                    if ( i == combo.length - 1 )
                    {
                        // There was no matching data, the ComboBox should not be shown.
                        drawCombo = false;  
                    }
                }
            }
            else
            {
                drawCombo = false;  // There was no data, hide the ComboBox.
            }
            
            combo.visible = drawCombo;
        }
    
        public function open()
        {
            /*  Handler for the open event sent by the ComboBox when
            it has been clicked and opened to show its selectable items.
            Tell the Datagrid that the cell containing the ComboBox
            should be considered selected so that in turn the DataGrid
            updates the entire row in a selected visual state. */
            
            listOwner.selectedIndex = getCellIndex().itemIndex;
        }
        
        public function change()
        {
            // Handler for the ComboBox change event.
            
            // Set the listOwner's data to the currently selected item's data of the combo box.
            listOwner.editField(getCellIndex().itemIndex, getDataLabel(), combo.selectedItem.data);    
        }
        
        public function getPreferredHeight(Void) : Number
        {
            /*     The cell is given a property, "owner",
            that references the row. It’s always preferred
            that the cell take up most of the row's height. */
            return owner.height;
        }
    }
}

Kann mir bitte wer sagen, wo ich da den Fehler hab? Wie gesagt, probier ich jetzt schon ne ganze Weile herum und hab absolut keinen Plan, wo sich noch ein Bug verstecken könnte.

Mfg

Ralle