EXT JS JsOnStore无法在Grid Panel中显示

时间:2013-12-07 20:57:14

标签: javascript php extjs

vehicle.js

 Ext.Loader.setConfig({enabled: true});
    Ext.Loader.setPath('Ext.ux', 'ux/');
    Ext.require([
    'Ext.tip.QuickTipManager',
        'Ext.tree.*',
        'Ext.data.*',
        'Ext.window.MessageBox',
        'Ext.window.*',
    ]);
    Ext.onReady(function() {
        Ext.QuickTips.init(); //tips box


        Ext.define('MyApp.view.MyGridPanel', {
        extend: 'Ext.grid.Panel',
        renderTo: Ext.getBody(),
        width:  window.innerWidth,
        header: false,
        height: window.innerHeight,
        store: UserStore,

        initComponent: function() {
            var me = this;

            Ext.applyIf(me, {
                columns: [
                    {
                        xtype: 'gridcolumn',
                        dataIndex: '_id',
                        text: 'Vehicle ID'
                    },
                    {
                        xtype: 'numbercolumn',
                        width: 126,
                        dataIndex: 'Plat_No',
                        text: 'Plat Number'
                    }
                ],
                dockedItems: [
                    {
                        xtype: 'toolbar',
                        dock: 'top',
                        items: [
                            {
                                xtype: 'button',
                                cls: '',
                                width: 59,
                                icon: '',
                                iconCls: 'save',
                                text: 'Save'
                            },
                            {
                                xtype: 'button',
                                cls: '',
                                width: 59,
                                icon: '',
                                iconCls: 'edit',
                                text: 'Edit'
                            }
                        ]
                    }
                ]
            });

            me.callParent(arguments);
        }

    }); 
    var win = Ext.create('MyApp.view.MyGridPanel');
    win.show();


        Ext.define('VehicleModel', {
            extend: 'Ext.data.Model',
            fields: ['_id', 'Plat_No']
        });

        Ext.override(Ext.data.Connection, {
        timeout : 840000
        });

        var UserStore = Ext.create('Ext.data.JsonStore', {
            model: 'VehicleModel',
            autoLoad: false,
            proxy: {
                type: 'ajax',
                url: 'get-vehicle.php',
                baseParams: {  //here you can define params you want to be sent on each request from this store
                            //groupid: 'value1',
                            },
                reader: {
                    type: 'json'
                }
            }
        });

        UserStore.load({
                            params: {  //here you can define params on 'per request' basis
                                    //groupid: 1,
                                    }
                            })

    }); // on ready

获取-vehicle.php

<?php
mysql_connect("localhost", "root", "123456") or die("Could not connect");
mysql_select_db("db_shuttlebus") or die("Could not select database");

$parent_id = $_GET['groupid'];

$query = "SELECT * FROM tbl_vehicle";

$rs = mysql_query($query);

$arr = array();
while($obj = mysql_fetch_object($rs)) {
 $arr[] = $obj;
}

echo json_encode($arr);


?>

但是网格面板仍然是空白的,但是firebug返回get-vehicle.php,如下所示

/localhost/BusTicket/vehicle/get-vehicle.php?_dc=1386449682081&page=1&start=0&limit=25

ParamsHeadersResponseHTML

[{"_id":"1","Plat_No":"PKN7711"},{"_id":"2","Plat_No":"AKC1234"},{"_id":"3","Plat_No":"ADB4333"}]

问题是什么?

2 个答案:

答案 0 :(得分:0)

在您的代理阅读器定义中,您已将root定义为“图片”

由于此配置,读者需要使用以下格式的JSON:

   {
      'images': [
         {"_id":"1","Plat_No":"PKN7711"},
         {"_id":"2","Plat_No":"AKC1234"},
         {"_id":"3","Plat_No":"ADB4333"}
      ]
   }

如果从阅读器配置中删除root定义,阅读器应处理您当前的JSON格式。

答案 1 :(得分:0)

解决了问题,

因为需要在网格面板加载之前加载UserStore。 所以,只需修改网格面板前面的UserStore即可。完成