为什么来自json的数据没有显示在网格中

时间:2011-03-17 07:10:44

标签: json extjs grid

这是我的js文件dashboard.js

Ext.onReady(function(){
    Ext.QuickTips.init(); // **want to know why this is used** 

    // NOTE: This is an example showing simple state management. During development,
    // it is generally best to disable state management as dynamically-generated ids
    // can change across page loads, leading to unpredictable results.  The developer
    // should ensure that stable state ids are set for stateful components in real apps.    
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());**want to know why this is used** 


    // create the data store
    var store = new Ext.data.JsonStore({
        // store configs
        autoDestroy: true,
        autoLoad :true,
        url: 'api/index.php?_command=getresellers',
        storeId: 'getresellers',
        // reader configs
        root: 'cityarray',
        idProperty: 'cityname',
        fields: ['cityname', 'totfollowup', 'totcallback', 'totnotintrested', 'totdealsclosed', 'totcallsreceived', 'totcallsentered', 'totresellerregistered', 
            'countiro', 'irotransferred',  'irodeferred'
        ]
    });


    // create the Grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {
                id       :'cityname',
                header   : 'cityname', 
                width    : 160, 
                sortable : true, 
                dataIndex: 'cityname'
            }
        ],
        stripeRows: true,
        autoExpandColumn: 'cityname',
        height: 350,
        width: 600,
        title: 'Reseller Dashboard',
        // config options for stateful behavior
        stateful: true,
        stateId: 'grid'
    });

    // render the grid to the specified div in the page
    grid.render('dashboard');
});

我提出了一些评论,我想知道为什么要使用它。 想知道为何使用 这是我的html文件

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Reseller DashBoard</title>

    <!-- ** CSS ** -->
    <!-- base library -->
    <link rel="stylesheet" type="text/css" href="css/ext-all.css" />

    <!-- overrides to base library -->

    <!-- ** Javascript ** -->
    <!-- ExtJS library: base/adapter -->
    <script type="text/javascript" src="lib/ext-base-debug.js"></script>

    <!-- ExtJS library: all widgets -->
    <script type="text/javascript" src="lib/ext-all-debug.js"></script>

    <!-- overrides to base library -->

    <!-- page specific -->
    <script type="text/javascript" src="lib/dashboard.js"></script>

</head>
<body>

    <div id="dashboard">



    </div>
</body>
</html>

这是我的json,我也用萤火虫渲染..

{
    "countothercities": "0",
    "directreseller": "14",
    "totalresellersregisteredfor8cities": 33,
    "cityarray": [{
        "cityname": "bangalore",
        "totfollowup": "3",
        "totcallback": "4",
        "totnotintrested": "2",
        "totdealsclosed": "0",
        "totcallsreceived": "0",
        "totcallsentered": "68",
        "totresellerregistered": "6",
        "countiro": "109",
        "irotransferred": "83",
        "irodeferred": "26"
    }, {

请检查。

3 个答案:

答案 0 :(得分:0)

Ext.QuickTips功能为任何元素提供了有吸引力且可自定义的工具提示。有关详细信息,请查看此tutorial from Sencha learning site。调用init方法来初始化Ext.QuickTip的单例类。

Ext.state.Manager是全球州经理。要使用状态管理器,必须使用提供程序对其进行初始化。这就是你在声明中所做的:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

您正在使用CookieProvider。通过使用它,您要求ExtJS库将组件的状态信息存储在cookie中。

更新:错误发生在getColumnWidth()方法中。检查列模型中的width属性是否具有正确的值。要进行调试,请尝试删除所有列的宽度详细信息。我认为你有更多的代码,你没有在这里简化。可能会有一些错字。

答案 1 :(得分:0)

试试这个:

//grid.render('dashboard'); //delete this line
grid.renderTo = 'dashboard';
grid.show();

<强>更新

尝试删除此行

 autoExpandColumn: 'company'

答案 2 :(得分:0)

这是你的错误:

autoExpandColumn: 'company',

没有此ID的列。