ExtJS и CodeIgniter

В статье приведены примеры объединения ExtJS Grid с CodeIgniter, и получение данных из MySQL.

Будем считать, что у Вас уже есть опыт работы с CodeIgniter, поскольку в статье будут размещаться только функции. Я не буду рассказывать как настроить CI и давать определения, что такое Model-View-Controller поскольку Вы должны знать это, если работали с CI. Если нет, то в конце статьи приведено несколько полезных ссылок из руководство пользователя CodeIgniter.

Для начала создадим в CodeIgniter Модель (Model):

Модель для получения данные из MySQL, которые в дальнейшем мы будем использовать в ExtJs Grid. Функция выглядит следующим образом:

1. function getBoards()
2. {
3.   $this->db->select('WOrder, PartNumber, WOPartQuantity, PartPriority, WODateIn, WODateOut, PartState, PartStatus, PartLocation');
4.   $this->db->from('WorkOrder');
5.     $this->db->join('PartNumber', 'WorkOrder.PartNumberID = PartNumber.PartNumberID');
6.     $this->db->join('PartState', 'PartState.PartStateID = WorkOrder.PartStateID');
7.     $this->db->join('PartStatus', 'PartStatus.PartStatusID = WorkOrder.PartStatusID');
8.     $this->db->join('PartPriority', 'PartPriority.PartPriorityID = WorkOrder.PartPriorityID');
9.     $this->db->join('PartLocation', 'PartLocation.PartLocationID = WorkOrder.PartLocationID');
10.   $this->db->limit(15);
11.   $lBoards = $this->db->get();
12.   return $lBoards;
13. }

* This source code was highlighted with Source Code Highlighter.

Что тут происходит:

1. Запрос необходимых нам полей db->select(...) из таблицы WorkOrder используя db->from(...) и присоединение db->join(...) данных из других таблиц.
2. Выполняем запрос и получаем данные в $lBoards используя db->get().
3. Возвращаем все данные, хранящиеся в return $lBoards.

Контроллер (Controller):

Контроллер просто будет обрабатывать данные которая вернет модель, в нашем случае $lBoards.

1. function index()
2. {
3.   $this->load->view('main-grid');
4. }
5. function js_listBoards()
6. {
7.   $Boards = $this->Boards->getBoards();
8.   foreach($Boards->result() as $row)
9.   {
10.     $item = Array("WOrder" => $row->WOrder,
11.            "PartNumber" => $row->PartNumber,
12.            "WOPartQuantity" => $row->WOPartQuantity,
13.            "PartPriority" => $row->PartPriority,
14.            "WODateIn" => $row->WODateIn,
15.            "WODateOut" => $row->WODateOut,
16.            "PartState" => $row->PartState,
17.            "Partstatus" => $row->PartStatus,
18.            "PartLocation" => $row->PartLocation);
19.     $itemList[] = $item;
20.   }
21.   $rows = $Boards->num_rows();
22.   $data = json_encode($itemList);
23.   echo '({"total":"' . $rows . '","results":' . $data . '})';
24. }

* This source code was highlighted with Source Code Highlighter.

Что здесь происходит:

1. ОБРАТИТЕ ВНИМАНИЕ, ЧТО ОТОБРАЖЕНИЕ load->view(...) НЕ ЗАГРУЖАЮТСЯ ИЗ js_listBoards, все отображения мы загружаем только из индекса, больше нигде.
2. Для того, чтобы получить данные из модели контроллером, мы вызываем метод, который возвращает $lBoards, и присваиваем данные локальной переменной $Boards.
3. Мы используем foreach(...) для получения каждой строки и создания $item массива со значениями.

