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 相关文章推荐
50个比较实用jQuery代码段
Sep 18 Javascript
Prototype源码浅析 Number部分
Jan 16 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
Jun 24 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
May 30 Javascript
AngularJS 基础ng-class-even指令用法
Aug 01 Javascript
JS实现物体带缓冲的间歇运动效果示例
Dec 22 Javascript
Angular2 PrimeNG分页模块学习
Jan 14 Javascript
微信小程序 合法域名校验出错详解及解决办法
Mar 09 Javascript
vue+node+webpack环境搭建教程
Nov 05 Javascript
微信小程序基于高德地图查找位置并显示文字
Oct 30 Javascript
vue实现图片懒加载的方法分析
Feb 05 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
Nov 17 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
2006/12/14 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
web页面数据展示新想法(json)
2010/06/08 Javascript
使用隐藏的new来创建对象
2011/03/29 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
js中hash和ico的关联分析
2015/02/05 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
Javascript实现检测客户端类型代码封包
2015/12/03 Javascript
学习javascript面向对象 理解javascript对象
2016/01/04 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
2018/08/28 jQuery
详解Vue中watch的详细用法
2018/11/28 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
vue中的过滤器实例代码详解
2019/06/06 Javascript
[01:12](回顾)DOTA2国际邀请赛,全世界DOTAer的盛宴
2014/07/01 DOTA
python如何实现excel数据添加到mongodb
2015/07/30 Python
Python中工作日类库Busines Holiday的介绍与使用
2017/07/06 Python
Python3实现的字典遍历操作详解
2018/04/18 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
PyQt5 在label显示的图片中绘制矩形的方法
2019/06/17 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
python使用numpy实现直方图反向投影示例
2020/01/17 Python
django正续或者倒序查库实例
2020/05/19 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
公益活动策划方案
2014/01/09 职场文书
商场消防演习方案
2014/02/12 职场文书
建筑设计专业求职自我评价
2014/03/02 职场文书
汇源肾宝广告词
2014/03/20 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书
运动会入场词
2015/07/18 职场文书