Question

我是Ext JS的新手，我正在尝试使用Ext JS Framework创建一个JSFiddle（它包含在JSFiddle提供的Frameworks＆amp; Extensions列表中）

我的小提琴is here，单独输出窗格can be viewed here。

我希望看到一个带有面包屑痕迹的工具栏。事实上我什么都看不见。我已经在不同的浏览器中测试过，但仍然无法看到输出。

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

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

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控制台，然后加载小提琴，您将看到该脚本失败并显示错误：

ReferenceError: Ext is not defined

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

Ext JS工具栏和breadcrumb示例在JSFiddle中不起作用

1 个答案: