Главная » ActionScript » Настройка компонента DataGrid

0

Компонент DataGrid можно изменять по горизонтали и по вертикали как во время разработки, так и при исполнении. При разработке выделите компонент в рабочей области и используйте инструмент "Свободное преобразование" или одну из команд "Модификация" > "Преобразовать". При исполнении используйте метод setSize() или применимые свойства, например width, height, scaleX и scaleY. При отсутствии горизонтальной полосы прокрутки ширина столбцов устанавливается пропорционально. При настройке размера столбцов (а следовательно и ячеек) текст в ячейках может быть обрезан.

Использование стилей для компонента DataGrid

Для изменения внешнего вида компонента DataGrid можно задать свойства стиля. Компонент DataGrid наследует стили от компонента List. (См. раздел «Использование стилей для компонента List» на странице 122.)

Задание стиля для отдельного столбца

Объект DataGrid может иметь несколько столбцов, для каждого из которых можно указать разные визуализаторы. Каждый столбец объекта DataGrid представлен объектом DataGridColumn, а класс DataGridColumn включает свойство cellRenderer, для которого можно определить объект CellRenderer столбца.

1   Создайте новый документ Flash (ActionScript 3.0).

2   Перетащите компонент DataGrid на панель "Библиотека".

3   Вставьте следующий код в Кадр 1 временной шкалы на панели "Действия". Данный код создает сетку данных с длинной текстовой строкой в третьем столбце. В конце он устанавливает свойство cellRenderer столбца на имя визуализатора, который отображает многострочную ячейку.

/* This is a simple cell renderer example.It invokes the MultiLineCell cell renderer to display a multiple line text field in one of a DataGrid’s columns. */

import fl.controls.DataGrid;

import fl.controls.dataGridClasses.DataGridColumn;

import fl.data.DataProvider;

import fl.controls.ScrollPolicy;

// Create a new DataGrid component instance. var aDg:DataGrid = new DataGrid();

var aLongString:String = "An example of a cell renderer class that displays a multiple line

TextField"

var myDP:Array = new Array();

myDP = [{firstName:"Winston", lastName:"Elstad", note:aLongString, item:100},

{firstName:"Ric", lastName:"Dietrich", note:aLongString, item:101},

{firstName:"Ewing", lastName:"Canepa", note:aLongString, item:102},

{firstName:"Kevin", lastName:"Wade", note:aLongString, item:103},

{firstName:"Kimberly", lastName:"Dietrich", note:aLongString, item:104},

{firstName:"AJ", lastName:"Bilow", note:aLongString, item:105},

{firstName:"Chuck", lastName:"Yushan", note:aLongString, item:106},

{firstName:"John", lastName:"Roo", note:aLongString, item:107},

];

// Assign the data provider to the DataGrid to populate it.

// Note: This has to be done before applying the cellRenderers. aDg.dataProvider = new DataProvider(myDP);

/* Set some basic grid properties.

Note: The data grid’s row height should reflect

the number of lines you expect to show in the multiline cell. The cell renderer wil size to the row height.

About 40 for 2 lines or 60 for 3 lines.*/

aDg.columns = ["firstName", "lastName", "note", "item"];

aDg.setSize(430,190);

aDg.move(40,40);

aDg.rowHeight = 40;// Allows for 2 lines of text at default text size. aDg.columns[0].width = 70;

aDg.columns[1].width = 70; aDg.columns[2].width = 230; aDg.columns[3].width = 60; aDg.resizableColumns = true; aDg.verticalScrollPolicy = ScrollPolicy.AUTO; addChild(aDg);

// Assign cellRenderers.

var col3:DataGridColumn = new DataGridColumn();

col3 = aDg.getColumnAt(2);

col3.cellRenderer = MultiLineCell;

4   Сохраните FLA-файл как MultiLineGrid.fla.

5   Создайте новый файл ActionScript.

6   Скопируйте следующий код ActionScript в окно "Сценарий":

package {

import fl.controls.listClasses.CellRenderer;

public class MultiLineCell extends CellRenderer

{

public function MultiLineCell()

{

textField.wordWrap = true;

textField.autoSize = "left";

}

override protected function drawLayout():void { textField.width = this.width; super.drawLayout();

}

}

}

7   Сохраните файл ActionScript как MultiLineCell.as в той же папке, в которой вы сохранили файл

MultiLineGrid.fla.

8   Вернитесь в приложение MultiLineGrid.fla и выберите меню "Управление" > "Тестировать ролик".

