面板Ext.Panel使用
面板Panel是ExtJS控件的基础，很多高级控件都是在面板的基础上扩展的，还有其它大多数控件也都直接或间接与它有关系。应用程序的界面一般情况下是由一个一个的面板通过不同组织方式来形成。
面板由以下几个部分组成，一个顶部工具栏(tbar)、一个底部工具栏(bbar)、面板头部(header)、面板尾部(bottom)、面板主区域(body)几个部分组成。面板类中还内置了面板展开、关闭等功能，并提供一系列可重用的工具按钮使得我们可以轻松实现自定义的行为，面板可以放入其它任何容器中，面板本身是一个容器，他里面又可以包含各种其它组件。
面板的类名为Ext.Panel，其xtype为panel，下面的代码可以显示出面板的各个组成部分：
Ext.onReady(function(){
new Ext.Panel({
title: "面板用法",
width: 300,
height: 200,
renderTo: Ext.getBody(),
html: "<h1>面板主区域</h1>",
tbar: [{
text: "顶部工具栏topToolbar"
}],
bbar: [{
text: "底部工具栏bottomToolbar"
}],
buttons: [{
text: "按钮位于footer"
}]
});
});
</script>
显示效果如下：
一般情况下，顶部工具栏或底部工具栏只需要一个，而面板中一般也很少直接包含按钮，一般会把面板上的按钮直接放到工具栏上面。比如下面的代码：
Ext.onReady(function(){
new Ext.Panel({
title: "面板用法",
width: 300,
height: 200,
renderTo: Ext.getBody(),
html: "<h1>面板主区域</h1>",
tbar: [{
pressed: true,
text: "刷新"
}]
});
});
</script>
显示效果如下：
面板Panel主要有下面几个特点：
1）、面板可以理解成应用程序中的一个界面块，这个块可以大，也可以小，这一个块包含了特定的样式信息；
2）、面板Panel继承自Container类，因此，面板是一个可视化容器组件；也是其它大多数可视化控件如TabPanel、Window、TreePanel的基类；
3）、面板中即可包括其它元素组件，也可以包含特定html代码片段，可以在程序中动态更新面板中的内容；
4）、面板由固定的5个部分组成，除了body部份以外，其它部分都不是必须的。
面板中的内容也可以是指定的html片段，此时可以通过配置选项中html属性来指定。比如下面的代码：
new Ext.Panel({
title: "面板用法",
width: 300,
height: 200,
renderTo: Ext.getBody(),
html: "<h1><font color='red'>面板主区域</font></h1>",
});
});
</script>
显示效果如下：
Ext.onReady(function(){
new Ext.Panel({
title: "面板用法",
width: 300,
height: 200,
autoLoad:{
url:"index.html"
}
});
});
</script>
Ext.onReady(function(){
var panel=new Ext.Panel({
});
panel.load({
url:"index.jsp",
params:{name:"ljq",pwd:"123"},
scope: this,
discardUrl: false,
nocache: false,
text: "正在加载，请稍候...",
timeout: 30,
scripts: true
});
});
</script>
update的第一个参数表示要更新的html字符串，第二个参数表示是否执行字符串中的脚本，第三个参数是指当内容已经更新完成后执行的回调函数。
面板Ext.Panel使用相关推荐
- extJs 2.0学习笔记(Ext.Panel篇四)
我刚才禁不住诱惑去看了一下Ext.Window的API文档,发现只是比Panel多了点什么最大化.最小化.关闭.置前.置后.动画引发目标设置.可调整大小这些功能.像什么标题栏.工具栏之类的东西在Ext ...
- ExtJs2.0学习系列--Ext.Panel
ExtJs2.0学习系列--Ext.Panel 2008-06-29 12:59 上一篇文章ExtJs2.0学习系列(1)--Ext.MessageBox ,受到了大家的褒贬不一,还是有的朋友提出好的 ...
- ExtJs Ext.panel.Panel和Ext.container.Viewport布局问题
Ext.container.Viewport Ext.panel.Panel Viewport 它的布局会占用整个 body,也应该是这样,它会随着浏览器的高度和宽度的变化而变化. Panel 布局时 ...
- ExtJs2.0学习系列(2)--Ext.Panel
随笔- 71 文章- 10 评论- 1096 ExtJs2.0学习系列(2)--Ext.Panel 上一篇文章ExtJs2.0学习系列(1)--Ext.MessageBox ,受到了大家的褒贬不 ...
- Grafana-01 - 面板（Panel）设置数据点的时间间隔以及单位
Grafana - 面板(Panel)设置数据点的时间间隔以及单位,如何让Grafana的数据点变成线? 1.设置时间间隔-Interval 设置前 可以看到图片中的点是不连续的,很多时候我们希望图表 ...
- wxpython滑动面板_wxPython Panel面板的用法
面板是一个容器元素,可以在其上放很多其他的元素,这点类似于 Frame. 我们通常会将窗口上的元素分类,例如图 1 所示的计算器程序,其就可以看做是由三大块组合而成的. 图 1 计算器的结构 可以用使 ...
- MATLAB GUIDE 面板（panel）上的控件消失问题和不靠谱的解决方案
注:笔者使用的R2016a版本存在这个问题,其他版本未测试 这周在做MATLAB的GUI的时候遇到一个有趣的问题 这是从GUIDE里面编辑的时候看到的界面: 然而一点运行出来的却是: (*｀皿´*)ﾉ ...
- wxWidgets：图像面板image panel
wxWidgets:图像面板 wxWidgets:图像面板 一个简单的图像面板 调整图像大小的面板 wxWidgets:图像面板 以下是绘制图像.制作图像组件或在面板背景上绘画的方法. (如果你只想在 ...
- GUI——面板（panel）种类
1.基本面板 这个基本面板是你在此上设计的基础 JPanel即为基本面板 面板和JFrame一样都是容器,不过面板一般用来充当中间容器,把组件放在面板上,然后再把面板放在窗体上. 特点:一旦移动一个面 ...
最新文章
- 坑爹的BufferManager
- 面向回家编程！GitHub标星两万的Python抢票教程”，我们先帮你跑了一遍
- Linux_SystemLogManager
- linux centos 7 安装中文字体
- 最近的生活 - 18年03月20日
- HP officejet、PageWide打印机任意代码执行漏洞cve-2017-2741 Tenable发布漏洞检测插件...
- 感知器 Perceptron
- 线上分享 | AI产品经理之路——从入门到进阶
- 每日程序C语言20-利用递归求阶乘
- OpenCV学习笔记-关于使用Mat.at(i,j) = int 语法报错
- 2019 年 8 月编程语言排行榜，C#重回增长之路
- LeetCode 865. 具有所有最深结点的最小子树（递归）
- Python笔记-Flask返回字符串、Json、模板数据
- Java cache类型_为什么有些Java 类方法中要cache类变量
- 仅用 10 天设计的 JavaScript，凭什么成为程序员最受欢迎的编程语言？
- vs2010中使用Nunit测试c#代码结果的正确性
- C语言程序设计学习心得体会总结
- 【电子书制作软件哪个好】云展网教程 | 搜索功能：搜索杂志内文字可高亮
- SetupFactory安装前卸载旧版本
- 获得android手机root权限,安卓手机root助手教你一键获取手机root权限
热门文章
- mysql查询按值多的排序_MySQL查询结果按某值排序
- mysql+linux+无法启动服务无法启动不了_Linux实例中MySQL服务常见的无法启动或启动异常处理...
- java线程6种状态转换,Java线程的生命周期和各种状态转换详解
- java list stream avg_Java 8 Stream API中的多个聚合函数
- java servlet 调试日志 logger sae_java servlet 调试日志 lo
- mysql何时会走索引
- Eclipse 答疑：代码版权？如何更改 Eclipse 中注释块的 @author 版权信息？
- 快速搭建springmvc+spring data jpa工程
- 电子商务专业需要考计算机证吗,电子商务必考的证有哪些
- 如何在 Linux 中快速地通过 HTTP 提供文件访问服务