Extjs学习笔记之六 面版


Posted in Javascript onJanuary 08, 2010

Extjs为我们封装好了Panel,Panel具有统一的标题头,面板体,面板底部,还可以自由的添加工具栏等。另外,extjs中还有丰富的布局,可以用来布局Panel。这种方式很像Java的Swing. Panel可以嵌套,可以作为整个页面的框架,也可以作为一个小功能区。前几篇文中用到的FormPanel就是继承自Panel类的。

下面的例子展示了一个较为完整的Panel,主要是设置工具栏:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Extjs Combobox</title> 
<link rel="Stylesheet" type="text/css" href="ext-3.1.0/resources/css/ext-all.css" /> 
<script type="text/javascript" src="ext-3.1.0/adapter/ext/ext-base.js"></script> 
<script type="text/javascript" src="ext-3.1.0/ext-all.js"></script> 
<script type="text/javascript" src="ext-3.1.0/src/locale/ext-lang-zh_CN.js"></script> 
<script type="text/javascript"> 
Ext.onReady(function() { 
new Ext.Panel({ 
title: 'Panel Header', 
tbar: ['Top Toolbar', { 
// xtype: 'button', // default for Toolbars, same as 'tbbutton' 
text: 'Button' 
}, 
{ 
xtype: 'splitbutton', // same as 'tbsplitbutton' 
text: 'Split Button' 
}, // begin using the right-justified button container 
'->', // same as {xtype: 'tbfill'}, // Ext.Toolbar.Fill 
{ 
xtype: 'textfield', 
name: 'field1', 
emptyText: 'enter search term' 
}, 
// add a vertical separator bar between toolbar items 
'-', // same as {xtype: 'tbseparator'} to create Ext.Toolbar.Separator 
'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create Ext.Toolbar.TextItem 
{xtype: 'tbspacer' }, // same as ' ' to create Ext.Toolbar.Spacer 
'text 2', 
{ xtype: 'tbspacer', width: 50 }, // add a 50px space 
'text 3'], 
bbar: ['Bottom Toolbar'], 
applyTo: 'mypanel', 
frame: true, 
html: '<div>Here is the body of the Panel</div>', 
bodyStyle: 'background-color:#FFFFFF', 
height: 300, 
width: 600, 
collapsible: true, 
tools: [{ id: 'toggle' }, { id: 'close' }, { id: 'maximize'}], 
buttons: [new Ext.Button({ text: 'Click Me' })] 
}); 
}); 
</script> 
</head> 
<body> 
<div id="mypanel"></div> 
</body> 
</html>

效果如下:
Extjs学习笔记之六 面版 
下面介绍如何给面板加载内容。其实上面的例子已经展示了一种方法,那就是通过html属性直接指定,不过这种方法似乎没有太大的实用价值。Panel具有一个autoLoad属性,可以加载远程页面。新建一个页面RemoteContent.htm,内容如下:
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
</head> 
<body> 
<ul> 
<li>List Item 1</li> 
<li>List Item 2</li> 
<li>List Item 3</li> 
<li>List Item 4</li> 
<li>List Item 5</li> 
</ul> 
</body> 
</html>

将上例的html配置项去掉,换成:
autoLoad:'RemoteContent.htm'则效果为:
Extjs学习笔记之六 面版 
autoLoad配置项会把<body></body>之间的内容加载进来。要注意,加载的文件中不能含有<!-- -->,否则不能正常加载。另外要注意,用这种方法直接加载aspx页面往往不能成功。例如,新建一个Default.aspx页面,内容为:
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> 
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" /> 
</div> 
</form> 
</body> 
</html>

按钮事件为:

Label1.Text = "Hello Asp.net With Extjs.";

把autoLoad配置为Default.aspx页面,点击下按钮,就会发现整个Panel都没了,就剩下aspx页面上的内容。因此autoLoad适合加载htm文件,或者是通过ashx页面输出的html代码,这些输出的代码都由我们自己严格控制,而用默认的aspx的回发页面肯定是不行的。要直接将extjs和asp.net的服务器控件组合起来用也是不太可能的。如果非要偷个懒,可以用这样的方法:

html:' <iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+'default.aspx'+'"> </iframe>'这样就可以了。
Panel还具有一个ContentEl属性,可以加载本页面上的dom节点。这种方法也能和asp.net服务器控件结合使用,对Default.aspx稍加修改:

<body> 
<formid="form1"runat="server"> 
<divid="panelcontent"> 
<asp:LabelID="Label1"runat="server"Text="Label"></asp:Label> 
<asp:ButtonID="Button1"runat="server"Text="Button"onclick="Button1_Click" /> 
</div> 
<div>Here is some fixed Content</div> 
<divid="panel"></div> 
</form> 
</body>

head部分的脚本和上面的例子一致,只是把html和autoLoad属性都去掉,换成:
contentEl: 'panelcontent'表示这个panel要加载id为panelcontent的div中的内容,也就是一个Label和一个button。效果如下:
Extjs学习笔记之六 面版 
可以看到contentEl的效果,它是把原来在
<div>Here is some fixed Content</div>
之上的内容移动到Panel的内部 。这个时候点击button,能够正确响应服务器端的代码。这种方式仅仅是在页面上移动一些DOM节点的位置,一般来说对服务器端事件不会造成什么影响,但是这样Panel的作用和div也相差不大了。
最后介绍通过items配置项向Panel内添加其他Extjs组件的方法。Panel内除了直接添加html之外还可以添加其他的组件,Panel本身也是组件,所以Panel是可以嵌套的。嵌套的Panel结合下一节要介绍的布局可以方便的完成一些布局工作。
新建一个nestedPanel.htm,代码如下,通过items配置Panel内部的内容:
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Extjs Nest Panel</title> 
<link rel="Stylesheet" type="text/css" href="ext-3.1.0/resources/css/ext-all.css" /> 
<script type="text/javascript" src="ext-3.1.0/adapter/ext/ext-base.js"></script> 
<script type="text/javascript" src="ext-3.1.0/ext-all.js"></script> 
<script type="text/javascript" src="ext-3.1.0/src/locale/ext-lang-zh_CN.js"></script> 
<script type="text/javascript"> 
Ext.onReady(function() { 
new Ext.Panel({ 
title: 'Panel Header', 
renderTo: 'panel1', 
frame: true, 
bodyStyle: 'background-color:#FFFFFF', 
collapsible: true, 
items: new Ext.DatePicker(), 
width: 189 
}); 
new Ext.Panel({ 
title: 'Nested Panel', 
renderTo: 'panel2', 
width: 189, 
frame: true, 
items: [{ xtype: 'panel', title: 'nested 1',html:'<div>I am panel A</div>' }, 
{ xtype: 'panel', title: 'nested 2', autoLoad:'RemoteContent.htm'}] 
}); 
}); 
</script> 
</head> 
<body> 
<div id="panel1"></div> 
<div id="panel2"></div> 
</body> 
</html>

效果如下:
Extjs学习笔记之六 面版 
Javascript 相关文章推荐
原生javascript和jquery判断浏览器版本等信息
Jul 04 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
May 27 Javascript
jquery实现简单的无缝滚动
Apr 15 Javascript
使用JavaScript实现连续滚动字幕效果的方法
Jul 07 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
Jul 17 Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
May 09 Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
Dec 11 Javascript
cnpm加速Angular项目创建的方法
Sep 07 Javascript
微信小程序实现的一键复制功能示例
Apr 24 Javascript
jQuery开发者都需要知道的5个小技巧
Jan 08 #Javascript
javascript new一个对象的实质
Jan 07 #Javascript
IE iframe的onload方法分析小结
Jan 07 #Javascript
判断iframe是否加载完成的完美方法
Jan 07 #Javascript
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
Jan 07 #Javascript
EXT中xtype的含义分析
Jan 07 #Javascript
Extjs学习笔记之四 工具栏和菜单
Jan 07 #Javascript
You might like
构建简单的Webmail系统
2006/10/09 PHP
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
php模仿asp Application对象在线人数统计实现方法
2015/01/04 PHP
Yii2设置默认控制器的两种方法
2017/05/19 PHP
javaScript 判断字符串是否为数字的简单方法
2009/07/25 Javascript
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
Ext 今日学习总结
2010/09/19 Javascript
基于jquery循环map功能的代码
2011/02/26 Javascript
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
2017/08/18 jQuery
详解vue mixins和extends的巧妙用法
2017/12/20 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
React Hooks的深入理解与使用
2018/11/12 Javascript
js+html实现点名系统功能
2019/11/05 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
Python 学习笔记
2008/12/27 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
TensorFlow模型保存/载入的两种方法
2018/03/08 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
pycharm中如何自定义设置通过“ctrl+滚轮”进行放大和缩小实现方法
2020/09/16 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
使用Html5实现异步上传文件,支持跨域,带有上传进度条
2016/09/17 HTML / CSS
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
Omio意大利:全欧洲低价大巴、火车和航班搜索和比价
2017/12/02 全球购物
进程的查看和调度分别使用什么命令
2013/12/14 面试题
中科软测试工程师面试题
2012/06/16 面试题
暑期社会实践心得体会
2014/09/02 职场文书
2016优秀教师先进个人事迹材料
2016/02/25 职场文书
python 解决微分方程的操作(数值解法)
2021/05/26 Python
vite+vue3.0+ts+element-plus快速搭建项目的实现
2021/06/24 Vue.js
使用javascript解析二维码的三种方式
2021/11/11 Javascript