ПРИМЕЧАНИЕ: Рекомендуется использовать здесь одинаковые имена для полей, как и в БД, таким образом будет легче отслеживать, что мы делаем, и найти ошибки гораздо быстрее (позже можно назначать любые заголовки в Grid'е).

Итак, имеющегося массива $item будет не достаточно, для того чтобы получить весь набор строк, поэтому мы сохраняем этот массив во втором массиве $itemList. Это даст нам массив их вложенных массивов в нем.

В итоге получаем переменные $rows и $data:

$rows: количество строк данных.
ПРИМЕЧАНИЕ: обязательно нужно получить $rows, эти данные будут необходимы для ExtJS Grid

$data: это все данные, полученные циклом foreach(). ДАННЫЕ НЕОБХОДИМО ЗАКОДИРОВАТЬ С ПОМОЩЬЮ json_encode($ITEMLIST) иначе мы не сможем получить их в ExtJS используя json_reader для создания хранилища данных, которое будут использоваться в ExtJS Grid. Json_encode должно дать вам что-то вроде этого:

1. ({"total":"1","results":[{"WOrder":"97350","PartNumber":"H35146AAD","WOPartQuantity":"3","PartPriority":"Medium","WODateIn":"2007-02-13","WODateOut":"2007-02-16","PartState":"None","Partstatus":"Done ","PartLocation":"Primary"}]})

* This source code was highlighted with Source Code Highlighter.

JS файла

Теперь перейдем к ExtJS файлу:

1. Ext.onReady(function(){    
2.   var dataRecord = new Ext.data.Record.create([
3.     {name: 'WOrder'},
4.     {name: 'PartNumber'},
5.     {name: 'WOPartQuantity'},
6.     {name: 'PartPriority'},
7.     {name: 'WODateIn', type: 'date', dateFormat: 'Y-m-d'},
8.     {name: 'WODateOut', type: 'date', dateFormat: 'Y-m-d'},
9.     {name: 'PartState'},
10.     {name: 'Partstatus'},
11.     {name: 'PartLocation'}
12.   ]);
13.   var dataReader = new Ext.data.JsonReader({
14.     root: 'results'
15.     },
16.     dataRecord
17.   );
18.   var dataProxy = new Ext.data.HttpProxy({
19.     url: '../../../index.php/listboards/js_listboards',
20.     method: 'POST'
21.   });
22.   var dataStore = new Ext.data.Store({
23.       proxy: dataProxy,
24.       reader: dataReader
25.   });
26.   var colModel = new Ext.grid.ColumnModel([
27.     {header: "Work Order", sortable: true, dataIndex: 'WOrder'},
28.     {header: "Part Number", dataIndex: 'PartNumber'},
29.     {header: "QTY", dataIndex: 'WOPartQuantity'},
30.     {header: "Priority", sortable: true, dataIndex: 'PartPriority'},
31.     {header: "Date In", renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'WODateIn'},
32.     {header: "Date Out",renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'WODateOut'},
33.     {header: "Part State", dataIndex: 'PartState'},
34.     {header: "Part Status", dataIndex: 'PartStatus'},
35.     {header: "Part Location", dataIndex: 'PartLocation'}
36.   ]);
37.   var grid = new Ext.grid.GridPanel({
38.     autoHeight: true,
39.     renderTo: 'mainGrid',
40.     store: dataStore,
41.     id: 'grid',
42.     width: 740,
43.     viewConfig: {
44.       forceFit: true
45.     },
46.     cm: colModel
47.   });
48.   dataStore.load();
49. });

* This source code was highlighted with Source Code Highlighter.

Чтобы получить Grid, у нас должны быть:

1. dataRecord: здесь определяется, какие из полей необходимо получить, можно не указывать все поля полученные из запроса SQL, но если вы хотите использовать какое то поле, вам необходимо определить его здесь. Определение типов данных не является обязательной, но если у вас есть такие данные как date, их необходимо отформатировать, и указать тип данных date, как вы можете видеть из кода выше.
2. DataReader: тут мы указываем, как нужно считывать данные. Так как у нас передаются данные форматом JSON, мы используем JsonReader().
3. dataProxy: указываем, где можно получить данные. В нашем примере мы используем модель CI URL url: '../../../index.php/listboards/js_listboards' где listboards — имя контроллера, js_listboards — функция контроллера.
4. dataStore: здесь мы определяем хранилище в котором будут храниться наши данные.
5. colModel: это необязательно, но если ColumnModel определена отдельно, то код самого Grid'а выглядит гораздо удобнее, в противном случае вам придется определять все столбцы в коде Grid'а.
6. grid: наконец мы определяем сам Grid с уже заранее настроенными dataStore и colModel

ОТОБРАЖЕНИЕ (View):

И, наконец, мы создадим отображение. Имя отображение, в нашем случае main-grid, должно совпадать с указанным в контроллере load->view('main-grid') и находится в index(). Код отображения:

1. <html>
2. <head>
3.   <title>Grid Test</title>
4.   <!-- Include Ext and app-specific scripts: -->
5.   <script type="text/javascript" src="system/resources/js/extjs/adapter/ext/ext-base.js"></script>
6.   <script type="text/javascript" src="system/resources/js/extjs/ext-all-debug.js"></script>
7.   <script type="text/javascript" src="system/resources/js/js_listboards.js"></script>
8.   <script type="text/javascript" src="system/resources/js/mainMenu.js"></script>
9.   <!-- Include Ext stylesheets here: -->
10.   <link rel="stylesheet" type="text/css" href="system/resources/js/extjs/resources/css/ext-all.css">
11.   <link rel="stylesheet" type="text/css" href="system/application/views/css/ExtStart.css">
12. </head>
13. <body>
14.   <h1>My Grid</h1>
15.   <div id="mainMenu"></div>
16.   <div id="mainGrid"></div>
17. </body>
18. </html>

* This source code was highlighted with Source Code Highlighter.

Ссылки: Из руководства пользователя CodeIgniter:

• URL в CodeIgniter
• Контроллеры
• Отображения
• Модели
• Работа с базами данных

Вот собственно и все. Спасибо.