選擇下拉菜單不重疊

Question

我正在嘗試在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'}]);
            }
        }
    }],

});

}）;

檢查元素在下面

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

我不確定刪除這些類是否是正確的方法