36.面板Ext.Panel使用
转自:https://www.cnblogs.com/linjiqin/archive/2011/06/22/2086620.html
面板Ext.Panel使用
面板Panel是ExtJS控件的基础,很多高级控件都是在面板的基础上扩展的,还有其它大多数控件也都直接或间接与它有关系。应用程序的界面一般情况下是由一个一个的面板通过不同组织方式来形成。
面板由以下几个部分组成,一个顶部工具栏(tbar)、一个底部工具栏(bbar)、面板头部(header)、面板尾部(bottom)、面板主区域(body)几个部分组成。面板类中还内置了面板展开、关闭等功能,并提供一系列可重用的工具按钮使得我们可以轻松实现自定义的行为,面板可以放入其它任何容器中,面板本身是一个容器,他里面又可以包含各种其它组件。
面板的类名为Ext.Panel,其xtype为panel,下面的代码可以显示出面板的各个组成部分:
<script type="text/javascript">
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>
显示效果如下:
一般情况下,顶部工具栏或底部工具栏只需要一个,而面板中一般也很少直接包含按钮,一般会把面板上的按钮直接放到工具栏上面。比如下面的代码:
<script type="text/javascript">
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属性来指定。比如下面的代码:
Ext.onReady(function(){
new Ext.Panel({
title: "面板用法",
width: 300,
height: 200,
renderTo: Ext.getBody(),
html: "<h1><font color='red'>面板主区域</font></h1>",
});
});
</script>
显示效果如下:

<script type="text/javascript">
Ext.onReady(function(){
new Ext.Panel({
title: "面板用法",
width: 300,
height: 200,
autoLoad:{
url:"index.html"
}
});
});
</script>
<script type="text/javascript">
Ext.onReady(function(){
var panel=new Ext.Panel({ renderTo: Ext.getBody()
});
panel.load({
url:"index.jsp",
params:{name:"ljq",pwd:"123"},
scope: this,
discardUrl: false,
nocache: false,
text: "正在加载,请稍候...",
timeout: 30,
scripts: true
});
});
</script>
panel.body.update("<h1><font color='blue'>这是Ext的面板</font></h1>", true, function(){});
update的第一个参数表示要更新的html字符串,第二个参数表示是否执行字符串中的脚本,第三个参数是指当内容已经更新完成后执行的回调函数。
36.面板Ext.Panel使用的更多相关文章
- [转载]ExtJs4 笔记(9) Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件
作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...
- ExtJs4 笔记(9) Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件
本篇讲解三个容器类控件. 一.面板控件 Ext.Panel 一个面板控件包括几个部分,有标题栏.工具栏.正文.按钮区.标题栏位于最上面,工具栏可以在四个位置放置,围绕中间部分正文,按钮区位于最小方.下 ...
- Ext 面板(Panel)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Ext.Panel的主要功能
介绍面板组件的主要配置项及经常用法,这些配置项及方法将在后面的演示样例中用到,能够把这部分内容作为兴许章节的铺垫,进行高速的浏览,Ext.Panel主要配置项目如表5-1所看到的. 表5-1 Ext ...
- Ext.js 中 25种类型的Ext.panel.Tool
通过Ext.panel.Panel的tools配置项来设置Ext.panel.Tool实例. 要注意的一点是,Ext框架提供的Ext.panel.Tool仅包含按钮图标而具体的点击事件处理函数需要我们 ...
- ExtJs Ext.panel.Panel和Ext.container.Viewport布局问题
Ext.container.Viewport Ext.panel.Panel Viewport 它的布局会占用整个 body,也应该是这样,它会随着浏览器的高度和宽度的变化而变化. Panel 布局时 ...
- ext panel 它们的定义图像刷新
从管理发展的近期回报.事实上,它采取了一些努力,以适应,应对来自另一个角度的问题只.外观似良好的效果.阿土,项目用到了EXT js.百度大神里面没找到一个合适的图片组件.自己写了个能够刷新的图片组件. ...
- Pandas面板(Panel)
面板(Panel)是3D容器的数据.面板数据一词来源于计量经济学,部分源于名称:Pandas - pan(el)-da(ta)-s. 3轴(axis)这个名称旨在给出描述涉及面板数据的操作的一些语义. ...
- jQuery EasyUI API 中文文档 - 面板(Panel)
Panel 面板 用$.fn.panel.defaults重写defaults. 用法示例 创建Panel 1. 经由标记创建Panel 从标记创建Panel更容易.把 'easyui-panel ...
随机推荐
- nginx+tomcat+memcache
tomcat1和tomcat2都需要安装以下配置[root@tomcat-1 ~]# yum -y install gcc openssl-devel pcre-devel zlib-devel[ro ...
- C#读取文件-古文观止(总结一下)
1,读取单个文件 //读取一个文本文件 private void buttonRead_Click(object sender, EventArgs e) { String path = Enviro ...
- linux shell学习笔记二---自定义函数(定义、返回值、变量作用域)介绍
linux shell 可以用户定义函数,然后在shell脚本中可以随便调用.下面说说它的定义方法,以及调用需要注意那些事项. 一.定义shell函数(define function) 语法: [ f ...
- xmpp 消息和好友上下线(3)
原始地址:XMPPFrameWork IOS 开发(四) 消息 //收到消息 - (void)xmppStream:(XMPPStream *)sender didReceiveMessage:(XM ...
- eclipse 中常用快捷键
* 字母大小写转换 ctrl+shift+x 转为大写 ctrl+shift+y 转为小写 * eclipse 自动生成对象来接收方法的返回值的快捷键 说明:光标一定要定位到要自动生成返回值对 ...
- 哈希表模板(Hash set)
省选前最后的复(chui si)习(zheng zha). 上模板吧 namespace Hash_Table{ #define inf ~0U>>1 #define MaxN 10010 ...
- FJoi2017 1月20日模拟赛 恐狼后卫(口糊动规)
Problem 1 恐狼后卫(wolf.cpp/c/pas) [题目描述] 著名卡牌游戏<石炉传说>中有一张随从牌:恐狼后卫.恐狼后卫的能力是使得相邻随从的攻击力提高. 现在有n张恐狼后卫 ...
- 【Codeforces 1091D】New Year and the Permutation Concatenation
[链接] 我是链接,点我呀:) [题意] 把1~n的n!种排列依次连接成一个长度为nn!的序列. 让你在这个序列当中找长度为n的连续段,使得连续段中的数字的和为n(n-1)/2 输出符合要求的连续段的 ...
- Docker学习总结(17)——学会使用Dockerfile
Docker.Dockerfile.Docker镜像.容器这些都是什么鸟? 老生常谈,再再再--普及一下: Docker: 最早是dotCloud公司出品的一套容器管理工具,但后来Docker慢慢火起 ...
- CodeForcesGym 100753F Divisions
Divisions Time Limit: 2000ms Memory Limit: 262144KB This problem will be judged on CodeForcesGym. Or ...