ExtJs之Panel篇 - csstome - ITeye博客

`

csstome

浏览: 1477816 次
性别:
来自: 北京

最近访客更多访客>>

u012363178

wangyy

ChangingWay

yadgen

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

全部博客 (2009)

社区版块

存档分类

最新评论

nzp12345： [color=red][/color]
ExtJs之TreePanel篇
liuweihug： .Net解析html文档类库HtmlAgilityPack完整 ...
解决HtmlAgilityPack中文乱码
isaiahzhong： defaultFetchSize这个意思 ...
jdbc查询超大数据集内存溢出
xlaohe1： LZ,我看你的博客，我一直担心你的头像会转过头来、、、
独立Discuz头像编辑模块
Reizsoon：您好，最近使用到这个，能否有个写好的例子借我学习下呢？
JavaScript跟踪-Piwik

ExtJs之Panel篇

阅读更多

曾有人说：如果Ext没有panel就没有现在Ext的存在。当然不管这句话正确与否至少说明Panel在Ext中还是有一定的分量的，Panel的子类比较多，例如TabPanel、GridPanel、FormPanel、TressPanel，我们今后会一一学习，今天我们就来看看Ext中关于Panel的基本内容。

还是先看代码和效果再做解释：

var panel=new Ext.Panel({ id:"myPanel",//标识 renderTo:"divPanel",//在哪个元素中渲染 title:"我的面板", width:400, height:300, frame: false,//如果为true 则panel具有全部阴影，否则只有1px边框 //html:"<h1>这是在Panel中的内容...</h1>", contentEl:'divPanelContent',//此属性可以简写成“el”，显示哪个元素中的内容 draggable:true,//是否允许拖动 collapsible:true, titleCollapse:true,//是否点击整个标题栏都可以收缩 tools:[ {id:"Save",handler:function(){ Ext.Msg.alert("系统提示","保存成功!"); }}, {id:"Help"}, {id:"Close",handler:function(){ Ext.get("divPanel").hide(); }} ], tbar:[ new Ext.Toolbar.TextItem("工具栏"), {xtype:"tbfill"}, {pressed:true,text:'添加'}, {xtype:"tbseparator"}, {pressed:true,text:'保存'} ], bbar:[{text:"这是状态栏"}], buttons:[{text:"该按钮位于底部！"}] });

对应的html：

<div id="divPanel"></div> <div id="divPanelContent"> ExtJs学习，欢迎大家多多交流，共同进步！cmj studio！ </div>

上面基本的配置熟悉都有注释就不再说了，关键一下contentEl、renderTo、draggable。

contentEl：就是panel中要显示的内容，不过它的值是一个html元素的id，例如上面我们就指明为"divPanelContent"，这样panel中就会显示这个层中的内容。当然如果只是简单的内容的话，我们可以直接使用html这个属性来指明panel内部的内容。

renderTo指的是渲染到哪个元素上，因为对于Ext来说所有的我们看到的控件都是通过基本的html来模拟的，而panel要想显示就必须通过层来模拟，所以从上面你也能够看到我们指定panel渲染到"divPanel"这个Html原色上。当然对于renderTo这个属性如果我们不配置的话也是可以的，这样的话我们可以在定义好panel之后，通过panel.render("divPanel");来渲染，其实是一样的。

扩展：到这里其实稍微知道Ext的朋友都知道，除了renderTo 、render在Ext中类似的还有applyTo、applyToMarkup。我们在此就看一下它的区别。

为了方便观察，我对上面的panel稍微修改只保留最基本的配置熟悉，html中不相关的内容也都清空了，这是完整的内容：

<html> <head> <link href="ext/resources/css/ext-all.css" mce_href="ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <mce:script src="ext/adapter/ext/ext-base.js" mce_src="ext/adapter/ext/ext-base.js" type="text/javascript"></mce:script> <mce:script src="ext/ext-all.js" mce_src="ext/ext-all.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> <div id="divPanel"></div> </body> </html>

然后我们查看生成的html内容，这里一定注意不要试图通过直接"查看页面源码"来查，这样的话你看到的和上面的无异，要知道我们想看到通过Ext处理之后的内容，这里我推荐使用IE WebDeveloper和Firedebug这两个小工具来看，下面是在Firedebug中查看的截图：

之后我将renderTo修改为applyTo再看：

对比上面的代码时我们主要看一下标有"x-panel"样式的div是在哪个div。对于第一幅图具有"x-panel"属性的div的id为"myPanel",而对于第二幅图，对应得是"divPanel"。也就是说renderTo对应于其所在元素的父元素，而applyTo对应元素本身。

接着说draggable属性，这个属性指示是否panel可以拖拽，如果为true就可以拖拽，但是你会发现虽然能拖拽但是鼠标松开之后会回到原位置。那么下面我们就寻求正常拖拽的方法。

方法很简单，只需要覆盖Draggable。

var panel=new Ext.Panel({ id:"myPanel",//标识 renderTo:"divPanel",//在哪个元素中渲染 title:"我的面板", width:400, height:300, floating: true,//如果为true则是浮动显示，否则内嵌。但是注意如果浮动不指定setPosition是看不到的因为它处负增量位置 frame: false,//如果为true 则panel具有全部阴影，否则只有1px边框 html:"<h1>这是在Panel中的内容...</h1>", contentEl:'divPanelContent',//此属性可以简写成“el”，显示哪个元素中的内容 draggable:{ insertProxy:true,//拖动时是否显示原位置虚线 onDrag:function(e){ var pn=this.proxy.getEl();//返回底层元素，用户得到元素属性 this.x=pn.getLeft(true);//得到横坐标 this.y=pn.getTop(true);//得到纵坐标 var sd=this.panel.getEl().shadow;//阴影 if(sd){ sd.realign(this.x,this.y,pn.getWidth(),pn.getHeight());//重新放置阴影到新位置 } }, endDrag:function(e){ this.panel.setPosition(this.x,this.y); } }, collapsible:true, titleCollapse:true,//是否点击整个标题栏都可以收缩 tools:[ {id:"Save",handler:function(){ Ext.Msg.alert("系统提示","保存成功!"); }}, {id:"Help"}, {id:"Close",handler:function(){ Ext.get("divPanel").hide(); }} ], tbar:[ new Ext.Toolbar.TextItem("工具栏"), {xtype:"tbfill"}, {pressed:true,text:'添加'}, {xtype:"tbseparator"}, {pressed:true,text:'保存'} ], bbar:[{text:"这是状态栏"}], buttons:[{text:"该按钮位于底部！"}] }); panel.setPosition(0,0);

上面的代码需要指明几点，第一就是添加了floating配置属性，如果不设置为true是不能够拖动的；第二就是为了在首次页面显示时看到panel，在添加了panel.setPosition(0,0);，原因已经在floating配置的注释后面说过了；

效果如下：

分享到：

SYSAUX表空间管理及恢复 | ExtJS之对话框及窗口篇

2010-08-12 22:02
浏览 805
评论(0)
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

extJs 2.1学习笔记: 20. extJs 2.0学习笔记(Ext.Panel篇一) 48 21. extJs 2.0学习笔记(Ext.Panel篇二) 50 22. extJs 2.0学习笔记(Ext.Panel篇三) 59 23. extJs 2.0学习笔记(Ext.Panel篇四) 62 24. extJs 2.0学习笔记(组件总论篇) 66 25....

ExtJs学习笔记，共30讲: 20. extJs 2.0学习笔记(Ext.Panel篇一) 48 21. extJs 2.0学习笔记(Ext.Panel篇二) 50 22. extJs 2.0学习笔记(Ext.Panel篇三) 59 23. extJs 2.0学习笔记(Ext.Panel篇四) 62 24. extJs 2.0学习笔记(组件总论篇) 66 25....

ExtJs入门实例: 6. ExtJs2.0学习系列(6)--Ext.FormPanel之第三式(ComboBox篇) 7. ExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇) 8. ExtJs2.0学习系列(8)--Ext.FormPanel之第五式(综合篇) 9. ExtJs2.0学习系列(9)--...

extjs图形绘制之饼图实现方法分析: 本文实例讲述了extjs图形绘制之饼图实现方法。分享给大家供大家参考，具体如下：这篇文章将介绍extjs中自带的饼图。代码如下： Ext.define('ChartPieTest', { extend: 'Ext.panel.Panel', autoScroll : true, ...

extjs4图表绘制之折线图实现方法分析: 本文实例讲述了extjs4图表绘制之折线图实现方法。分享给大家供大家参考，具体如下：本篇文章将介绍extjs中自带的图表在本次案例中，提供一下功能： 1.从后端请求数据并运用到图表中，形成动态数据。 2.查询出每年...

Extjs学习笔记之六面版: 前几篇文中用到的FormPanel就是继承自Panel类的。下面的例子展示了一个较为完整的Panel,主要是设置工具栏：代码如下: <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <title>Extjs ...

ExtJs 学习笔记基础篇 Ext组件的使用第1/2页: 天介绍一下Ext中组件举几个简单的例子做说明。注意：文章内容有些摘自本人学习过程中看到的资料。 Ext2.0对框架进行了非常...组件使用可以直接通过关键字new 来创建，比如上篇文章中说到的创建一个Window框 var win=ne

ExtAspNet_v2.3.2_dll: ExtAspNet - ExtJS based ASP.NET Controls with Full AJAX Support ExtAspNet是一组专业的Asp.net控件库，拥有原生的AJAX支持和丰富的UI效果，目标是创建没有ViewState，没有JavaScript，没有CSS，没有...

ExtAspNet v2.2.1 （2009-4-1）值得一看: -这样所有需要占据全屏的Panel（不管你是Accordion,Panel,ContentPanel,Form,GroupPanel,SimpleForm,Tree还是Grid,TabStrip）都可以通过这种方式全屏。 -简单方便，示例可以参考 default.aspx 或者 other\...

Global site tag (gtag.js) - Google Analytics