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 相关文章推荐
JQuery获取各种宽度、高度(format函数)实例
Mar 04 Javascript
javascript自定义的addClass()方法
May 28 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
Dec 03 Javascript
jquery实现仿新浪微博评论滚动效果
Aug 06 Javascript
简介alert()与console.log()的不同
Aug 26 Javascript
使用Javascript实现选择下拉菜单互移并排序
Feb 23 Javascript
详解angular2封装material2对话框组件
Mar 03 Javascript
Vue2 使用 Echarts 创建图表实例代码
May 18 Javascript
强大的 Angular 表单验证功能详细介绍
May 23 Javascript
Vue中使用的EventBus有生命周期
Jul 12 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
Oct 10 Javascript
简单了解node npm cnpm的具体使用方法
Feb 27 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
PHP数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
php运行提示:Fatal error Allowed memory size内存不足的解决方法
2014/12/17 PHP
php实现图片缩略图的方法
2016/03/29 PHP
php使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
浅谈PHP之ThinkPHP框架使用详解
2020/07/21 PHP
记录几个javascript有关的小细节
2007/04/02 Javascript
jQuery 标题的自动翻转实现代码
2009/10/14 Javascript
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
深入理解javascript中concat方法
2016/12/12 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
2017/02/15 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
Angularjs自定义指令实现分页插件(DEMO)
2017/09/16 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
2017/12/08 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
解决webpack多页面内存溢出的方法示例
2019/10/08 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
Python实现优先级队列结构的方法详解
2016/06/02 Python
python中的字典操作及字典函数
2018/01/03 Python
Python用字典构建多级菜单功能
2019/07/11 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
美国手工艺品市场的领导者:Annie’s
2019/04/04 全球购物
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
小学生期末评语大全
2014/04/21 职场文书
小学校本培训方案
2014/06/06 职场文书
四风问题查摆材料
2014/08/25 职场文书
委托公证书样本
2015/01/23 职场文书
小英雄雨来观后感
2015/06/09 职场文书
2015大学生入党个人自传
2015/06/26 职场文书
go goroutine 怎样进行错误处理
2021/07/16 Golang