ExtJSとCodeIgniter

この記事では、 ExtJS GridをCodeIgniterと組み合わせ、MySQLからデータを取得する例を示します。

この記事では機能のみが掲載されるため、CodeIgniterの経験があることを前提としています。 CIの構成方法については説明しません。また、Model-View-Controllerの定義については説明しません。CIを使用したことがある場合は、これを知っておく必要があるためです。そうでない場合は、記事の最後にCodeIgniter User Guideからの便利なリンクがあります。

まず、CodeIgniterモデルを作成します。

MySQLからデータを取得するためのモデル。これは、将来ExtJsグリッドで使用します。機能は次のとおりです。

function getBoards() { $ this ->db-> select ( 'WOrder, PartNumber, WOPartQuantity, PartPriority, WODateIn, WODateOut, PartState, PartStatus, PartLocation' ); $ this ->db-> from ( 'WorkOrder' ); $ this ->db->join( 'PartNumber' , 'WorkOrder.PartNumberID = PartNumber.PartNumberID' ); $ this ->db->join( 'PartState' , 'PartState.PartStateID = WorkOrder.PartStateID' ); $ this ->db->join( 'PartStatus' , 'PartStatus.PartStatusID = WorkOrder.PartStatusID' ); $ this ->db->join( 'PartPriority' , 'PartPriority.PartPriorityID = WorkOrder.PartPriorityID' ); $ this ->db->join( 'PartLocation' , 'PartLocation.PartLocationID = WorkOrder.PartLocationID' ); $ this ->db->limit(15); $lBoards = $ this ->db-> get (); return $lBoards; } * This source code was highlighted with Source Code Highlighter .

function getBoards() { $ this ->db-> select ( 'WOrder, PartNumber, WOPartQuantity, PartPriority, WODateIn, WODateOut, PartState, PartStatus, PartLocation' ); $ this ->db-> from ( 'WorkOrder' ); $ this ->db->join( 'PartNumber' , 'WorkOrder.PartNumberID = PartNumber.PartNumberID' ); $ this ->db->join( 'PartState' , 'PartState.PartStateID = WorkOrder.PartStateID' ); $ this ->db->join( 'PartStatus' , 'PartStatus.PartStatusID = WorkOrder.PartStatusID' ); $ this ->db->join( 'PartPriority' , 'PartPriority.PartPriorityID = WorkOrder.PartPriorityID' ); $ this ->db->join( 'PartLocation' , 'PartLocation.PartLocationID = WorkOrder.PartLocationID' ); $ this ->db->limit(15); $lBoards = $ this ->db-> get (); return $lBoards; } * This source code was highlighted with Source Code Highlighter .

function getBoards() { $ this ->db-> select ( 'WOrder, PartNumber, WOPartQuantity, PartPriority, WODateIn, WODateOut, PartState, PartStatus, PartLocation' ); $ this ->db-> from ( 'WorkOrder' ); $ this ->db->join( 'PartNumber' , 'WorkOrder.PartNumberID = PartNumber.PartNumberID' ); $ this ->db->join( 'PartState' , 'PartState.PartStateID = WorkOrder.PartStateID' ); $ this ->db->join( 'PartStatus' , 'PartStatus.PartStatusID = WorkOrder.PartStatusID' ); $ this ->db->join( 'PartPriority' , 'PartPriority.PartPriorityID = WorkOrder.PartPriorityID' ); $ this ->db->join( 'PartLocation' , 'PartLocation.PartLocationID = WorkOrder.PartLocationID' ); $ this ->db->limit(15); $lBoards = $ this ->db-> get (); return $lBoards; } * This source code was highlighted with Source Code Highlighter .

function getBoards() { $ this ->db-> select ( 'WOrder, PartNumber, WOPartQuantity, PartPriority, WODateIn, WODateOut, PartState, PartStatus, PartLocation' ); $ this ->db-> from ( 'WorkOrder' ); $ this ->db->join( 'PartNumber' , 'WorkOrder.PartNumberID = PartNumber.PartNumberID' ); $ this ->db->join( 'PartState' , 'PartState.PartStateID = WorkOrder.PartStateID' ); $ this ->db->join( 'PartStatus' , 'PartStatus.PartStatusID = WorkOrder.PartStatusID' ); $ this ->db->join( 'PartPriority' , 'PartPriority.PartPriorityID = WorkOrder.PartPriorityID' ); $ this ->db->join( 'PartLocation' , 'PartLocation.PartLocationID = WorkOrder.PartLocationID' ); $ this ->db->limit(15); $lBoards = $ this ->db-> get (); return $lBoards; } * This source code was highlighted with Source Code Highlighter .

function getBoards() { $ this ->db-> select ( 'WOrder, PartNumber, WOPartQuantity, PartPriority, WODateIn, WODateOut, PartState, PartStatus, PartLocation' ); $ this ->db-> from ( 'WorkOrder' ); $ this ->db->join( 'PartNumber' , 'WorkOrder.PartNumberID = PartNumber.PartNumberID' ); $ this ->db->join( 'PartState' , 'PartState.PartStateID = WorkOrder.PartStateID' ); $ this ->db->join( 'PartStatus' , 'PartStatus.PartStatusID = WorkOrder.PartStatusID' ); $ this ->db->join( 'PartPriority' , 'PartPriority.PartPriorityID = WorkOrder.PartPriorityID' ); $ this ->db->join( 'PartLocation' , 'PartLocation.PartLocationID = WorkOrder.PartLocationID' ); $ this ->db->limit(15); $lBoards = $ this ->db-> get (); return $lBoards; } * This source code was highlighted with Source Code Highlighter .

function getBoards() { $ this ->db-> select ( 'WOrder, PartNumber, WOPartQuantity, PartPriority, WODateIn, WODateOut, PartState, PartStatus, PartLocation' ); $ this ->db-> from ( 'WorkOrder' ); $ this ->db->join( 'PartNumber' , 'WorkOrder.PartNumberID = PartNumber.PartNumberID' ); $ this ->db->join( 'PartState' , 'PartState.PartStateID = WorkOrder.PartStateID' ); $ this ->db->join( 'PartStatus' , 'PartStatus.PartStatusID = WorkOrder.PartStatusID' ); $ this ->db->join( 'PartPriority' , 'PartPriority.PartPriorityID = WorkOrder.PartPriorityID' ); $ this ->db->join( 'PartLocation' , 'PartLocation.PartLocationID = WorkOrder.PartLocationID' ); $ this ->db->limit(15); $lBoards = $ this ->db-> get (); return $lBoards; } * This source code was highlighted with Source Code Highlighter .

function getBoards() { $ this ->db-> select ( 'WOrder, PartNumber, WOPartQuantity, PartPriority, WODateIn, WODateOut, PartState, PartStatus, PartLocation' ); $ this ->db-> from ( 'WorkOrder' ); $ this ->db->join( 'PartNumber' , 'WorkOrder.PartNumberID = PartNumber.PartNumberID' ); $ this ->db->join( 'PartState' , 'PartState.PartStateID = WorkOrder.PartStateID' ); $ this ->db->join( 'PartStatus' , 'PartStatus.PartStatusID = WorkOrder.PartStatusID' ); $ this ->db->join( 'PartPriority' , 'PartPriority.PartPriorityID = WorkOrder.PartPriorityID' ); $ this ->db->join( 'PartLocation' , 'PartLocation.PartLocationID = WorkOrder.PartLocationID' ); $ this ->db->limit(15); $lBoards = $ this ->db-> get (); return $lBoards; } * This source code was highlighted with Source Code Highlighter .

