Question

我已经使用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 Script page

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中检查了echo json_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条记录的网格中显示时。即（在我的情况下，回显json_encode（$ display））

数组结果是否只能在JSon中编码？因为在我作为数组的对象进入firebug之前。

Answer 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');
});

Extjs网格不显示表数据

1 个答案: