帮助运行简单的 Ext JS 示例？答案

【问题标题】：help running simple Ext JS example?帮助运行简单的 Ext JS 示例？
【发布时间】：2011-09-01 02:09:07
【问题描述】：

我下载了 Ext JS 4.0.2a，我正在尝试做 Ext JS 教程。我去“基本”示例工作，所以我很确定我的设置是正确的。我正在尝试在这里做网格示例...

http://www.sencha.com/learn/legacy/Tutorial:Getting_Productive

...但我无法显示网格。

我的 ExtStart.html 如下所示：

<html>
<head>
    <title>Introduction to Ext 2.0: Starter Page</title>

    <!-- Include Ext and app-specific scripts: -->
    <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../ext-all-debug.js"></script>
    <script type="text/javascript" src="ExtStart.js"></script>

    <!-- Include Ext stylesheets here: -->
    <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">
    <link rel="stylesheet" type="text/css" href="ExtStart.css">
</head>
<body>

    <div id="grid-example"></div>

</body>
</html>

我的 ExtStart.js 和教程网站上的一模一样：

Ext.onReady(function() {
    // sample static data for the store
    var myData = [['Apple',29.89,0.24,0.81,'9/1 12:00am'],
        ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
        ['Google',71.72,0.02,0.03,'10/1 12:00am'],
        ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
        ['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
    ];

    // create the data store
    var ds = new Ext.data.ArrayStore({
        fields: [
           {name: 'company'},
           {name: 'price', type: 'float'},
           {name: 'change', type: 'float'},
           {name: 'pctChange', type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ]
    });

    // manually load local data
    ds.loadData(myData);

    // create the colum Manager
    var colModel = new Ext.grid.ColumnModel([
            {header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
            {header: 'Price', width: 75, sortable: true, dataIndex: 'price'},
            {header: 'Change', width: 75, sortable: true, dataIndex: 'change'},
            {header: '% Change', width: 75, sortable: true, dataIndex: 'pctChange'},
            {header: 'Last Updated', width: 85, sortable: true,
                renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
    ]);


    // create the Grid
    var grid = new Ext.grid.GridPanel({
        store: ds,
        colModel: colModel,
        height: 300,
        width: 600,
        title: 'My First Grid'
    });

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

有什么想法我可能做错了吗？可悲的是被难住了。 :(

抢劫

【问题讨论】：

标签： extjs

【解决方案1】：

您正在使用 ExtJS4，但指的是旧文档。

组件以及它们需要如何在编写文档的版本和您使用的版本 4 之间连接在一起的方式发生了很多变化。

这是 ExtJS 4 的数组网格（和其他）示例。-

HTML
Javascript code

例如，您使用的是Ext.grid.GridPanel。这不再有效。（改用Ext.grid.Panel）

【讨论】：

是的，Ext 2.0 简介：Starter Page 是一个死的赠品；)
谢谢。我看到了版本号，但我只是假设这些教程直接链接到 Sencha 的主页，它们仍然有效。他们为什么不更新它们？多么令人沮丧。感谢您的帮助！