Geekly Articles each Day

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 .
  1. 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 .
  2. 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 .
  3. 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 .
  4. 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 .
  5. 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 .
  6. 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 .
  7. 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 .
  8. 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 .
  9. 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 .
  10. 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 .
  11. 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 .
  12. 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 .
  13. 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 .

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

コントローラー：


コントローラーは、モデル（この例では$ lBoards）を返すデータを単に処理します。
  1. 関数インデックス（）
  2. {
  3. $ this-> load-> view（ 'main-grid' ）;
  4. }
  5. 関数js_listBoards（）
  6. {
  7. $ Boards = $ this-> Boards-> getBoards（）;
  8. foreach （$ボード->結果（） として $行）
  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. }
*このソースコードは、 ソースコードハイライターで強調表示されました。

ここで何が起こっていますか：
  1. ディスプレイがload-> view（...）をjs_listBoardsからダウンロードしないことに注意してください 。すべてのディスプレイはインデックスからのみロードされ、他のどこからもロードされません。
  2. コントローラーによってモデルからデータを取得するには、 $ lBoardsを返すメソッドを呼び出して、データをローカル変数$ Boardsに割り当てます。
  3. foreach（...）を使用して各行を取得し、値を持つ$ item配列を作成します。
注：ここでは、データベースと同じフィールドに同じ名前を使用することをお勧めします。これにより、何をしているのかを追跡し、エラーをより迅速に見つけることが容易になります（後でグリッドのヘッダーを割り当てることができます）。

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

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

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

$ data：これはforeach（）ループが受信したすべてのデータです。 データはjson_encode（$ ITEMLIST）でエンコードする必要があります。そうしないと、json_readerを使用してExtJSで取得して、ExtJSグリッドで使用されるデータストアを作成できません 。 Json_encodeは次のようなものを提供するはずです。
  1. （{ "total" ： "1" 、 "results" ：[{ "WOrder" ： "97350" 、 "PartNumber" ： "H35146AAD" 、 "WOPartQuantity" ： "3" 、 "PartPriority" ： "Medium" 、 "WODateIn " ： " 2007-02-13 " 、 " WODateOut " ： " 2007-02-16 " 、 " PartState " ： "なし " 、 " Partstatus " ： "完了 " 、 " PartLocation " ： "プライマリ " }]}）
*このソースコードは、 ソースコードハイライターで強調表示されました。

JSファイル


それでは、ExtJSファイルに移りましょう。
  1. Ext.onReady（ function （）{
  2. var dataRecord = new Ext.data.Record.create（[
  3. {名前： 'WOrder' }、
  4. {名前： 'PartNumber' }、
  5. {名前： 'WOPartQuantity' }、
  6. {名前： 'PartPriority' }、
  7. {名前： 'WODateIn' 、タイプ： 'date' 、dateFormat： 'Ym-d' }、
  8. {名前： 'WODateOut' 、タイプ： 'date' 、dateFormat： 'Ym-d' }、
  9. {名前： 'PartState' }、
  10. {名前： 'Partstatus' }、
  11. {名前： 'PartLocation' }
  12. ]）;
  13. var dataReader = new Ext.data.JsonReader（{
  14. ルート： 「結果」
  15. }、
  16. dataRecord
  17. ）;
  18. var dataProxy = new Ext.data.HttpProxy（{
  19. url： '../../../index.php/listboards/js_listboards' 、
  20. メソッド： 'POST'
  21. }）;
  22. var dataStore = new Ext.data.Store（{
  23. プロキシ：dat​​aProxy、
  24. リーダー：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" 、レンダラー：Ext.util.Format.dateRenderer（ 'm / d / Y' ）、dataIndex： 'WODateIn' }、
  32. {header： "Date Out" 、レンダラー：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. ストア：dataStore、
  41. id： 'grid' 、
  42. 幅：740、
  43. viewConfig：{
  44. forceFit： true
  45. }、
  46. cm：colModel
  47. }）;
  48. dataStore.load（）;
  49. }）;
*このソースコードは、 ソースコードハイライターで強調表示されました。

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

ディスプレイ（表示）：


そして最後に、マッピングを作成します。 この例ではmain-gridの名前表示は、コントローラーのload-> view（ 'main-grid'）で指定されたものと一致する必要があり、 index（）にあります。 表示コード：
  1. < html >
  2. < 頭 >
  3. < title >グリッドテスト</ title >
  4. <！-Extおよびアプリ固有のスクリプトを含める：->
  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. <！-ここにExtスタイルシートを含めます：->
  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. </ 頭 >
  13. < 本体 >
  14. < h1 >マイグリッド</ h1 >
  15. < div id = "mainMenu" > </ div >
  16. < div id = "mainGrid" > </ div >
  17. </ body >
  18. </ html >
*このソースコードは、 ソースコードハイライターで強調表示されました。

リンク：CodeIgniterユーザーガイドから：それだけです。 ありがとう

Source: https://habr.com/ru/post/J101975/

More articles:


All Articles