function getBoards() { $ this ->db-> select ( 'WOrder, PartNumber, WOPartQuantity, PartPriority, WODateIn, WODateOut, PartState, PartStatus, PartLocation' ); $ this ->db-> from ( 'WorkOrder' ); $ this ->db->join( 'PartNumber' , 'WorkOrder.PartNumberID = PartNumber.PartNumberID' ); $ this ->db->join( 'PartState' , 'PartState.PartStateID = WorkOrder.PartStateID' ); $ this ->db->join( 'PartStatus' , 'PartStatus.PartStatusID = WorkOrder.PartStatusID' ); $ this ->db->join( 'PartPriority' , 'PartPriority.PartPriorityID = WorkOrder.PartPriorityID' ); $ this ->db->join( 'PartLocation' , 'PartLocation.PartLocationID = WorkOrder.PartLocationID' ); $ this ->db->limit(15); $lBoards = $ this ->db-> get (); return $lBoards; } * This source code was highlighted with Source Code Highlighter .

function getBoards() { $ this ->db-> select ( 'WOrder, PartNumber, WOPartQuantity, PartPriority, WODateIn, WODateOut, PartState, PartStatus, PartLocation' ); $ this ->db-> from ( 'WorkOrder' ); $ this ->db->join( 'PartNumber' , 'WorkOrder.PartNumberID = PartNumber.PartNumberID' ); $ this ->db->join( 'PartState' , 'PartState.PartStateID = WorkOrder.PartStateID' ); $ this ->db->join( 'PartStatus' , 'PartStatus.PartStatusID = WorkOrder.PartStatusID' ); $ this ->db->join( 'PartPriority' , 'PartPriority.PartPriorityID = WorkOrder.PartPriorityID' ); $ this ->db->join( 'PartLocation' , 'PartLocation.PartLocationID = WorkOrder.PartLocationID' ); $ this ->db->limit(15); $lBoards = $ this ->db-> get (); return $lBoards; } * This source code was highlighted with Source Code Highlighter .

function getBoards() { $ this ->db-> select ( 'WOrder, PartNumber, WOPartQuantity, PartPriority, WODateIn, WODateOut, PartState, PartStatus, PartLocation' ); $ this ->db-> from ( 'WorkOrder' ); $ this ->db->join( 'PartNumber' , 'WorkOrder.PartNumberID = PartNumber.PartNumberID' ); $ this ->db->join( 'PartState' , 'PartState.PartStateID = WorkOrder.PartStateID' ); $ this ->db->join( 'PartStatus' , 'PartStatus.PartStatusID = WorkOrder.PartStatusID' ); $ this ->db->join( 'PartPriority' , 'PartPriority.PartPriorityID = WorkOrder.PartPriorityID' ); $ this ->db->join( 'PartLocation' , 'PartLocation.PartLocationID = WorkOrder.PartLocationID' ); $ this ->db->limit(15); $lBoards = $ this ->db-> get (); return $lBoards; } * This source code was highlighted with Source Code Highlighter .

function getBoards() { $ this ->db-> select ( 'WOrder, PartNumber, WOPartQuantity, PartPriority, WODateIn, WODateOut, PartState, PartStatus, PartLocation' ); $ this ->db-> from ( 'WorkOrder' ); $ this ->db->join( 'PartNumber' , 'WorkOrder.PartNumberID = PartNumber.PartNumberID' ); $ this ->db->join( 'PartState' , 'PartState.PartStateID = WorkOrder.PartStateID' ); $ this ->db->join( 'PartStatus' , 'PartStatus.PartStatusID = WorkOrder.PartStatusID' ); $ this ->db->join( 'PartPriority' , 'PartPriority.PartPriorityID = WorkOrder.PartPriorityID' ); $ this ->db->join( 'PartLocation' , 'PartLocation.PartLocationID = WorkOrder.PartLocationID' ); $ this ->db->limit(15); $lBoards = $ this ->db-> get (); return $lBoards; } * This source code was highlighted with Source Code Highlighter .

