Question

民间，

我正在尝试Jorge Ramon的ExtJS CookBook的例子。在成功尝试了一些例子后，我坚持下面的例子。

在本地eclipse Web浏览器中运行时显示此错误。

enter image description here

此处的代码：

的index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
        <link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />
        <script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="lib/ext/ext-all.js"></script>
        <script type="text/javascript" >
                Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';

        </script>

        <script type="text/javascript" src="examples/chap02/Ex4_wizard.js"></script>
    </head>
</html>

Ex4_wizard.js

Ext.onReady(function() {

            // A wizard with card layout.

// Each card is a wizard step.
card0 = new Ext.Panel({
    id: 'card-0',
    html: '<h1>Step 1 of 3</h1><p>Welcome to the wizard.</p><p>Click the "Next" button to continue...</p>'
});
card1 = new Ext.Panel({
    id: 'card-1',
    html: '<h1>Step 2 of 3</h1><p>One more step left.</p><p>Please click the "Next" button to continue...</p>'
});
card2 = new Ext.Panel({
    id: 'card-2',
    html: '<h1>Step 3 of 3</h1><p>This is the las step. You made it!</p>'
});

// The function that will switch the cards.
var navigationHandler = function(increment) {
    var layout = Ext.getCmp('card-wizard').getLayout();
    var activeItemIdx = layout.activeItem.id.split('card-')[1];
    var next = parseInt(activeItemIdx) + increment;
    layout.setActiveItem(next);
    if (next == 0) {
        Ext.getCmp('card-prev').setDisabled(true);
    } else {
        Ext.getCmp('card-prev').setDisabled(false);
    }
    if (next == 2) {
        Ext.getCmp('card-next').setDisabled(true);
    } else {
        Ext.getCmp('card-next').setDisabled(false);
    }
};

var cardWizard = new Ext.Panel({
    id: 'card-wizard',
    title: 'A wizard using card layout',
    applyTo: 'card-panel',
    width: 400,
    height: 300,
    frame:true,
    layout: 'card',
    activeItem: 0,
    bodyStyle: 'padding:15px;background-color:#ffffff',
    defaults: { border: false },
    bbar: ['->', {
        id: 'card-prev',
        text: 'Previous',
        handler: navigationHandler.createDelegate(this, [-1]),
        disabled: true,
        iconCls: 'btn-arrow-left-green',
        cls:'x-btn-text-icon',
        minWidth:50
    }, {
        id: 'card-next',
        text: 'Next',
        handler: navigationHandler.createDelegate(this, [1]),
        iconCls: 'btn-arrow-right-green',
        cls: 'x-btn-text-icon',
        minWidth: 50,
        style:'text-align:left'
    }],
        items: [card0, card1, card2]
});

            });

有人可以告诉我为什么会这样吗？

由于

Answer 1

标记中没有“卡片组”，因此cardWizard找不到其渲染目标。尝试添加

<div id="card-panel"></div>

JavaScript - ExtJs错误：this.el.dom为null或不是对象

1 个答案: