在一个扩展了Sonata管理twitch/Symfony 2的twitch中调用javascript(ExtJS）的问题

我对php技术很陌生。我面临着一些我无法真正解决的问题。

快速总结一下，我在Sonata admin Bundle生成的管理列表中添加了一个自定义列。
在本专栏中，我有一个地图图标。目前，它正在工作，图标显示出来。

当我点击图标时，我想要的是打开ExtJS生成的弹出窗口。
我已经测试过将ExtJS集成到Symfony（而不是Sonata）的小树枝中，它成功了。
但当我用我的自定义树枝尝试同样的事情时，除了扩展

base_list_field.html.twig

我在调试工具中遇到错误，当然弹出窗口不会显示。这是我的小代码：

{% extends 'SonataAdminBundle:CRUD:base_list_field.html.twig' %}
{% block field%}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
{% javascripts '@AAAAdminBundle/Resources/public/js/ExtJS4.2/ext-all.js' %}
<script src="{{ asset_url }}"></script>
<script>
    Ext.Loader.setPath('Ext', '/bundles/aaaadmin/js/ExtJS4.2/src');
</script>
{% endjavascripts %}

{% stylesheets 'bundles/aaaadmin/js/ExtJS4.2/resources/css/ext-all-neptune.css' filter='cssrewrite' %}
        <link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}
{% javascripts '@AAAAdminBundle/Resources/public/js/popup.js' %}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}
<div>
    <img src="{{ asset('bundles/aaaadmin/images/map_magnify.png') }}" alt="exemple onclick" style="cursor:pointer;" id="popup-map" />
</div>
{% endblock %}

这是我的JS代码：

Ext.require([
'Ext.container.Viewport',
'Ext.state.Manager',
'Ext.state.CookieProvider',
'Ext.window.MessageBox',
'Ext.chart.*',
'Ext.fx.target.Sprite',
'Ext.layout.container.Fit',
'Ext.window.MessageBox',
]);
Ext.application({
name: 'popup',
launch: function() {
    var popup,
    button = Ext.get('popup-map');
    button.on('click', function(){
        if (!popup) {
            popup = Ext.create('widget.window', {
                title: 'Pop-Up',
                id: 'popup',
                header: {
                    titlePosition: 2,
                    titleAlign: 'center'
                },
                border: false,
                closable: true,
                closeAction: 'hide',
                width: 800,
                minWidth: 400,
                maxWidth: 1200,
                height: 500,
                minHeight: 550,
                maxHeight: 800,
                tools: [{type: 'help'}],
                layout: {
                    type: 'border',
                    padding: 10
                },
                items: [
                    {
                    region: 'center',
                    xtype: 'tabpanel',
                    plain: true,
                    items: [
                        {
                        title: 'Carte',
                        html: 'On mettra la carte ici',
                        border: false,
                        },
                        {
                        title: 'Description',
                        html: 'Attributs de l''objet sous forme de tableau',
                        border: false,
                        }
                    ]
                    }
                ]
            });
        }
        button.dom.disabled = true;
        if (popup.isVisible()) {
            popup.hide(this, function() {
                button.dom.disabled = false;
            });
        } else {
            popup.show(this, function() {
                button.dom.disabled = false;
            });
        }
});
}
});

button = Ext.get('popup-map');

在我做的一个测试中引用了HTML对象。但我有很多错误，比如

Object prototype may only be an Object or null //5 times this error when loading the page
Object [object Object] has no method 'addCls' 
Object [object Object] has no method 'hasCls' // when I click somewhere on the page

我有点迷路了。如有任何提示，我们将不胜感激。