Javascript Selectize下拉列表不重叠父Div

我试图在Extjs面板上使用Jquery、selectize和Extjs创建一个下拉列表

但是，当我点击下拉菜单时，它会显示面板内项目的一半，我需要它与面板重叠并显示

此面板的Ext js代码如下

Ext.onReady(function() {

Ext.create('Ext.Panel', {
    renderTo: 'helloWorldPanel',
    height: 200,
    width: 600,
    title: 'Hello world',
    html: 'First Ext JS Hello World Program',
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Rank',
        fieldCls : 'js-rank',
        listeners: {
            render : function () {

            },
            afterrender: function(){
                $('.js-rank').parent().removeClass("x-form-text-wrap x-form-text-wrap-default");

                $('.js-rank').removeClass("x-form-text x-form-text-default").select([{rank:'20',rankName:'20'},
                    {rank:'30',rankName:'30'},{rank:'40',rankName:'40'},
                    {rank:'50',rankName:'50'},{rank:'60',rankName:'60'},{rank:'70',rankName:'70'}]);
            }
        }
    }],

});

}))

检查元件是否在下面

---

当我做以下更改时，它起作用了

 $(jqueryObject).parents().removeClass('x-fieldset x-fieldset-body x-panel-body');
    $(jqueryObject).removeClass("x-form-text x-form-text-default");
    $(jqueryObject).parent().removeClass("x-form-text-wrap x-form-text-wrap-default");

---

我不确定删除这些类是正确的方法

您需要删除面板主体中隐藏的溢出。