ExtJs学习笔记Ext.PanleExt.TabPanelExt.Viewport第1/3页_extjs

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了ExtJs学习笔记Ext.PanleExt.TabPanelExt.Viewport第1/3页_extjs，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1723字，纯文字阅读大概需要3分钟。

内容图文

通过此文能学习到如下内容
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('提示','面板底部按钮的事件！');
}
}
]
});
}

内容总结

以上是互联网集市为您收集整理的ExtJs学习笔记Ext.PanleExt.TabPanelExt.Viewport第1/3页_extjs全部内容，希望文章能够帮你解决ExtJs学习笔记Ext.PanleExt.TabPanelExt.Viewport第1/3页_extjs所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---