我正在尝试将组合框的选择器自定义为网格面板。我有一个无法解决的 UI 错误。当我将组合放入具有 hbox 布局的 fieldcontainer 并尝试搜索时，选择器会弹出比它应该的更高的位置。
如果我第二次搜索 - 它会奇迹般地出现在正确的位置。之后，位置每次都是正确的。
有什么问题，可以采取什么措施来解决这个问题？
这是组合定义
Ext.define('NG.ux.form.field.GridComboBox', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.gridcombobox',
minChars: 3,
fieldLabel: 'Choose Search',
displayField: 'name',
valueField: 'id',
typeAhead: false,
anchor: '100%',
pageSize: 10,
autoSelect: false,
// copied from ComboBox
createPicker: function () {
var me = this,
picker,
pickerCfg = Ext.apply({
xtype: 'gridpanel',
pickerField: me,
selModel: {
mode: me.multiSelect ? 'SIMPLE' : 'SINGLE'
},
floating: true,
hidden: true,
ownerCt: me,
store: me.store,
displayField: me.displayField,
focusOnToFront: false,
tpl: me.tpl
}, me.listConfig, me.defaultListConfig);
picker = me.picker = Ext.widget(pickerCfg);
me.mon(picker, {
itemclick: me.onItemClick,
refresh: me.onListRefresh,
scope: me
});
me.mon(picker.getSelectionModel(), {
beforeselect: me.onBeforeSelect,
beforedeselect: me.onBeforeDeselect,
selectionchange: me.onListSelectionChange,
scope: me
});
return picker;
},
listConfig: {
loadingText: 'Searching...',
emptyText: 'No matching posts found.',
hideHeaders: true,
features: [
{
ftype: 'grouping',
groupHeaderTpl: '{name}',
collapsible: false
}],
height: 100,
columns: [
{
header: 'Name',
dataIndex: 'name',
flex: 1
}
]
},
initComponent: function () {
this.callParent(arguments);
}
});
这是一个布局定义
var states = Ext.create('Ext.data.Store', {
fields: ['id', 'name', 'category'],
data: [
{ "id": "AL", "name": "Alabama","category":"1" },
{ "id": "AK", "name": "Alaska", "category": "2" },
{ "id": "AZ", "name": "Arizona", "category": "2" }
]
});
Ext.define('NG.view.search.GeneralSearch', {
extend: 'Ext.form.Panel',
alias: 'widget.generalsearch',
store: states,
requires: [
'NG.ux.form.field.GridComboBox'
],
title: 'Search',
initComponent: function () {
this.createItems();
this.callParent(arguments);
},
createItems: function () {
this.items = [{
xtype: 'fieldcontainer',
layout: 'hbox',
items: [{
xtype: 'gridcombobox',
store: states,
hideTrigger: true,
hideLabel: true,
listeners: {
scope: this,
select: function (arg1, arg2, arg3) {
this.fireEvent('select', arg1, arg2, arg3);
}
}
}, {
xtype: 'button',
text: 'one',
scale: 'small'
}, {
xtype: 'button',
text: 'two',
scale: 'small'
}]
}];
}
});