Компонент DataGrid должен выглядеть следующим образом:

DataGrid для приложения MultiLineGrid.fla

Задание стиля заголовка

Можно задать стиль текста строки заголовка, используя стиль headerTextFormat. В следующем примере используется объект TextFormat для задания стиля headerTextFormat с использованием шрифта Arial, красного цвета, размера шрифта 14 и курсивного начертания.

1   Создайте новый файл Flash (ActionScript 3.0).

2   Перетащите компонент DataGrid в рабочую область и присвойте ему имя экземпляра aDg.

3   Откройте панель "Действия", выберите Кадр 1 на основной временной шкале и введите следующий код:

import fl.data.DataProvider;

import fl.controls.dataGridClasses.DataGridColumn;

var myDP:Array = new Array();

myDP = [{FirstName:"Winston", LastName:"Elstad"},

{FirstName:"Ric", LastName:"Dietrich"},

{FirstName:"Ewing", LastName:"Canepa"},

{FirstName:"Kevin", LastName:"Wade"},

{FirstName:"Kimberly", LastName:"Dietrich"},

{FirstName:"AJ", LastName:"Bilow"},

{FirstName:"Chuck", LastName:"Yushan"},

{FirstName:"John", LastName:"Roo"},

];

// Assign the data provider to the DataGrid to populate it.

// Note: This has to be done before applying the cellRenderers. aDg.dataProvider = new DataProvider(myDP);

aDg.setSize(160,190); aDg.move(40,40); aDg.columns[0].width = 80; aDg.columns[1].width = 80;

var tf:TextFormat = new TextFormat();

tf.size = 14; tf.color = 0xff0000; tf.italic = true; tf.font = "Arial"

aDg.setStyle("headerTextFormat", tf);

4   Выберите "Управление" > "Тестировать ролик" для запуска приложения.

Использование обложек для компонента DataGrid

Компонент DataGrid использует следующие обложки для визуализации своих состояний.

Обложки компонента DataGrid

Обложка CellRenderer используется для ячеек компонента DataGrid, тогда как обложка HeaderRenderer используется для строки заголовка. Следующая процедура изменяет цвет фона строки заголовка, но она же может использоваться и для изменения цвета фона ячеек сетки данных путем редактирования обложки CellRenderer.

1   Создайте новый документ Flash (ActionScript 3.0).

2   Перетащите компонент DataGrid в рабочую область и присвойте ему имя экземпляра aDg.

3   Дважды щелкните компонент, чтобы открыть палитру его обложек.

4   Установите масштаб на 400 %, чтобы увеличить значки для редактирования.

5   Дважды щелкните обложку HeaderRenderer, чтобы открыть палитру обложек HeaderRenderer.

6   Дважды щелкните обложку Up_Skin, чтобы открыть ее в режиме редактирования символов, и щелкните ее фон, чтобы выбрать его. При этом откроется палитра "Заливка" в Инспекторе свойств.

7   В палитре "Заливка" выберите цвет #00CC00 для применения его к фону обложки Up_Skin HeaderRenderer.

8   Нажмите кнопку "Назад" в левой части панели правки над рабочей областью, чтобы вернуться в режим редактирования документа.

9   Вставьте следующий код в Кадр 1 временной шкалы на панели "Действия", чтобы добавить данные в сетку данных.

import fl.data.DataProvider;

bldRosterGrid(aDg);

var aRoster:Array = new Array();

aRoster = [

{Name:"Wilma Carter",Home: "Redlands, CA"},

{Name:"Sue Pennypacker",Home: "Athens, GA"},

{Name:"Jill Smithfield",Home: "Spokane, WA"},

{Name:"Shirley Goth", Home: "Carson, NV"},

{Name:"Jennifer Dunbar",Home: "Seaside, CA"}

];

aDg.dataProvider = new DataProvider(aRoster);

function bldRosterGrid(dg:DataGrid){

dg.setSize(400, 130); dg.columns = ["Name", "Home"]; dg.move(50,50); dg.columns[0].width = 120; dg.columns[1].width = 120;

};

10 Выберите "Управление" > "Тестировать ролик" для тестирования приложения.

Сетка данных должна отобразиться так, как показано на следующем рисунке, с зеленым фоном строки заголовка.

Компонент DataGrid с настроенным фоном строки заголовка

Источник: Использование компонентов ActionScript 3.0 – 2008

По теме:

  • Комментарии