function getBoards() { $ this ->db-> select ( 'WOrder, PartNumber, WOPartQuantity, PartPriority, WODateIn, WODateOut, PartState, PartStatus, PartLocation' ); $ this ->db-> from ( 'WorkOrder' ); $ this ->db->join( 'PartNumber' , 'WorkOrder.PartNumberID = PartNumber.PartNumberID' ); $ this ->db->join( 'PartState' , 'PartState.PartStateID = WorkOrder.PartStateID' ); $ this ->db->join( 'PartStatus' , 'PartStatus.PartStatusID = WorkOrder.PartStatusID' ); $ this ->db->join( 'PartPriority' , 'PartPriority.PartPriorityID = WorkOrder.PartPriorityID' ); $ this ->db->join( 'PartLocation' , 'PartLocation.PartLocationID = WorkOrder.PartLocationID' ); $ this ->db->limit(15); $lBoards = $ this ->db-> get (); return $lBoards; } * This source code was highlighted with Source Code Highlighter .

function getBoards() { $ this ->db-> select ( 'WOrder, PartNumber, WOPartQuantity, PartPriority, WODateIn, WODateOut, PartState, PartStatus, PartLocation' ); $ this ->db-> from ( 'WorkOrder' ); $ this ->db->join( 'PartNumber' , 'WorkOrder.PartNumberID = PartNumber.PartNumberID' ); $ this ->db->join( 'PartState' , 'PartState.PartStateID = WorkOrder.PartStateID' ); $ this ->db->join( 'PartStatus' , 'PartStatus.PartStatusID = WorkOrder.PartStatusID' ); $ this ->db->join( 'PartPriority' , 'PartPriority.PartPriorityID = WorkOrder.PartPriorityID' ); $ this ->db->join( 'PartLocation' , 'PartLocation.PartLocationID = WorkOrder.PartLocationID' ); $ this ->db->limit(15); $lBoards = $ this ->db-> get (); return $lBoards; } * This source code was highlighted with Source Code Highlighter .

function getBoards() { $ this ->db-> select ( 'WOrder, PartNumber, WOPartQuantity, PartPriority, WODateIn, WODateOut, PartState, PartStatus, PartLocation' ); $ this ->db-> from ( 'WorkOrder' ); $ this ->db->join( 'PartNumber' , 'WorkOrder.PartNumberID = PartNumber.PartNumberID' ); $ this ->db->join( 'PartState' , 'PartState.PartStateID = WorkOrder.PartStateID' ); $ this ->db->join( 'PartStatus' , 'PartStatus.PartStatusID = WorkOrder.PartStatusID' ); $ this ->db->join( 'PartPriority' , 'PartPriority.PartPriorityID = WorkOrder.PartPriorityID' ); $ this ->db->join( 'PartLocation' , 'PartLocation.PartLocationID = WorkOrder.PartLocationID' ); $ this ->db->limit(15); $lBoards = $ this ->db-> get (); return $lBoards; } * This source code was highlighted with Source Code Highlighter .

function getBoards() { $ this ->db-> select ( 'WOrder, PartNumber, WOPartQuantity, PartPriority, WODateIn, WODateOut, PartState, PartStatus, PartLocation' ); $ this ->db-> from ( 'WorkOrder' ); $ this ->db->join( 'PartNumber' , 'WorkOrder.PartNumberID = PartNumber.PartNumberID' ); $ this ->db->join( 'PartState' , 'PartState.PartStateID = WorkOrder.PartStateID' ); $ this ->db->join( 'PartStatus' , 'PartStatus.PartStatusID = WorkOrder.PartStatusID' ); $ this ->db->join( 'PartPriority' , 'PartPriority.PartPriorityID = WorkOrder.PartPriorityID' ); $ this ->db->join( 'PartLocation' , 'PartLocation.PartLocationID = WorkOrder.PartLocationID' ); $ this ->db->limit(15); $lBoards = $ this ->db-> get (); return $lBoards; } * This source code was highlighted with Source Code Highlighter .

ここで何が起こっていますか：

db-> from（...）を使用してWorkOrderテーブルから必要なdb-> select（...）フィールドを要求し、他のテーブルのdb-> join（...）データを結合します 。
リクエストを実行し、 db-> get（）を使用して$ lBoardsのデータを取得します。
return $ lBoardsに保存されているすべてのデータを返します。

コントローラー：

コントローラーは、モデル（この例では$ lBoards）を返すデータを単に処理します。

関数インデックス（）
{
$ this-> load-> view（ 'main-grid' ）;
}
関数js_listBoards（）
{
$ Boards = $ this-> Boards-> getBoards（）;
foreach （$ボード->結果（）として $行）
{
$ item = Array（ "WOrder" => $ row-> WOrder、
"PartNumber" => $ row-> PartNumber、
"WOPartQuantity" => $ row-> WOPartQuantity、
"PartPriority" => $ row-> PartPriority、
"WODateIn" => $ row-> WODateIn、
"WODateOut" => $ row-> WODateOut、
「PartState」 => $ row-> PartState、
"Partstatus" => $ row-> PartStatus、
"PartLocation" => $ row-> PartLocation）;
$ itemList [] = $ item;
}
$ rows = $ Boards-> num_rows（）;
$ data = json_encode（$ itemList）;
echo '（{"total"： "' 。$ rows。 '"、 "results"：' 。$ data。 '}）' ;
}
*このソースコードは、ソースコードハイライターで強調表示されました。

ここで何が起こっていますか：

ディスプレイがload-> view（...）をjs_listBoardsからダウンロードしないことに注意してください 。すべてのディスプレイはインデックスからのみロードされ、他のどこからもロードされません。
コントローラーによってモデルからデータを取得するには、 $ lBoardsを返すメソッドを呼び出して、データをローカル変数$ Boardsに割り当てます。
foreach（...）を使用して各行を取得し、値を持つ$ item配列を作成します。

注：ここでは、データベースと同じフィールドに同じ名前を使用することをお勧めします。これにより、何をしているのかを追跡し、エラーをより迅速に見つけることが容易になります（後でグリッドのヘッダーを割り当てることができます）。

したがって、既存の$ item配列では行のセット全体を取得するのに十分ではないため、この配列を2番目の$ itemList配列に保存します。これにより、ネストされた配列の配列が得られます。

その結果、変数$ rowsおよび$ dataを取得します。

$ rows：データの行数。

注： $行を取得する必要があります。このデータはExtJSグリッドに必要です

$ data：これはforeach（）ループが受信したすべてのデータです。 データはjson_encode（$ ITEMLIST）でエンコードする必要があります。そうしないと、json_readerを使用してExtJSで取得して、ExtJSグリッドで使用されるデータストアを作成できません 。 Json_encodeは次のようなものを提供するはずです。

（{ "total" ： "1" 、 "results" ：[{ "WOrder" ： "97350" 、 "PartNumber" ： "H35146AAD" 、 "WOPartQuantity" ： "3" 、 "PartPriority" ： "Medium" 、 "WODateIn " ： " 2007-02-13 " 、 " WODateOut " ： " 2007-02-16 " 、 " PartState " ： "なし " 、 " Partstatus " ： "完了 " 、 " PartLocation " ： "プライマリ " }]}）
*このソースコードは、ソースコードハイライターで強調表示されました。

JSファイル

それでは、ExtJSファイルに移りましょう。

