Im vorigen Beitrag wurde gezeigt, wie man Bilder und Grafiken in eine Datagrid-Komponente von Flash CS3 einfügt. Hier nun ein Beispiel, das mehrzeiligen Text und HTML-Formatierungen innerhalb des Datagrids verwendet.

Man benötigt – wie im Beispiel zuvor – ebenfalls einen speziellen CellRenderer, der in diesem Fall MultiLineHtmlCell heißt. Er sorgt dafür, dass die Inhalte einer Spalte als HTML-Textfeld gerendert werden.

Hinweis: Es werden zwei unterschiedliche Methoden für das Zuweisen der Inhalte verwendet: die erste Spalte nutzt die labelFunction, die zweite wird durch direkte Zuweisung mit HTML-Text bestückt.

Der Code für die Flashdatei (.fla), die eine Datagrid-Komponente in der Library haben muss, lautet:

PLAIN TEXT
Actionscript:

  1. import fl.controls.dataGridClasses.DataGridColumn;
  2. import fl.controls.DataGrid;
  3. import fl.data.DataProvider;
  4.  
  5. // Spalten erstellen
  6. var first:DataGridColumn = new DataGridColumn("Titel");
  7. first.width = 120;
  8. first.cellRenderer = MultiLineHtmlCell;
  9. first.labelFunction = formatfirst;
  10.  
  11. var second:DataGridColumn = new DataGridColumn("Beschreibung");
  12. second.width = 320;
  13. second.cellRenderer = MultiLineHtmlCell;
  14.  
  15. // datagrid erstellen
  16. var myGrid:DataGrid = new DataGrid();
  17. myGrid.setSize(300, 200);
  18. myGrid.rowHeight = 120;
  19.  
  20. // spalten hinzufügen
  21. myGrid.addColumn(first);
  22. myGrid.addColumn(second);
  23.  
  24. // zur bühne hinzufügen
  25. addChild(myGrid);
  26. myGrid.move(20,20);
  27.  
  28. function formatfirst(item:Object):String {
  29.     return "" + item.Titel + "";
  30. }
  31.  
  32. // Inhalte
  33. var myDP:DataProvider = new DataProvider();
  34. myDP.addItem({Titel:"Headline", Beschreibung:"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."});
  35. myDP.addItem({Titel:"Headline", Beschreibung:"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."});
  36. myDP.addItem({Titel:"Headline", Beschreibung:"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."});
  37.  
  38.  
  39. //data provider hinzufügen
  40. myGrid.dataProvider = myDP;

Die Klasse MultiLineHtmlCell.as muss sich im gleichen Verzeichnis wie die Flashdatei befinden. Der Code lautet:

PLAIN TEXT
Actionscript:

  1. package {
  2.  
  3.  
  4.     import fl.controls.listClasses.CellRenderer;
  5.  
  6.     public class MultiLineHtmlCell extends CellRenderer {
  7.  
  8.    
  9.         public function MultiLineHtmlCell() {
  10.             textField.wordWrap = true;
  11.             textField.autoSize = "left";
  12.  
  13.         }
  14.        
  15.         override protected function drawLayout():void {
  16.             textField.width = this.width;
  17.             textField.htmlText = textField.text;
  18.             super.drawLayout();
  19.         }
  20.     }
  21. }

Link: htmlText with AS3 datagrid