0

グリッド表示とページネーションにもEXTJSを使用しました。問題は、グリッドパネルが表示されても、テーブルの内容がグリッドに表示されないことです。phpとmysqlを使用しました。テーブルからデータを取得するためのPHPコード：

<?php

ini_set('display_errors', 1);
error_reporting(E_ALL | E_STRICT);
define('_PJEXEC', 1);
define('DS', DIRECTORY_SEPARATOR);
define('PJPATH', dirname(__FILE__));
define('DB_DIR', PJPATH . DS . 'DB_SETUP');
define('LIB_DIR', PJPATH . DS . 'library');

if (file_exists(PJPATH . DS . 'template.php')) {
    include_once PJPATH . DS . 'template.php';
    include_once PJPATH . DS . 'process.php';
    include_once LIB_DIR . DS . 'factory.php';
}

            $page_num = $_REQUEST['start'];

            $limit=$_REQUEST['limit'];


            $data = PJFactory::getJobAuditDetails();

            $rows= mysql_num_rows($data);

            $result =  PJFactory::displayJobAuditDetail($page_num, $limit);

            while($num_rows=  mysql_fetch_array($result,MYSQLI_ASSOC)){
                $display[]=array('id'=>$num_rows['id'],
                    'id_job_audit'=>$num_rows['id_job_audit'],
                    'error_message'=>$num_rows['error_message']

                );
               }
          $myData = array('errorDisplay'=>$display, 'totalCount'=>$rows);
           echo json_encode($myData);





?>

Javaスクリプトページ

Ext.require([
    'Ext.grid.*',
    'Ext.data.*'
]);
Ext.onReady(function(){
   // Ext.QuickTips.init();
   var store =new Ext.data.Store({
       proxy: new Ext.data.HttpProxy({
       url: 'processdisplay.php'
      // method: 'GET'  
       }) ,  
     //type: 'ajax',
       reader:  new Ext.data.JsonReader({ 
           type: 'json',
             root:'errorDisplay',
             totalProperty:'totalCount',
             id: 'id'
       },
            [ 
               {name: 'id',mapping: 'id',type: 'int'},

               {name:'id_job_audit',mapping:'id_job_audit',type:'string'},
               {name :'error_message',mapping:'error_message',type:'string'}
         ]
     ),
          autoLoad : true,
           idProperty: 'id'
   });
  // baseParams:{task: "LISTING"}

   var grid = new Ext.grid.GridPanel({

       store: store,

       columns: [

           {header: 'id', width: 30, sortable: true, dataIndex: 'id'},

          // {header: 'id', width: 100, sortable: true, dataIndex: 'id'},

           {header: 'id_job_audit', width: 100, sortable: true, dataIndex: 'id_job_audit'},

           {header: 'error_message', width: 250, sortable: true, dataIndex: 'error_message'}

       ],

       stripeRows: true,

      height:250,

       width:500,

       title:'Job Error Details',
       bbar: new Ext.PagingToolbar({

            pageSize:20,

            store: store,

            displayInfo: true,

            displayMsg: 'Displaying topics {0} - {1} of {2}',

            emptyMsg: "No topics to display"

        })

    });
//store.show();
   store.load();
    // render this grid to paging-grid element
    grid.render('paging-grid');
});

firebugでechojson_encode（$ myData）の結果を確認しました。正しく表示され、firebugでもJSONオプションを確認すると次のように表示されます。

errorDisplay
    [Object { id="1", id_job_audit="4", error_message="Missing Category for Pa...avigation Id - 10097374"}, Object { id="2", id_job_audit="4", error_message="Missing Category for Pa...avigation Id - 10097374"}, Object { id="3", id_job_audit="4", error_message="Missing Category for Pa...avigation Id - 10097374"}, 22 more...]

totalCount
    102

どこが間違っているのかわかりません。グリッドが空で、「表示するトピックがありません」というメッセージが表示されます。明確にしてください。

編集：dbから取得した結果のみをエンコードしてテストしました。その時点で、最初の25レコードのグリッドに表示されました。ie（私の場合はecho json_encode（$ display））

配列の結果はJSonでのみエンコードできますか？なぜなら、配列のオブジェクトとしてfirebugに入る前だったからです。

4

1 に答える 1

1

リーダーはプロキシのプロパティであり、ストアのプロパティではありません。また、モデルを使用してフィールドを提供する必要があります。このように見えるはずです（テストされていません）：

Ext.require(['Ext.grid.*', 'Ext.data.*']);

Ext.define('MyModel', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'id',
        mapping: 'id',
        type: 'int'
    }, {
        name: 'id_job_audit',
        mapping: 'id_job_audit',
        type: 'string'
    }, {
        name: 'error_message',
        mapping: 'error_message',
        type: 'string'
    }]
});

Ext.onReady(function() {
    var store = new Ext.data.Store({
        model: MyModel,
        autoLoad: true,
        proxy: {
            type: 'ajax',
            url: 'processdisplay.php',
            reader: {
                type: 'json',
                root: 'errorDisplay',
                totalProperty: 'totalCount'
            }
        })
    });
    // baseParams:{task: "LISTING"}

    var grid = new Ext.grid.GridPanel({

        store: store,

        columns: [{
            header: 'id',
            width: 30,
            sortable: true,
            dataIndex: 'id'
        },

        // {header: 'id', width: 100, sortable: true, dataIndex: 'id'},

        {
            header: 'id_job_audit',
            width: 100,
            sortable: true,
            dataIndex: 'id_job_audit'
        }, {
            header: 'error_message',
            width: 250,
            sortable: true,
            dataIndex: 'error_message'
        }],

        stripeRows: true,

        height: 250,

        width: 500,

        title: 'Job Error Details',
        bbar: new Ext.PagingToolbar({

            pageSize: 20,

            store: store,

            displayInfo: true,

            displayMsg: 'Displaying topics {0} - {1} of {2}',

            emptyMsg: "No topics to display"

        })

    });
    //store.show();
    store.load();
    // render this grid to paging-grid element
    grid.render('paging-grid');
});
于 2013-01-28T05:45:13.260 に答える