Ext.onReady（ function （）{
var dataRecord = new Ext.data.Record.create（[
{名前： 'WOrder' }、
{名前： 'PartNumber' }、
{名前： 'WOPartQuantity' }、
{名前： 'PartPriority' }、
{名前： 'WODateIn' 、タイプ： 'date' 、dateFormat： 'Ym-d' }、
{名前： 'WODateOut' 、タイプ： 'date' 、dateFormat： 'Ym-d' }、
{名前： 'PartState' }、
{名前： 'Partstatus' }、
{名前： 'PartLocation' }
]）;
var dataReader = new Ext.data.JsonReader（{
ルート：「結果」
}、
dataRecord
）;
var dataProxy = new Ext.data.HttpProxy（{
url： '../../../index.php/listboards/js_listboards' 、
メソッド： 'POST'
}）;
var dataStore = new Ext.data.Store（{
プロキシ：dataProxy、
リーダー：dataReader
}）;
var colModel = new Ext.grid.ColumnModel（[
{header： "Work Order" 、sortable： true 、dataIndex： 'WOrder' }、
{header： "Part Number" 、dataIndex： 'PartNumber' }、
{header： "QTY" 、dataIndex： 'WOPartQuantity' }、
{header： "Priority" 、sortable： true 、dataIndex： 'PartPriority' }、
{header： "Date In" 、レンダラー：Ext.util.Format.dateRenderer（ 'm / d / Y' ）、dataIndex： 'WODateIn' }、
{header： "Date Out" 、レンダラー：Ext.util.Format.dateRenderer（ 'm / d / Y' ）、dataIndex： 'WODateOut' }、
{header： "Part State" 、dataIndex： 'PartState' }、
{header： "Part Status" 、dataIndex： 'PartStatus' }、
{header： "Part Location" 、dataIndex： 'PartLocation' }
]）;
var grid = new Ext.grid.GridPanel（{
autoHeight： true 、
renderTo： 'mainGrid' 、
ストア：dataStore、
id： 'grid' 、
幅：740、
viewConfig：{
forceFit： true
}、
cm：colModel
}）;
dataStore.load（）;
}）;
*このソースコードは、ソースコードハイライターで強調表示されました。

グリッドを取得するには、次のものが必要です。

dataRecord：取得するフィールドを決定します。SQLクエリから受信したすべてのフィールドを指定することはできませんが、フィールドを使用する場合は、ここで定義する必要があります。データ型の定義はオプションですが、 dateなどのデータがある場合は、上記のコードからわかるように、フォーマットして日付データ型を指定する必要があります。
DataReader：ここで、データの読み取り方法を示します。 JSON形式でデータを送信するため、 JsonReader（）を使用します。
dataProxy：データを取得する場所を示します。この例では、CIモデルURL url： '../../../index.php/listboards/js_listboards'を使用します。ここで、 listboardsはコントローラーの名前、 js_listboardsはコントローラーの機能です。
dataStore：ここで、データを保存するストレージを定義します。
colModel：これはオプションですが、ColumnModelが個別に定義されている場合、グリッド自体のコードははるかに便利に見えます。そうでない場合は、グリッドコードのすべての列を定義する必要があります。
グリッド：最後に、事前に設定されたdataStoreとcolModelを使用してグリッド自体を定義します

ディスプレイ（表示）：

そして最後に、マッピングを作成します。この例ではmain-gridの名前表示は、コントローラーのload-> view（ 'main-grid'）で指定されたものと一致する必要があり、 index（）にあります。表示コード：

< html >
< 頭 >
< title >グリッドテスト</ title >
<！-Extおよびアプリ固有のスクリプトを含める：->
< script type = "text / javascript" src = "system / resources / js / extjs / adapter / ext / ext-base.js" > </ script >
<script type = "text / javascript" src = "system / resources / js / extjs / ext-all-debug.js" > </ script>
<script type = "text / javascript" src = "system / resources / js / js_listboards.js" > </ script>
<script type = "text / javascript" src = "system / resources / js / mainMenu.js" > </ script >
<！-ここにExtスタイルシートを含めます：->
< link rel = "stylesheet" type = "text / css" href = "system / resources / js / extjs / resources / css / ext-all.css" >
< link rel = "stylesheet" type = "text / css" href = "system / application / views / css / ExtStart.css" >
</ 頭 >
< 本体 >
< h1 >マイグリッド</ h1 >
< div id = "mainMenu" > </ div >
< div id = "mainGrid" > </ div >
</ body >
</ html >
*このソースコードは、ソースコードハイライターで強調表示されました。

リンク：CodeIgniterユーザーガイドから：

それだけです。ありがとう

All Articles

ExtJSとCodeIgniter

まず、CodeIgniterモデルを作成します。

コントローラー：

JSファイル

ディスプレイ（表示）：

More articles: