В ExtJS таблицы представляют из себя сложный компоненты, имеющие многосоставную структуру.
Store (хранилище) - объект Ext.data.Store, предназначенный для хранения, чтения, записи и выборки данных, организованных в виде двухмерного массива (массива записей).
Storage предоставляет интерфейс для манипуляции данными другим комонентам ExtJS, таким как: таблицы, графики, диаграмы, селекты и тому подобное.
Интрефейс для всех визуальных компонентов един, хотя чтение-запись-выборка данных может осуществляться из статических массивов, XML и JSON.
Данные для Storage могут быть полученыв как из локальных источников (например массив или HTML-таблица), так и из удаленных (данные с сервера).
Таким образом Storage, который обеспечивает данными много разных компонентов, позволяет этим компонентам абстрагироваться от того, где реально эти данные хранятся.
Record (запись) - объект Ext.data.Record, соответствующий одной записи в таблице данных. Он отвечает за непосредственное чтение и запись данных, и состоит из целого ряда методов, которые читают-пишут данные из массивов, JSON-объектов и тому подобных.
Для организации чтения и записи также существует целый ряд proxy-методов. Например, наиболее широко распростанен AjaxProxy, который используется непосредственно для загрузки и выгрузки данных на сервер через AJAX/REST-запросы, для последующей записи в хранилище данных.
Grid (таблица) - объект Ext.grid.GridPanel, который позволяет визуально отображать и манипулировать данными их хранилища (Store).
Column (колонка) - объект Ext.grid.column, который отвечает за отображение и поведение колонок в таблице.
Даже самая простая таблицв в ExtJS - это мощный инструмент, позволяющий сортировать записи и колонки, выводить нужные колонки и прятать ненужные.
Для создания таблицы необходимо выполнить ряд следующих действий.
1. Определяем данные в виде двухмерного массива. Каждая строка массива - это одна запись (record).
var myData = [
['Microsoft Corporation',25.84,-0.14,-0.564,'1980-05-06'],
['Pfizer Inc',27.96,0.466,1.475,'1980-05-06'],
['The Coca-Cola Company',45.7,0.267,0.578,'1980-05-06']
];
2. Определяем индексы полей в каждой записи.
var fields = [
{name: 'company'},
{name: 'price'}
];
По этим данным будет сконфигурирован объект Ext.data.Record.
У каждого поля может быть указан тип данных (int, float, number, string, date) - необязательный параметр, но если поле не строковое, то его надо указывать.
3. Определяем колонки таблицы: их заголовки и индексы полей, которые будут отображаться в каждой колонке.
var col = [
{
text: 'Company', // заголовок колонки
dataIndex: 'company' // индекс поля из хранилища (fields)
},
{
text: 'Price',
dataIndex: 'price'
}
];
Здесь определяются колонки таблицы (Ext.grid.column) и их связь с данными, в соответствии с теми индексами, которые мы указали выше в массиве индексов fields.
4. Определяем хранилище для данных из массива myData.
var store = Ext.create('Ext.data.ArrayStore', {
fields: fields, // указали массив индексов полей.
data: myData // указали откуда брать данные
});
Здесь мы создали хранилище Store.
5. Создаем сам компонент Ext.grid.Panel, который будет отображать таблику с данным.
var grid = Ext.create('Ext.grid.Panel', {
store: store, // определили хранилище
title: 'Array Grid', // заголовок
columns:col // указали массив колонок
});
6. Создаем всплывающее окно, в которое помещаем нашу таблицу.
var win = Ext.create('widget.window', {
title: 'Окно с таблицей',
closeAction: 'hide',
width: 600,
height: 350,
items: [grid]
});
Приведем весь код полностью.
Ext.require([
'Ext.window.*',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*'
]);
var myData = [
['Microsoft Corporation',25.84,-0.14,-0.564,'1980-05-06'],
['Pfizer Inc',27.96,0.466,1.475,'1980-05-06'],
['The Coca-Cola Company',45.7,0.267,0.578,'1980-05-06']
];
var fields = [
{name: 'company'},
{name: 'price'} // тип данных
];
var col = [
{
text: 'Company', // заголовок колонки
dataIndex: 'company' // индекс поля из хранилища (fields)
},
{
text: 'Price',
dataIndex: 'price'
}
];
var store = Ext.create('Ext.data.ArrayStore', {
fields: fields, // указали массив индексов полей.
data: myData // указали откуда брать данные
});
var grid = Ext.create('Ext.grid.Panel', {
store: store, // определили хранилище
title: 'Array Grid', // заголовок
columns: col // указали массив колонок
});
var win = Ext.create('widget.window', {
title: 'Окно с таблицей',
closeAction: 'hide',
width: 300,
height: 200,
items: [grid]
});
win.show();
В результате выполнения данного кода ExtJS сформирует таблицу с данными.
В следующем примере мы переопределим конфигурацию колонок.
1. Изменим код колей таблицы.
var fields = [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name:'lastmod', type:'date'}
];
2. Изменим форматирование колонок.
{
text: 'Company', // заголовок колонки
dataIndex: 'company', // индекс поля из хранилища (fields)
renderer: function(val) {// изменяем форматирование колонки
return '<a href="http://yandex.ru/yandsearch?text=%27+%20val%20+%20%27">'+val+'</a>';
}
}
При выводе названия компании мы передаем обычную строку в виде ссылки на Яндекс.
Соответственно, renderer - это функция которая задает HTML-представление элемента, который прланируется отображать в данной колонке.
{
text: 'Price',
dataIndex: 'price',
format:'0.00', // формат вывод числа (три нуля после запятой)
xtype: 'numbercolumn' // указание xtype необходимо для форматирования
}
Price выглядит неровно. Поэтому мы отформатировали стоимость так, чтобы всегда были две цифры после запятой.
{
text: 'Change',
dataIndex: 'change',
visible:false // эту колонку просто спрятали
}
Колонку change мы просто спрятали. Но если пощелкать мышкой по заголовку таблицы, то можно вывести список отображаемых колонок и вернуть спрятанную колонку на панель.
{
text: '% Change',
dataIndex: 'pctChange',
width: 165, // ширина колонки
sortable: false, // запрет сортировки
align: 'center' // выравнивание по центру
}
Для колонки pctChange мы указали ширину и выравнивание, заодно запретили по ней сортировку.
{
text: 'Last Modified',
xtype: 'datecolumn',
format: 'm-d-Y',
dataIndex: 'lastmod'
}
Для колонки lastmod мы указали формат вывода даты из YYYY-MM-DD в привычном для нас виде ДД-ММ-ГГГГ.
Без указания xtype форматирование не будет срабатывать.
Приведем код полностью.
Ext.require([
'Ext.window.*',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*'
]);
var myData = [
['Microsoft Corporation',25.84,-0.14,-0.564,'1980-05-06'],
['Pfizer Inc',27.96,0.466,1.475,'1980-05-06'],
['The Coca-Cola Company',45.7,0.267,0.578,'1980-05-06']
];
var fields = [
{name: 'company'},
{name: 'price'} // тип данных
];
var col = [
{
text: 'Company', // заголовок колонки
dataIndex: 'company', // индекс поля из хранилища (fields)
width:200,
renderer: function(val) { // кастомно отформатировали
return '<a href="http://yandex.ru/yandsearch?text=%27+%20val%20+%20%27">'+val+'</a>';
}
},
{
text: 'Price',
dataIndex: 'price',
format:'0.000',
xtype: 'numbercolumn'
},
{
text: 'Change',
dataIndex: 'change',
visible:false // эту колонку просто спрятали
},
{
text: '% Change',
dataIndex: 'pctChange',
width: 165, // ширина колонки
sortable: false,// заперт сортировки
align: 'center'// выравнивание
},
{
text: 'Last Modified',
xtype: 'datecolumn',
format: 'm-d-Y',
dataIndex: 'lastmod'
}
];
var store = Ext.create('Ext.data.ArrayStore', {
fields: fields, // указали массив индексов полей.
data: myData // указали откуда брать данные
});
var grid = Ext.create('Ext.grid.Panel', {
store: store, // определили хранилище
title: 'Array Grid', // заголовок
columns: col // указали массив колонок
});
var win = Ext.create('widget.window', {
title: 'Окно с таблицей',
closeAction: 'hide',
width: 500,
height: 300,
items: [grid]
});
win.show();
В итоге ExtJS выведет на экран такое окно с таблицей.
Store (хранилище) - объект Ext.data.Store, предназначенный для хранения, чтения, записи и выборки данных, организованных в виде двухмерного массива (массива записей).
Storage предоставляет интерфейс для манипуляции данными другим комонентам ExtJS, таким как: таблицы, графики, диаграмы, селекты и тому подобное.
Интрефейс для всех визуальных компонентов един, хотя чтение-запись-выборка данных может осуществляться из статических массивов, XML и JSON.
Данные для Storage могут быть полученыв как из локальных источников (например массив или HTML-таблица), так и из удаленных (данные с сервера).
Таким образом Storage, который обеспечивает данными много разных компонентов, позволяет этим компонентам абстрагироваться от того, где реально эти данные хранятся.
Record (запись) - объект Ext.data.Record, соответствующий одной записи в таблице данных. Он отвечает за непосредственное чтение и запись данных, и состоит из целого ряда методов, которые читают-пишут данные из массивов, JSON-объектов и тому подобных.
Для организации чтения и записи также существует целый ряд proxy-методов. Например, наиболее широко распростанен AjaxProxy, который используется непосредственно для загрузки и выгрузки данных на сервер через AJAX/REST-запросы, для последующей записи в хранилище данных.
Grid (таблица) - объект Ext.grid.GridPanel, который позволяет визуально отображать и манипулировать данными их хранилища (Store).
Column (колонка) - объект Ext.grid.column, который отвечает за отображение и поведение колонок в таблице.
Даже самая простая таблицв в ExtJS - это мощный инструмент, позволяющий сортировать записи и колонки, выводить нужные колонки и прятать ненужные.
Для создания таблицы необходимо выполнить ряд следующих действий.
1. Определяем данные в виде двухмерного массива. Каждая строка массива - это одна запись (record).
var myData = [
['Microsoft Corporation',25.84,-0.14,-0.564,'1980-05-06'],
['Pfizer Inc',27.96,0.466,1.475,'1980-05-06'],
['The Coca-Cola Company',45.7,0.267,0.578,'1980-05-06']
];
Это статические данные, то есть массив, по которому будет строиться таблица GridPanel.
2. Определяем индексы полей в каждой записи.
var fields = [
{name: 'company'},
{name: 'price'}
];
По этим данным будет сконфигурирован объект Ext.data.Record.
У каждого поля может быть указан тип данных (int, float, number, string, date) - необязательный параметр, но если поле не строковое, то его надо указывать.
3. Определяем колонки таблицы: их заголовки и индексы полей, которые будут отображаться в каждой колонке.
var col = [
{
text: 'Company', // заголовок колонки
dataIndex: 'company' // индекс поля из хранилища (fields)
},
{
text: 'Price',
dataIndex: 'price'
}
];
Здесь определяются колонки таблицы (Ext.grid.column) и их связь с данными, в соответствии с теми индексами, которые мы указали выше в массиве индексов fields.
4. Определяем хранилище для данных из массива myData.
var store = Ext.create('Ext.data.ArrayStore', {
fields: fields, // указали массив индексов полей.
data: myData // указали откуда брать данные
});
Здесь мы создали хранилище Store.
5. Создаем сам компонент Ext.grid.Panel, который будет отображать таблику с данным.
var grid = Ext.create('Ext.grid.Panel', {
store: store, // определили хранилище
title: 'Array Grid', // заголовок
columns:col // указали массив колонок
});
6. Создаем всплывающее окно, в которое помещаем нашу таблицу.
var win = Ext.create('widget.window', {
title: 'Окно с таблицей',
closeAction: 'hide',
width: 600,
height: 350,
items: [grid]
});
Приведем весь код полностью.
Ext.require([
'Ext.window.*',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*'
]);
var myData = [
['Microsoft Corporation',25.84,-0.14,-0.564,'1980-05-06'],
['Pfizer Inc',27.96,0.466,1.475,'1980-05-06'],
['The Coca-Cola Company',45.7,0.267,0.578,'1980-05-06']
];
var fields = [
{name: 'company'},
{name: 'price'} // тип данных
];
var col = [
{
text: 'Company', // заголовок колонки
dataIndex: 'company' // индекс поля из хранилища (fields)
},
{
text: 'Price',
dataIndex: 'price'
}
];
var store = Ext.create('Ext.data.ArrayStore', {
fields: fields, // указали массив индексов полей.
data: myData // указали откуда брать данные
});
var grid = Ext.create('Ext.grid.Panel', {
store: store, // определили хранилище
title: 'Array Grid', // заголовок
columns: col // указали массив колонок
});
var win = Ext.create('widget.window', {
title: 'Окно с таблицей',
closeAction: 'hide',
width: 300,
height: 200,
items: [grid]
});
win.show();
В результате выполнения данного кода ExtJS сформирует таблицу с данными.
В следующем примере мы переопределим конфигурацию колонок.
1. Изменим код колей таблицы.
var fields = [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name:'lastmod', type:'date'}
];
2. Изменим форматирование колонок.
{
text: 'Company', // заголовок колонки
dataIndex: 'company', // индекс поля из хранилища (fields)
renderer: function(val) {// изменяем форматирование колонки
return '<a href="http://yandex.ru/yandsearch?text=%27+%20val%20+%20%27">'+val+'</a>';
}
}
При выводе названия компании мы передаем обычную строку в виде ссылки на Яндекс.
Соответственно, renderer - это функция которая задает HTML-представление элемента, который прланируется отображать в данной колонке.
{
text: 'Price',
dataIndex: 'price',
format:'0.00', // формат вывод числа (три нуля после запятой)
xtype: 'numbercolumn' // указание xtype необходимо для форматирования
}
Price выглядит неровно. Поэтому мы отформатировали стоимость так, чтобы всегда были две цифры после запятой.
{
text: 'Change',
dataIndex: 'change',
visible:false // эту колонку просто спрятали
}
Колонку change мы просто спрятали. Но если пощелкать мышкой по заголовку таблицы, то можно вывести список отображаемых колонок и вернуть спрятанную колонку на панель.
{
text: '% Change',
dataIndex: 'pctChange',
width: 165, // ширина колонки
sortable: false, // запрет сортировки
align: 'center' // выравнивание по центру
}
Для колонки pctChange мы указали ширину и выравнивание, заодно запретили по ней сортировку.
{
text: 'Last Modified',
xtype: 'datecolumn',
format: 'm-d-Y',
dataIndex: 'lastmod'
}
Для колонки lastmod мы указали формат вывода даты из YYYY-MM-DD в привычном для нас виде ДД-ММ-ГГГГ.
Без указания xtype форматирование не будет срабатывать.
Приведем код полностью.
Ext.require([
'Ext.window.*',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*'
]);
var myData = [
['Microsoft Corporation',25.84,-0.14,-0.564,'1980-05-06'],
['Pfizer Inc',27.96,0.466,1.475,'1980-05-06'],
['The Coca-Cola Company',45.7,0.267,0.578,'1980-05-06']
];
var fields = [
{name: 'company'},
{name: 'price'} // тип данных
];
var col = [
{
text: 'Company', // заголовок колонки
dataIndex: 'company', // индекс поля из хранилища (fields)
width:200,
renderer: function(val) { // кастомно отформатировали
return '<a href="http://yandex.ru/yandsearch?text=%27+%20val%20+%20%27">'+val+'</a>';
}
},
{
text: 'Price',
dataIndex: 'price',
format:'0.000',
xtype: 'numbercolumn'
},
{
text: 'Change',
dataIndex: 'change',
visible:false // эту колонку просто спрятали
},
{
text: '% Change',
dataIndex: 'pctChange',
width: 165, // ширина колонки
sortable: false,// заперт сортировки
align: 'center'// выравнивание
},
{
text: 'Last Modified',
xtype: 'datecolumn',
format: 'm-d-Y',
dataIndex: 'lastmod'
}
];
var store = Ext.create('Ext.data.ArrayStore', {
fields: fields, // указали массив индексов полей.
data: myData // указали откуда брать данные
});
var grid = Ext.create('Ext.grid.Panel', {
store: store, // определили хранилище
title: 'Array Grid', // заголовок
columns: col // указали массив колонок
});
var win = Ext.create('widget.window', {
title: 'Окно с таблицей',
closeAction: 'hide',
width: 500,
height: 300,
items: [grid]
});
win.show();
В итоге ExtJS выведет на экран такое окно с таблицей.
Комментариев нет:
Отправить комментарий