我照着EXT官方教程做的一个列子！<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>test</title>
<link href="../../Scripts/Ext/resources/css/ext-all.css" rel="Stylesheet" type="text/css" />
<script src="../../Scripts/Ext/adapter/ext/ext-base-debug.js" type="text/javascript"></script>
<script src="../../Scripts/Ext/ext-all-debug.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function () {
var tb = new Ext.Toolbar({
renderTo: document.body,
width: 600,
height: 100,
items: [{
text: 'Button'
}, {
xtype: 'splitbutton',
text: 'Split Button'
}, '->',
{
xtype: 'textfield',
name: 'field1',
emptyText: 'enter search term'
}, '-', 'text 1', { xtype: 'tbspacer' }, 'text 2', { xtype: 'tbspacer', width: 50 }, 'text 3'
]
});
var combo = new Ext.form.ComboBox({
store: new Ext.data.ArrayStore({
autoDestory:true,
fields: ['initials', 'fullname'],
data: [
['FF', 'Fred Flintstone'],
['BR', 'Barney Rubble']
]
}),
displayField: 'fullname',
typeAhead:true,
mode: 'local',
foreSelection: true,
triggerAction: 'all',
emptyText: 'Select a name...',
selectOnFocus: true,
width:135,
getListParent: function () {
return this.el.up('.x-menu')
},
iconCls: 'no-icon'
});
var menu = new Ext.menu.Menu({
id: 'mainMenu',
items: [combo]
});
tb.add({
text: 'Button w/Menu',
menu: menu
});
tb.doLayout();
});
</script></head>
<body>
</body>
</html>结果是下拉菜单被菜单项遮盖了！通过IE调试工具查看CSS样式时，发现存在这个样式！.ext-ie .x-menu {
zoom:1;
overflow:hidden;
}于是，我把overflow去掉，或者改为overflow:visible;下拉菜单出来了！！！！！！我查看以前版本也都是这个样式：
.ext-ie .x-menu {
zoom:1;
overflow:hidden;
}
对于这个问题，大家有什么看法？那里出现问题了？
<head runat="server">
<title>test</title>
<link href="../../Scripts/Ext/resources/css/ext-all.css" rel="Stylesheet" type="text/css" />
<script src="../../Scripts/Ext/adapter/ext/ext-base-debug.js" type="text/javascript"></script>
<script src="../../Scripts/Ext/ext-all-debug.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function () {
var tb = new Ext.Toolbar({
renderTo: document.body,
width: 600,
height: 100,
items: [{
text: 'Button'
}, {
xtype: 'splitbutton',
text: 'Split Button'
}, '->',
{
xtype: 'textfield',
name: 'field1',
emptyText: 'enter search term'
}, '-', 'text 1', { xtype: 'tbspacer' }, 'text 2', { xtype: 'tbspacer', width: 50 }, 'text 3'
]
});
var combo = new Ext.form.ComboBox({
store: new Ext.data.ArrayStore({
autoDestory:true,
fields: ['initials', 'fullname'],
data: [
['FF', 'Fred Flintstone'],
['BR', 'Barney Rubble']
]
}),
displayField: 'fullname',
typeAhead:true,
mode: 'local',
foreSelection: true,
triggerAction: 'all',
emptyText: 'Select a name...',
selectOnFocus: true,
width:135,
getListParent: function () {
return this.el.up('.x-menu')
},
iconCls: 'no-icon'
});
var menu = new Ext.menu.Menu({
id: 'mainMenu',
items: [combo]
});
tb.add({
text: 'Button w/Menu',
menu: menu
});
tb.doLayout();
});
</script></head>
<body>
</body>
</html>结果是下拉菜单被菜单项遮盖了！通过IE调试工具查看CSS样式时，发现存在这个样式！.ext-ie .x-menu {
zoom:1;
overflow:hidden;
}于是，我把overflow去掉，或者改为overflow:visible;下拉菜单出来了！！！！！！我查看以前版本也都是这个样式：
.ext-ie .x-menu {
zoom:1;
overflow:hidden;
}
对于这个问题，大家有什么看法？那里出现问题了？
getListParent: function () {
return this.el.up('.x-menu')
},
能出现下拉框，但当你点击下拉菜单的时候，菜单项会消失，也就是跟网上的出现的问题一样了，于是官方就提供了上面的解决方案（我很怀疑是不是官方提供的，官方也这么不小心，提供一段错误的代码上来，因为当父DIV包含子DIV的时候，如果你设置父DIV的overflow为hidden，将会隐藏子DIV的超长的内容！你Z-index设得再高也显示不出，在这里下拉菜单就被它的父亲菜单项目给隐藏了！），基础啊，基础啊，看来基础知识还是非常重要的，不管你是官方还是个人！