Extjs学习笔记之六 面版
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>
效果如下： 
下面介绍如何给面板加载内容。其实上面的例子已经展示了一种方法，那就是通过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'则效果为： 
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。效果如下： 
可以看到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学习笔记之六 面版
Extjs为我们封装好了Panel,Panel具有统一的标题头,面板体,面板底部,还可以自由的添加工具栏等.另外,extjs中还有丰富的布局,可以用来布局Panel.这种方式很像Java的Swing. Panel可以嵌套,可以作为整个页面的框架,也可以作为一个小功能区.前几篇文中用到的FormPanel就是继承自Panel类的. 下面的例子展示了一个较为完整的Panel,主要是设置工具栏: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xht
-
ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport第1/3页
通过此文能学习到如下内容 1.创建一个简单的面板 Ext.Panel 2.制作一个可以拖动的面板 Ext.Panel 3 .使用选项卡面板 3.使用Ext.Viewport搭一个简单布局(用一个小例子来总结本文所有内容) 面板是ExtJs控件的基础,很多控件都是在面板的基础上扩展的,或者他会与其他控件之间有关系. 面板由一个工具栏.一个底部工具栏.面板头部.面板尾部和面板主区域几个部分组成.面本类中还提供了面板展开.关闭等功能.并提供了一些可重用的工具按钮让我们灵活的控制面板.面板可以放入其他任
-
extjs 学习笔记（一） 一些基础知识
我在项目中已经频繁使用了jquery,这次主要是学习使用extjs,但现有的教程基本都是针对2.0的,而且后台用到的语言也很少是.net平台下的C#,所以我打算针对3.0版,后台使用C#,记录下自己的学习过程,希望能和志同道合的朋友一起探讨,共同进步. extjs的官方网站是http://www.extjs.com,目前最高版本是3.0.2,但是只有3.0.0的才没有任何下载限制,可以点击这里下载3.0版的.下载来的压缩包里边包含压缩后的extjs库,调试时用到的库,具有可读性的源代码,文档和例
-
ExtJs 学习笔记 Hello World!第1/2页
在了解基础后,可能会用Ext+ajax开发一个简单的小项目,会一点一滴的讲解项目开发过程,希望能给大家带来收获!因为我本人也在学习这个框架,所以对文章有什么建议请提出,这样可能会让我学到更多. 看到这幅图,你可能认为是某个软件,或者是Flash.Flex.silverlight等等,但这是javascript+Css实现的. 在看这样式与效果,如果加在自己的项目里,用户视觉与操作的体验应该会很爽吧. 还有更多的特效就不一一截图了. 下面开始说一下这个组件,ExtJs是一个不错的Ajax
-
extjs 学习笔记（三） 最基本的grid
jquery在这方面则正好相反,它的UI都以插件形式提供,可以需要什么就引用什么,所以非常小巧灵活,但由于插件往往是由不同的人或者团队来提供,界面和接口往往就不那么一致.反正是各有千秋吧. 今天学习extjs中的grid,它可以说是功能强大,无出其右,只有你想不到的,没有它做不到的,呵呵,好像是有点夸张了.好,不说废话了,我们就从最简单的grid开始,一步步来看看extjs给我们提供的grid究竟给我们提供了哪些功能. 一个grid包括一些行和列,在extjs里边,列由Ext.grid.Colu
-
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
ExtJS中的renderTo和applyTo的差别 对applyTo和renderTo的理解和思考 个人认为这两篇文章写的不够通俗.写一个简单的例子来看看最终生成了什么代码, 复制代码 代码如下: <head> <title>RenderTo and ApplyTo</title> <link rel="Stylesheet" type="text/css" href="ext-3.1.0/resources/c
-
Extjs学习笔记之八 继承和事件基础
这里接口的意思是Observable实际上起了一个抽象类的作用,Extjs中有大量的组件都是继承自这个类的.这个类提供了一些基本的方法比如addEvents,addlistener,fireEvent等等. 本文暂时不介绍如何使用extjs的组件响应事件,而是介绍Extjs的事件的一些实现原理.整个Extjs框架都是以一种面向对象的方式开发的,所以理解Javascript中的继承也很重要.我前面的一篇文章 补点基础:Javascript中的类和闭包 也是为这篇做准备.另外,博客园内还有一个写的很
-
Extjs学习笔记之四 工具栏和菜单
ToolBar的使用很简单,关键是向ToolBar上面添加内容,默认地ToolBar添加的是Button,不过实际上可以向Toolbar添加任意的组件.下面是一个例子: 复制代码 代码如下: <script type="text/javascript"> Ext.onReady(function() { var tb = new Ext.Toolbar({ renderTo: document.body, width: 600, height: 100, items: [
-
Extjs学习笔记之三 extjs form更多的表单项
1.日期选择框,DateField 日期选择框在日常项目中被广泛应用,一个方便的日期输入机制能够极大的提高用户体验.Extjs的DateField非常友好灵活强大.可以通过如下代码新建一个日期选择框: 复制代码 代码如下: new Ext.form.DateField({ id: 'diliveryDate', format: 'Y年m月d日', maxValue: new Date(), minValue: '1900-01-01', disabledDays: [0, 6], disable
-
Extjs学习笔记之二 初识Extjs之Form
Extjs中的表单组件是Ext.form.BasicForm,不过最简单最常用的是Ext.form.FormPanel控件,它继承自Panel,具有一定的界面显示控制能力,它其中包含着一个BasicForm对象,用来执行向服务器提交,加载等动作.Extjs也对常用的html表单项进行了封装,提供了一些额外的功能,比如数据验证.实际使用的时候只要向FormPanel中添加这些表单项即可.常见的表单项有,TextField,NumberField,Radio,CheckBox等. 下面通过一个例子来