Geekly Articles each Day
📜 ⬆️ ⬇️

ExtJS and CodeIgniter

The article provides examples of combining ExtJS Grid with CodeIgniter , and retrieving data from MySQL.

We assume that you already have experience with CodeIgniter, since only functions will be placed in the article. I will not tell you how to set up CI and define what Model-View-Controller is, as you should know this if you have worked with CI. If not, at the end of the article there are several useful links from the CodeIgniter User Guide.

First, create a Model (Code) in CodeIgniter:


Model for getting data from MySQL, which we will use in ExtJs Grid in the future. The function is as follows:
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 .

What's going on here:
  1. Querying the required db-> select (...) fields from the WorkOrder table using db-> from (...) and attaching db-> join (...) data from other tables.
  2. Execute the query and get the data in $ lBoards using db-> get () .
  3. We return all the data stored in return $ lBoards .

Controller (Controller):


The controller will simply process the data which will return the model, in our case $ 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 .

What's going on here:
  1. PLEASE NOTE THAT DISPLAYING load-> view (...) IS NOT DOWNLOADED FROM js_listBoards , we load all the mappings only from the index, nowhere else.
  2. In order to get data from the model by the controller, we call the method that returns $ lBoards , and assign the data to the local $ Boards variable.
  3. We use foreach (...) to get each line and create an $ item array with values.
NOTE: It is recommended to use the same names for the fields here, as in the database, this way it will be easier to track what we are doing and find errors much faster (you can later assign any headers in the grid).

So, the existing $ item array will not be enough to get the entire set of rows, so we store this array in the second $ itemList array . This will give us an array of their nested arrays in it.
')
As a result, we get the $ rows and $ data variables:

$ rows: the number of rows of data.
NOTE: $ rows must be obtained, this data will be necessary for ExtJS Grid

$ data: this is all the data received by the foreach () loop . DATA is REQUIRED to ENDED WITH JSON_encode ($ ITEMLIST), otherwise we will not be able to get it in ExtJS using json_reader to create a data store that will be used in ExtJS Grid. Json_encode should give you something like this:
  1. ({ "total" : "1" , "results" : [{ "WOrder" : "97350" , "PartNumber" : "H35146AAD" , "WOPartQuantity" : "3" , "PartPriority" : "Medium" , "WODateIn " : " 2007-02-13 " , " WODateOut " : " 2007-02-16 " , " PartState " : " None " , " Parts " : " Done " , " PartLocation " : " Primary " }]})
* This source code was highlighted with Source Code Highlighter .

Js file


Now go to the ExtJS file:
  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: 'Ym-d' },
  8. {name: 'WODateOut' , type: 'date' , dateFormat: 'Ym-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 .

To get a grid, we must have:
  1. dataRecord: here it is determined which of the fields you need to receive, you can omit all the fields received from the SQL query, but if you want to use some field, you need to define it here. The definition of data types is not mandatory, but if you have data such as date , you need to format it, and specify the date data type, as you can see from the code above.
  2. DataReader: here we specify how to read the data. Since we transmit data in JSON format, we use JsonReader () .
  3. dataProxy: specify where you can get data. In our example, we use the CI model URL url: '../../../index.php/listboards/js_listboards' where listboards is the name of the controller, js_listboards is the function of the controller.
  4. dataStore: here we define the storage in which our data will be stored.
  5. colModel: this is optional, but if the ColumnModel is defined separately, then the Grid code itself is much more convenient, otherwise you will have to define all the columns in the Grid code.
  6. grid: finally we define the Grid itself with the already pre-configured dataStore and colModel

DISPLAY (View):


Finally, we will create a mapping. The name of the mapping, in our case main-grid , must match the one specified in the controller load-> view ('main-grid') and is located at index () . Display code:
  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 .

Links: From the CodeIgniter User Guide:That's all. Thank.

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

More articles:


All Articles