Clever Geek Handbook

データの操作-ExtJSとZend Framework、パート1

このトピックでは、データベーステーブルのコンテンツを編集する例を使用して、ExtJSフレームワークとphp Zend Frameworkのjavascriptコンポーネントを操作する方法について説明します。

コンテンツ要素のリストを編集するには、個別のインスタンスであるFormPanelにExtJS GridPanelコンポーネントを使用します。

このレビューは、指定されたフレームワークを備えたロボットの基本を知っている人向けに設計されています。データベース接続の作成、ブートローダーの作成など、詳細については触れません。

開発には、ExtJS 3.0、Zend Framework 1.8.1を使用しました。



Db



最初に、データベースにテーブルを作成します。

  1. CREATE TABLE `articles` ( `id` int ( 11 ) NOT NULL AUTO_INCREMENT , `title` varchar ( 255 ) , `shorttext` text , `createdate` datetime , `text` text , PRIMARY KEY ( `id` ) ) ;



  2. CREATE TABLE `articles` ( `id` int ( 11 ) NOT NULL AUTO_INCREMENT , `title` varchar ( 255 ) , `shorttext` text , `createdate` datetime , `text` text , PRIMARY KEY ( `id` ) ) ;



  3. CREATE TABLE `articles` ( `id` int ( 11 ) NOT NULL AUTO_INCREMENT , `title` varchar ( 255 ) , `shorttext` text , `createdate` datetime , `text` text , PRIMARY KEY ( `id` ) ) ;



  4. CREATE TABLE `articles` ( `id` int ( 11 ) NOT NULL AUTO_INCREMENT , `title` varchar ( 255 ) , `shorttext` text , `createdate` datetime , `text` text , PRIMARY KEY ( `id` ) ) ;



  5. CREATE TABLE `articles` ( `id` int ( 11 ) NOT NULL AUTO_INCREMENT , `title` varchar ( 255 ) , `shorttext` text , `createdate` datetime , `text` text , PRIMARY KEY ( `id` ) ) ;



  6. CREATE TABLE `articles` ( `id` int ( 11 ) NOT NULL AUTO_INCREMENT , `title` varchar ( 255 ) , `shorttext` text , `createdate` datetime , `text` text , PRIMARY KEY ( `id` ) ) ;



  7. CREATE TABLE `articles` ( `id` int ( 11 ) NOT NULL AUTO_INCREMENT , `title` varchar ( 255 ) , `shorttext` text , `createdate` datetime , `text` text , PRIMARY KEY ( `id` ) ) ;



  8. CREATE TABLE `articles` ( `id` int ( 11 ) NOT NULL AUTO_INCREMENT , `title` varchar ( 255 ) , `shorttext` text , `createdate` datetime , `text` text , PRIMARY KEY ( `id` ) ) ;





この例では、ニュースフィードになります。テーブルには、見出し、日付、短いテキスト、フルテキストのフィールドがあります。



グリッドパネル



Zend Frameworkライブラリを使用してデータを操作するためのインターフェースを作成します。

新しいhtmlページを作成します。 必要なものすべて、css、ExtJSを接続します。

  1. var record = Ext。 データ 記録します。 作成 （ [
  2. { 名前 ： 'id' 、タイプ： 'int' } 、
  3. { 名前 ： 'タイトル' } 、
  4. { 名前 ： 「createdate」 、タイプ： 「date」 、 dateFormat ： 「Ymd h：i：s」 } 、
  5. ] ） ;
  6. var ds = 新しい内線 データ ストア （ {
  7. remoteSort ： false 、
  8. プロキシ： 新しい内線 データ HttpProxy （ {
  9. url ： '/ grid / grid /'
  10. } ） 、
  11. リーダー： 新しい Ext。 データ JsonReader （ {
  12. ルート： 'result' 、
  13. totalProperty ： 'totalCount'
  14. } 、記録）
  15. } ） ;
  16. paddingBar = new Ext。 PagingToolbar （ {
  17. pageSize ： 10 、
  18. ストア： ds 、
  19. displayInfo ： true 、
  20. displayMsg ： '{2}のトピック{0}-{1}を表示しています' 、
  21. emptyMsg ： 「表示するトピックはありません」
  22. } ） ;
  23. var renderDate = function （ value 、 p 、 record ） {
  24. 戻り値。 format （ "j / n / YH：i：s" ） ;
  25. } ;
  26. var grid = new Ext。 グリッド GridPanel （ {
  27. ストア： ds 、
  28. trackMouseOver ： false 、
  29. loadMask ： true 、
  30. 列： [ {
  31. id ： 'id' 、
  32. ヘッダー： 「Id」 、
  33. dataIndex ： 'id' 、
  34. 幅： 40 、
  35. ソート可能： true
  36. } 、 {
  37. ヘッダー： 「タイトル」 、
  38. dataIndex ： 'title' 、
  39. 幅： 300 、
  40. ソート可能： true
  41. } 、 {
  42. ヘッダー： "Createdate" 、
  43. dataIndex ： 'createdate' 、
  44. 幅： 200 、
  45. レンダラー： renderDate 、
  46. ソート可能： true
  47. } ] 、
  48. tbar ： [
  49. 新しい内線 ボタン （ {
  50. テキスト： 「新規」 、
  51. ハンドラー： addRecord
  52. } ） 、
  53. 新しい内線 ボタン （ {
  54. テキスト： 「編集」 、
  55. ハンドラー： editRecord
  56. } ） 、
  57. 新しい内線 ボタン （ {
  58. テキスト： 「削除」 、
  59. ハンドラー： deleteRecords
  60. } ） 、
  61. ] 、
  62. bbar ： paddingBar
  63. } ） ;
  64. グリッド。 on （ "rowdblclick" 、 editRecord ） ;
  65. var window = new Ext。 ウィンドウ （ {
  66. id ： 'example-window' 、
  67. title ： "グリッドの例" 、
  68. レイアウト： 'fit' 、
  69. 幅： 800 、
  70. 高さ： 400 、
  71. アイテム： [グリッド]
  72. } ） ;
  73. ウィンドウ。 show （ ） ;
  74. グリッド。 getStore （ ） 。 ロード （ ） ;




