选择下拉列表与父母Div不重叠

Question

我正在尝试在ExtJS面板上使用Jquery，selectize和Extjs创建一个下拉列表

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

这个面板的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'}]);
            }
        }
    }],

});

}）;

检查元素位于

之下

Answer 1

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

 $(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");

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