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基础语法介绍
Feb 28 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
Jquery使用css方法改变样式实例
May 18 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
Sep 17 Javascript
jquery自动补齐功能插件flexselect用法示例
Aug 06 Javascript
JS百度地图搜索悬浮窗功能
Jan 12 Javascript
AngularJS中下拉框的高级用法示例
Oct 11 Javascript
JS使用setInterval实现的简单计时器功能示例
Apr 19 Javascript
vue根据值给予不同class的实例
Sep 29 Javascript
vue组件tabbar使用方法详解
Nov 06 Javascript
vue实现数字动态翻牌的效果(开箱即用)
Dec 08 Javascript
JS实现点星星消除小游戏
Mar 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
php下封装较好的数字分页方法
2010/11/23 PHP
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
PHP使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
php 解析xml 的四种方法详细介绍
2016/10/26 PHP
php基于数组函数实现关联表的编辑操作示例
2017/07/04 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
PHP设计模式(一)工厂模式Factory实例详解【创建型】
2020/05/02 PHP
一个符号插入器 中用到的js代码
2007/09/04 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
微信小程序 wxapp视图容器 view详解
2016/10/31 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
详解webpack之图片引入-增强的file-loader:url-loader
2018/10/08 Javascript
JQuery 实现文件下载的常用方法分析
2019/10/29 jQuery
nodejs各种姿势断点调试的方法
2020/06/18 NodeJs
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
[02:14]完美“圣”典2016风云人物:xiao8专访
2016/12/01 DOTA
Python每天必学之bytes字节
2016/01/28 Python
简单实现python聊天程序
2018/04/01 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
分享一个H5原生form表单的checkbox特效代码
2018/02/26 HTML / CSS
盖尔斯工厂店:GUESS Factory
2020/01/21 全球购物
SNIDEL官网:日本VIVI杂志人气少女第一品牌
2020/03/12 全球购物
adidas泰国官网:adidas TH
2020/07/11 全球购物
Linux如何为某个操作添加别名
2013/03/01 面试题
Ajax请求总共有多少种Callback
2016/07/17 面试题
师范大学音乐表演专业求职信
2013/10/23 职场文书
护理专业应届毕业生推荐信
2013/11/15 职场文书
八年级生物教学反思
2014/01/22 职场文书
优乐美广告词
2014/03/14 职场文书
人事经理岗位职责
2014/04/28 职场文书
长江七号观后感
2015/06/11 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书
PHP解决高并发问题
2021/04/01 PHP