コードに関するコメント：

必須フィールドの定義を使用してレコードを作成します。 名前と形式は、データベーステーブルのフィールドに対応する必要があります（1〜5）。 データをロードするコントローラーのURLを指定します（/ grid / grid /）。 結果にはテーブルエントリが含まれます。 totalCountのページをナビゲートできるようにするには、エントリの総数を指定する必要があります。 ページナビゲーション用に、ExtJSライブラリはExt.PagingToolbarコンポーネント（16-22）を提供します。 10個のエントリがページに表示されることを示します。

日付のレンダリング-表示に便利な形式で表示します（23-25）。

コンテンツを追加、編集、削除するには、ツールバーにボタンを追加する必要があります（48-61）。

テーブル内のエントリをダブルクリックするための別のハンドラーが追加されました。 コンテンツを選択してから、ボタンをクリックして編集するのは不便です（64）。

テーブルがウィンドウに表示されます（65-73）。 最後に、データをテーブルにロードします（74）。



結果は次のようになります。





グリッドコントローラー



phpに渡して、クライアント部分とやり取りするコントローラーを作成します。

  1. クラス GridController は Zend_Controller_Actionを拡張します
  2. {
  3. ...
  4. }




モデルを作成してみましょう。テーブル内のレコードの合計数を返すメソッドを1つ追加しました（フレームワークでは、これを行う標準関数は見つかりませんでした）。

  1. クラスグリッドは Zend_Db_Table_Abstractを拡張します
  2. {
  3. パブリック 関数 getCountRows （ ）
  4. {
  5. $ select = $ this- > select （ ） -> from （ array （ 'p' => $ this- > _name ） 、 array （ 'c' => 'COUNT（*）' ） ） ;
  6. $ stmt = $ select- > query （ ） ;
  7. $ result = $ stmt- > fetchAll （ ） ;
  8. return $ result [ 0 ] [ 0 ] ;
  9. }
  10. }




テーブルにデータをロードするグリッドコントローラーのメソッド。



  1. パブリック 関数 gridAction （ ）
  2. {
  3. $ this- > _helper- > viewRenderer- > setNoRender （ ） ;
  4. require_once 'Grid.php' ;
  5. $ grid = new Grid （ array （ 'name' => 'articles' ） ） ;
  6. $ totalCount = $ grid- > getCountRows （ ） ;
  7. $ where = null ;
  8. $ order = "id" ;
  9. $ limit = $ this- > getRequest （ ） -> getParam （ 'limit' 、 5 ） ;
  10. $ start = $ this- > getRequest （ ） -> getParam （ 'start' 、 0 ） ;
  11. $ rows = $ grid- > fetchAll （ $ where 、 $ order 、 $ limit 、 $ start ） ;
  12. $データ = 配列 （
  13. 'totalCount' => $ totalCount 、
  14. 'result' => $ rows- > toArray （ ）
  15. ） ;
  16. echo json_encode （ $ data ） ;
  17. }




このメソッドでは、レコードの総数を見つけてページを選択します。 ページナビゲーションでは、開始値と制限値もパラメーターとして渡されます。 要素とデータの総数で配列を作成し、JSON形式に変換します。 ラッパーを使用せずにヘルパーを使用するか、通常の関数を使用できます。



2番目の部分では、データを編集するためのフォームの作成、編集用のコントローラーの作成、およびデータの削除方法を検討します。


More articles:


All Articles