Ext JS工具栏和面包屑示例在JSFiddle中不起作用

Question

我是Ext JS的新手，正在尝试使用Ext JS框架（包含在JSFiddle提供的Frameworks＆Extensions列表中）创建JSFiddle。

我的小提琴在这里 ，仅在此处可以查看输出窗格。

我期望看到下面带有面包屑痕迹的工具栏。 实际上我什么也没看见。 我已经在不同的浏览器中进行了测试，但是仍然看不到输出。

我想知道为什么我无法在JSFiddle上看到输出。

---

JSFiddle直接从Github帐户中提取代码，相关部分在下面复制以供参考。

Ext.onReady(function(){
    var breadcrumbView = Ext.create('Ext.toolbar.BreadCrumbs', {
        renderTo: document.body,
        gtIconCls:'thread-greaterthan-icon',
        removeIconCls:'thread-remove-icon',
        crumbCls:'breadCrumb',

        width   : 700,

        onRemoveItem:function( btn ){
            //This is called when a user clicks on a crumb. The crumb is an Ext.button.Button, if you passed in
            //the optional param 2 to onItemAdded, it will be attached to this btn as _extraData
        }, 
        onRemoveSelection:function( aBtn ){
            //This is called when a user clicks the > button. The > removes all crumbs abover the > button
            //aBtn is an array of the buttons that were removed.
            if( aBtn instanceof Array ){
                for( var i=0,l=aBtn.length,itm=null; i<l; i++ ){
                }
            }
        }
    });

    Ext.create('Ext.toolbar.Toolbar', {
        renderTo: document.body,
        width   : 700,
        margin  : '5 0 0 0',
        items   : [
            {
                text   : 'Add a crumb',
                scope  : this,
                handler: function() {
                    var text = prompt('Please enter the text for your crumb. Use commas to list crumbs:');
                    text = text.split(',');
                    for( var i=0, l=text.length,itm=null; i<l; i++ ){
                        itm = text[i];
                        //This is how you add an item to the breadcrumb view
                        //Param 1 is some text to show the user
                        //Param 2 is an optional object to attach to the crumb.
                        breadcrumbView.onItemAdded(itm.trim(), {});
                    }
                }
            }
        ]
    });
});

Answer 1

您的小提琴正在使用Ext JS版本4.1.0，它将失败。 如果将JSFiddle使用的Ext JS的版本更改为4.1.1或更高版本，则输出将如预期的那样。

如果您在浏览器中启动Developer Web控制台，然后加载Fiddle，您将看到脚本失败并显示以下错误：

ReferenceError: Ext is not defined

这意味着未定义Ext JS的基础对象。 这可能是JSFiddle尝试加载4.1.0及更早版本的Ext JS框架的错误。