extjs中的Ext.Viewport()组件使用时,在body标签里面为什么不能写其他的...
发布网友
发布时间：2022-04-30 01:40
共3个回答
懂视网
时间：2022-04-24 22:58
1.创建一个简单的面板 Ext.Panel
2.制作一个可以拖动的面板 Ext.Panel
3 .使用选项卡面板
3.使用Ext.Viewport搭一个简单布局(用一个小例子来总结本文所有内容)
面板是ExtJs控件的基础，很多控件都是在面板的基础上扩展的，或者他会与其他控件之间有关系。
面板由一个工具栏、一个底部工具栏、面板头部、面板尾部和面板主区域几个部分组成。面本类中还提供了面板展开、关闭等功能。并提供了一些可重用的工具按钮让我们灵活的控制面板。面板可以放入其他任何容器中，面板本身也是一个容器，所以面板里面也可以包含其他组件。面板的类名为Ext.Panel,其xtype为panel。
看下面一个例子来显示出面板的各个组成部分：
//普通的面板
function panel(){
var panel=new Ext.Panel({
renderTo:'panel',
title:'面板的头部',
width:400,
height:200,
html:'
面板的主显示区域..可包含任何html代码
',
tbar:[{text:'顶部工具栏按钮'}],
bbar:[{text:'底部工具栏'}],
buttons:[
{
text:'面板底部按钮',
handler:function()
{
Ext.Msg.alert('提示','面板底部按钮的事件！');
}
}
]
});
}
上面的代码就不做详细介绍了，特别注意的一点是renderTo:'panel'，这句代码负责把面板绑定到一个p层里，panel就是p的ID。
代码执行后会显示下面的效果： 
效果不错吧！面板中可以有多个工具栏，可以位于面板的顶部或底部，Ext工具栏是由Ext.Toolbar类表示。工具栏可以存放按钮、文本等内容。而且面板中还提了一些实用的工具栏，可以通过tools配置属性向面板头部加入工具栏选项，看下面的案例：
function panel(){
var panel=new Ext.Panel({
tools:[
{id:"save"},
{id:"help"},
{id:"up"},
{
id:"close",
handler:function(){
Ext.MessageBox.alert("工具栏按钮","工具栏的关闭按钮事件")
}
}
],
renderTo:'panel',
title:'面板的头部',
width:400,
height:200,
html:'
面板的主显示区域..可包含任何html代码
',
tbar:[{text:'顶部工具栏按钮'}],
bbar:[{text:'底部工具栏'}],
buttons:[
{
text:'面板底部按钮',
handler:function()
{
Ext.Msg.alert('提示','面板底部按钮的事件！');
}
}
]
});
}
热心网友
时间：2022-04-24 20:06
视窗渲染在document的body标签上，并且根据浏览器可视区域的大小自动调整并且管理窗口的大小变化。一个页面上只允许存在一个viewport。所有的{@link Ext.Panel 面板}增加到viewport，通过她的items，或者通过她的子面板（子面板也都可以拥有自己的layout）的items，子面板的add方法，这种设计让内部布局的优势非常明显。
因为Viewport是渲染到Body上的，因此如果在body标签里面加别的标签或文本是不被允许的。这就是你的程序会报错误的原因。
热心网友
时间：2022-04-24 21:24
Tbody是Table Body的缩写.可以忽略
页面格式：
<html>
<body>
vvvv
<table>
<tbody>
<tr>
<td>xxxx</td>
</tr>
</tbody>
</table>
</body>
</html>
