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 相关文章推荐
去除链接虚线全面分析总结
Aug 15 Javascript
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
js判断选择的时间是否大于今天的代码
Aug 20 Javascript
JavaScript splice()方法详解
Sep 22 Javascript
jquery 通过name快速取值示例
Jan 24 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
Sep 29 Javascript
扒一扒JavaScript 预解释
Jan 28 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
Oct 22 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
Oct 31 Javascript
详解vue中router-link标签所必备了解的属性
Apr 15 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
Oct 14 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
安装APACHE
2007/01/15 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
2012/01/15 Javascript
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
js使用心得分享
2015/01/13 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
浅析2种JavaScript继承方式
2015/12/04 Javascript
Javascript 闭包详解及实例代码
2016/11/30 Javascript
微信小程序 数组中的push与concat的区别
2017/01/05 Javascript
vue 2.0封装model组件的方法
2017/08/03 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
解决element ui select下拉框不回显数据问题的解决
2019/02/20 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
分享python数据统计的一些小技巧
2016/07/21 Python
Python 中pandas索引切片读取数据缺失数据处理问题
2019/10/09 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
keras实现VGG16方式(预测一张图片)
2020/07/07 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
Manjaro、pip、conda更换国内源的方法
2020/11/17 Python
python help函数实例用法
2020/12/06 Python
HTML5 播放 RTSP 视频的实例代码
2019/07/29 HTML / CSS
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
银行职员思想汇报
2013/12/31 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
初一学生期末评语
2014/04/24 职场文书
七夕情人节促销方案
2014/06/07 职场文书
班级心理活动总结
2014/07/04 职场文书
商铺消防安全责任书
2014/07/29 职场文书
党员示范岗材料
2014/12/19 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
使用tensorflow 实现反向传播求导
2021/05/26 Python