如何在ExtJS中创建嵌套的可滚动面板？
我是ExtJS新手，我正在尝试在窗口中创建一个嵌套的、可滚动的面板。不幸的是，到目前为止，我所研究的所有答案都没有为这个特定问题提供解决方案（或者我只是不理解它们） 下面是一组示例，其中包含可滚动面板（“框架面板：宽度280/高度180”）： 显然，根据我下面的示例代码（使用版本4.2.1.883），在窗口内嵌套面板时，此技术不起作用：如何在ExtJS中创建嵌套的可滚动面板？,extjs,extjs4.2,Extjs,Extjs4.2,我是ExtJS新手，我正在尝试在窗口中创建一个嵌套的、可滚动的面板。不幸的是，到目前为止，我所研究的所有答案都没有为这个特定问题提供解决方案（或者我只是不理解它们） 下面是一组示例，其中包含可滚动面板（“框架面板：宽度280/高度180”）： 显然，根据我下面的示例代码（使用版本4.2.1.883），在窗口内嵌套面板时，此技术不起作用： 嵌套可滚动面板演示 Ext.onReady（函数（）{ var btnTest=Ext.create（“Ext.Button”{ 文本：“可滚动嵌套面
嵌套可滚动面板演示
Ext.onReady（函数（）{
var btnTest=Ext.create（“Ext.Button”{
文本：“可滚动嵌套面板测试”，
renderTo:Ext.getBody（）
});
btnTest.on（'click'，function（））{
var html_text=“Lorem ipsum Door sit amet，Concertetuer adipiscing Elite.Sed metus nibh，sodales a，”+
“入口、出口、酒后驾车、酒后驾车、墨西哥玉米饼、意大利玉米饼、意大利玉米饼、苏打水、意大利玉米饼”+
“前庭拍卖人，托托·奎斯·亚库利斯·马莱苏亚达，自由选择权，坐在阿梅特·廷西登·奎姆·图皮斯的座位上”+
“在pellentesque-nisl非扫描电镜中的水平缺陷。Suspendisse-nunc扫描电镜、pretium-eget、cursus a、fringilla-vel、urna.
”+
“阿利奎姆·康莫多·乌拉姆·科佩尔·埃拉姆·维勒·胡斯托在内克·波特提托·拉奥里特。埃涅亚湖对决，欧盟委员会，阿迪皮斯”+
“埃吉特，不，不，尼西。莫比·努克，德高望重的努克，奥纳·塞德，卢克图斯·尤伊，马萨。维瓦姆斯·埃吉特·夸姆。维瓦姆斯·廷西登”+
"直径为2.5毫米,直径为1.5毫米,直径为1.5毫米,直径为1.5毫米,直径为1.5毫米,直径为1.5毫米,直径为1.5毫米,直径为1.5毫米,直径为1.5毫米；
var win=Ext.create（“Ext.window.window”{
标题：“主窗口”，
宽度：300，
身高：200，
最大化：是的，
默认值：{
xtype:“面板”，
身高：60，
可折叠的：是的，
自动滚动：对
},
项目：[{
标题：“菜单”，
html:“菜单面板内容”
},{
html:html\u文本，
框架：对，
宽度：“100%”，
身高：300
}]
});
win.show（）；
});
});
嵌套可滚动面板演示
如果第二个面板的内容将滚动，如上面链接的示例中标题为“框架面板：宽度280/高度180”的面板，如何使其工作？如果将
autoScroll:trueautoScroll:true测试用例没有真正意义。底部面板的高度大于内容的大小，因此它不会滚动。@Evan，您是否尝试运行我的示例代码？当我点击按钮时，示例html内容显然不适合第二个面板。不，这不正确。第二个面板的指定高度为
300200<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Nested Scrollable Panel Demo</title>
<script type="text/javascript" src="ext/ext-all-dev.js"></script>
<link rel="stylesheet" href="ext/resources/css/ext-all.css" />
<script type="text/javascript">
Ext.onReady(function(){
var btnTest = Ext.create("Ext.Button",{
text : "Scrollable Nested Panel Test",
renderTo: Ext.getBody()
});
btnTest.on('click', function(){
var html_text = '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, '+
'porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, '+
'lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis '+
'vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>'+
'Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing '+
'eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt '+
'diam nec urna. Curabitur velit. Lorem ipsum dolor sit amet.</p>';
var win = Ext.create("Ext.window.Window",{
title : "Main Window",
width : 300,
height : 200,
maximizable : true,
defaults: {
xtype : "panel",
height : 60,
collapsible : true,
autoscroll : true
},
items : [{
title : "Menu",
html : 'menu panel content'
},{
html: html_text,
frame : true,
width : '100%',
height : 300
}]
});
win.show();
});
});
</script>
</head>
<body>
<h1>Nested Scrollable Panel Demo</h1>
</body>
</html>
Ext.onReady(function(){
var btnTest = Ext.create("Ext.Button",{
text : "Scrollable Nested Panel Test",
renderTo: Ext.getBody()
});
btnTest.on('click', function(){
var html_text = '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, '+
'porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, '+
'lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis '+
'vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>'+
'Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing '+
'eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt '+
'diam nec urna. Curabitur velit. Lorem ipsum dolor sit amet.</p>';
var win = Ext.create("Ext.window.Window",{
title : "Main Window",
width : 300,
height : 200,
maximizable : true,
autoScroll: true,
defaults: {
xtype : "panel",
height : 60,
collapsible : true,
autoscroll : true
},
items : [{
title : "Menu",
html : 'menu panel content'
},{
html: html_text,
frame : true,
width : '100%',
height : 300
}]
});
win.show();
});
});
var win = Ext.create("Ext.window.Window",{
title : "Main Window",
width : 300,
height : 200,
maximizable : true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
xtype : "panel",
collapsible : true,
autoscroll : true
},
items : [{
title : "Menu",
html : 'menu panel content'
},{
html: html_text,
frame : true,
flex: 1,
autoScroll: true
}]
});