В предидущем посте мы сделали красивую форму для авторизации средствами extJS, а в этой создадим список ползователей который будет выглядеть вот так:
Итак для начала нам будут нужны иконки которые можно скачать вот тут.
Структура приложения остаётся такой-же как и в прошлом примере. Иконки кидаем в /images/icons/.
Данные мы будем передавать в Json формате и для преобразования в этот формат мы будем использовать Zend_Json. Как интегрировать ZF в Codeigniter мы уже говорили, поэтому не будем углублятся, просто в том-же хелпере пишем:
require_once "Zend/Loader.php";
Zend_Loader::loadClass('Zend_Json');
теперь он нам доступен.Итак создаём контроллер:
< ?php
class Users extends Controller {
function Users()
{
parent::Controller();
}
function index()
{
$this->load->view('grid');
}
function json_userdata()
{
// здесь я создам фиктивные данные, на практике, скорее всего, эти данные будут из базы данных
$rows = array('0' => array('id' => '1', 'username' => 'whiteboy', 'firstname' => 'Sasha', 'lastname' => 'Pushkin', 'role' => 'manager'),
'1' => array('id' => '2', 'username' => 'blackboy', 'firstname' => 'Martin', 'lastname' => 'Luter-King', 'role' => 'publisher'),
'2' => array('id' => '3', 'username' => 'admin', 'firstname' => 'Vasja', 'lastname' => 'Pupkin', 'role' => 'administrator'),
'3' => array('id' => '4', 'username' => 'whiteboy', 'firstname' => 'Sasha', 'lastname' => 'Pushkin', 'role' => 'manager'),
'4' => array('id' => '5', 'username' => 'blackboy', 'firstname' => 'Martin', 'lastname' => 'Luter-King', 'role' => 'publisher'),
'5' => array('id' => '6', 'username' => 'admin', 'firstname' => 'Vasja', 'lastname' => 'Pupkin', 'role' => 'administrator'),
'6' => array('id' => '7', 'username' => 'whiteboy', 'firstname' => 'Sasha', 'lastname' => 'Pushkin', 'role' => 'manager'),
'7' => array('id' => '8', 'username' => 'blackboy', 'firstname' => 'Martin', 'lastname' => 'Luter-King', 'role' => 'publisher'),
'8' => array('id' => '9', 'username' => 'admin', 'firstname' => 'Vasja', 'lastname' => 'Pupkin', 'role' => 'administrator'),
'9' => array('id' => '10', 'username' => 'whiteboy', 'firstname' => 'Sasha', 'lastname' => 'Pushkin', 'role' => 'manager'),
'10' => array('id' => '11', 'username' => 'blackboy', 'firstname' => 'Martin', 'lastname' => 'Luter-King', 'role' => 'publisher'),
'11' => array('id' => '12', 'username' => 'admin', 'firstname' => 'Vasja', 'lastname' => 'Pupkin', 'role' => 'administrator')
);
// обращаемся к ранее объявленному Zend_Json
$json = Zend_Json::encode($rows);
// и выводим преобразованные данные
echo $json;
}
}
?>
Теперь создаём view для отображения списка:
<html>
<head>
<title>gird</title>
<script type="text/javascript" src="<?=base_url();?>js/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<?=base_url();?>js/extjs/ext-all.js"></script>
<script type="text/javascript" src="<?=base_url();?>js/grid.js"></script>
<link rel="stylesheet" type="text/css" href="<?=base_url();?>js/extjs/resources/css/ext-all.css"></link>
<style type="text/css">
.icon-grid {
background-image:url(http://localhost/codeigniter/images/icons/group.png) !important;
}
.add {
background-image:url(http://localhost/codeigniter/images/icons/add.png) !important;
}
.option {
background-image:url(http://localhost/codeigniter/images/icons/plugin.png) !important;
}
.remove {
background-image:url(http://localhost/codeigniter/images/icons/delete.png) !important;
}
#grid{
width: 50%;
margin: 100px auto 0 auto;
}
</style>
</head>
<body>
<div id="grid"></div>
</body>
</html>
Как видите также как и в прошлый раз мы практически ничего не делаем во вьюшке, кроме включения скриптов и определения некоторых стилей, которые нужна для отображения иконок и позиционирования нашего списка.Ну и сердце нашего прилажения grid.js:
Ext.onReady(function(){
//инициализируем подсказки
Ext.QuickTips.init();
// определяем источник данных
var store = new Ext.data.JsonStore({
url: 'http://localhost/codeigniter/users/json_userdata',
baseParams: {
method: 'get'
},
id: 'id',
fields: [
{name: 'id'},
{name: 'username'},
{name: 'firstname'},
{name: 'lastname'},
{name: 'role'}
],
remoteSort: false
});
store.load();
// создаём нашу таблицу
// объвляем чекбоксы
var checkbox = new Ext.grid.CheckboxSelectionModel();
// объвляем нашу таблицу и задаём параметры
var grid = new Ext.grid.GridPanel({
id:'button-grid',
store: store,
cm: new Ext.grid.ColumnModel([
checkbox,
{header: "User Id", width: 40, dataIndex: 'id', sortable: true},
{header: "Username", dataIndex: 'username', sortable: true},
{header: "First name", dataIndex: 'firstname', sortable: true},
{header: "Last name", dataIndex: 'lastname', sortable: true},
{header: "Role", dataIndex: 'role', sortable: true}
]),
sm: checkbox,
viewConfig: {
forceFit:true
},
// добавляем верхний тулбар и задаём кнопки на нём
tbar:[{
text:'Add User',
tooltip:'Add a new user',
iconCls:'add'
}, '-', {
text:'Options',
tooltip:'Look up more user data',
iconCls:'option'
},'-',{
text:'Remove User',
tooltip:'Remove the selected users',
iconCls:'remove'
}],
// задаём параметы для внешнего вида и указываем куда генерировать
width:600,
height:300,
frame:true,
padding:200,
title:'Userlist',
iconCls:'icon-grid',
renderTo: 'grid'
});
});
Вот так вот. На выходе имеем табличку которую я показал выше.
Успехов.
Полезно – надо будет попробовать… но обилие цсс и жс-кода всё же немного смущает, хоть и выглядит всё красиво…
у extJS функционал просто обалденный. посмотри хотя бы примеры на сайте, а насчёт обилия css и js , дык зато xhtml минимум
жалко только он такой тяжелый
To TermiT:
ну это да, не лёгкий, но можно делать свой сборку в которой будет только то что необходимо конкретно тебе уменьшая тем самым размер библиотеки.
Да примеры я посомтрел на сайте – офигенно конечно. Смущает, как и во всех жс фреймворках/библиотеках размер, но если можно делать собственную сборку, то это частично решает этот вопрос.
Не понравилось кстати в примерах то, что нельзя было в гридах выделить мышкой и скопипастить данные… может это только в некоторых компонентах и вообще опционально, но так или иначе это плохо… 8(
С одной стороны вроде бы и да, а с другой – если надо дать пользователю данные то можно экспорт замутить, ну скажем в excel, а если просто для введения новых данных то опять таки auto-complete идёт на помощь
В любом случае на форуме с 2 кликов нашёл воркараунд
Правда не проверил ещё
Подскажите пожалуйста как изменить цвет фона и заголовка GridPanel. Этот голубой цвет напрягает
Дружище! А не пробовал перед публикацией статей проверять их на ошибка в Word`е?
А то глаза ломает читать…
Продаю ВЫХОД на алкоголь в канистрах за 500р.Везде он стоит 1500,2000,2500.
»’РОМ»’ – 40 об. – 850 руб.
»’ВИСКИ »’ – 40 об. – 850 руб.
»’ТЕКИЛА »’– 40 об. – 850 руб.
»’КОНЬЯК «Шоколад»»’ – 40 об. – 800 руб.
»’КОНЬЯК»’ – 40 об.– 800 руб.
»’ВИШНЕВАЯ КОСТОЧКА »’ – 40 об. – 800 руб.
»’АМАРЕТТО»’ – 18-20об. – 800 руб.
»’МАРТИНИ»’ – 800 руб.
»’АБРИКОС »’ (настойка) – 23 об. – 700 руб.
»’РЯБИНА НА КОНЬЯКЕ »’(настойка)– 23 об. – 700 руб.
»’СПИРТ»’ (Черноголовка «Люкс») – 96 об. – 700 руб
E-mail: dubastar1@yandex.ru
ICQ: 464234412