ExtJs2.0学习系列--Ext.Panel
上一篇文章ExtJs2.0学习系列(1)--Ext.MessageBox ,受到了大家的褒贬不一,还是有的朋友提出好的建议,在此表示感谢!
今天介绍extjs中的Panel组件。
//html代码
<div id="container"> </div>
//js代码
var p = new Ext.Panel({ title: 'My Panel',//标题 collapsible:true,//右上角上的那个收缩按钮,设为false则不显示 renderTo: 'container',//这个panel显示在html中id为container的层中 width:400, height:200, html: "<p>我是内容,我包含的html可以被执行!</p>"//panel主体中的内容,可以执行html代码 }); 因为panel组件的子类组件包括TabPanel,GridPanel,FormPanel,TreePanel组件,所以非常有必要介绍Panel组件的配置参数和相关的属性、方法。
//配置参数(只列举部分常用参数)
1.autoLoad:有效的url字符串,把那个url中的body中的数据加载显示,但是可能没有样式和js控制,只是html数据 2.autoScroll:设为true则内容溢出的时候产生滚动条,默认为false 3.autoShow:设为true显示设为"x-hidden"的元素,很有必要,默认为false 4.bbar:底部条,显示在主体内,//代码:bbar:[{text:'底部工具栏bottomToolbar'}], 8.collapsible:设为true,显示右上角的收缩按钮,默认为false 10.html:主体的内容 14.titleCollapse:设为true,则点击标题栏的任何地方都能收缩,默认为false. 15.applyTo:(id)呈现在哪个html元素里面 考虑到入门,方法事件会在以后的文章中以实例穿插。
//html代码
..无..
//下面创建一个允许拖动的panel,但是拖动的结果不能保存
var p=new Ext.Panel({ title: 'Drag me', x: 100, y: 100, renderTo: Ext.getBody(),//x,y,renderTo:Ext.getBody()初始化panel的位置 floating: true,//true frame: true,//圆角边框 width: 400, height: 200, draggable:true }).show();//在这里也可以不show() 但是还不能拖到其他的地方,我们需要改写draggable:
draggable: {
insertProxy: false,//拖动时不虚线显示原始位置 onDrag : function(e){ endDrag : function(e){ 实现了可保存的拖动,如图:
var s = this.panel.getEl().shadow;
if (s) { s.realign(this.x, this.y, pel.getWidth(), pel.getHeight()); } //shadow的realign方法的四个参数,改变shadow的位置大小属性 最后这个可拖动的panel的代码为:
var p=new Ext.Panel({
title: 'Drag me', x: 100, y: 100, renderTo: Ext.getBody(), floating: true, frame: true, width: 400, height: 200, draggable: { insertProxy: false, onDrag : function(e){ var s = this.panel.getEl().shadow; 2.带顶部,底部,脚部工具栏的panel
var p=new Ext.Panel({
id:"panel1", title:"标题", collapsible:true, renderTo:"container", closable:true, width:400, height:300, tbar:[{text:"按钮1"},{text:"按钮2"}], //顶部工具栏 bbar:[{text:"按钮1"},{text:"按钮2"}], //底部工具栏 html:"内容", buttons:[{text:"按钮1"},{text:"按钮2"}] //footer部工具栏 });
tbar:[{text:"按钮1",handler:function(){Ext.MessageBox.alert("我是按钮1","我是通过按钮1激发出来的弹出框!")}},{text:"按钮2"}],
//改写tbar,添加handler句柄,点击顶部工具栏上按钮1,弹出提示框,效果图大家想象下,就不贴出来了 当然,一般情况下,我们只要一个工具栏,这里只是为了演示!
//添加下面的代码到panel配置参数中
tools:[{id:"save"},{id:"help"},{id:"up"},{id:"close",handler:function(){Ext.MessageBox.alert("工具栏按钮","工具栏上的关闭按钮时间被激发了")}}], //id控制按钮,handler控制相应的事件 //id的枚举值为: toggle (collapsable为true时的默认值) close minimize maximize restore gear pin unpin right left up down refresh minus plus help search save 关于panel今天就讨论到这里,欢迎批评!一起期待下一片文章. |
转载于:https://www.cnblogs.com/linpengfeixgu/articles/1298748.html
ExtJs2.0学习系列--Ext.Panel相关推荐
- ExtJs2.0学习系列(2)--Ext.Panel
随笔- 71 文章- 10 评论- 1096 ExtJs2.0学习系列(2)--Ext.Panel 上一篇文章ExtJs2.0学习系列(1)--Ext.MessageBox ,受到了大家的褒贬不 ...
- ExtJs2.0学习系列(12)--Ext.TreePanel之第一式
今天开始,我们就开始一起学习TreePanel了,道个歉,上篇的代码很乱阿. 我总是喜欢用最简单的例子开始,去理解最基本的使用方法,减少对i后面高级使用的干扰! TreePanel是继承自Panel, ...
- ExtJs2.0学习系列(4)--Ext.FormPanel之第一式
随笔- 71 文章- 10 评论- 1096 ExtJs2.0学习系列(4)--Ext.FormPanel之第一式 上篇中我们讨论了Ext.window的简单使用,今天我们要看看强大的FormP ...
- ExtJs2.0学习系列(3)--Ext.Window
ExtJs2.0学习系列(3)--Ext.Window 前言:关于extjs,为了照顾还没有入门的新手,我给一点提示,有一个网站浪曦视频在线里面请了个老师录制了extjs的介绍入门的视频,环境可能不同 ...
- ExtJs2.0学习系列(6)--Ext.FormPanel之第三式(ComboBox篇)
前言:说句实话,此extjs系列的文章在博客园中的热度不高,可能是学这玩意的人不多吧,但是我觉得有这么个系列的文章对于中国朋友非常有帮助!请大家支持! 上篇ExtJs2.0学习系列(5)--Ext.F ...
- ExtJs2.0学习系列(5)--Ext.FormPanel之第二式
随笔- 71 文章- 10 评论- 1096 ExtJs2.0学习系列(5)--Ext.FormPanel之第二式 上篇中我们简单的谈到了FormPanel中的fieldset和ComboBox ...
- ExtJs2.0学习系列(1)--Ext.MessageBox
随笔- 71 文章- 10 评论- 1096 ExtJs2.0学习系列(1)--Ext.MessageBox 大家都知道,刚开始搞extjs的时候,很是有点困难,所以本人在新手刚入门后准备了这个 ...
- ExtJs2.0学习系列(11)--Ext.XTemplate
XTemplate是Extjs里面的模板组件. 下面我们看个最简单的例子. 效果图: js代码: Ext.onReady(function(){ //数据源 var data={ ...
- extJs 2.0学习笔记(Ext.Panel篇四)
我刚才禁不住诱惑去看了一下Ext.Window的API文档,发现只是比Panel多了点什么最大化.最小化.关闭.置前.置后.动画引发目标设置.可调整大小这些功能.像什么标题栏.工具栏之类的东西在Ext ...
最新文章
- C语言的逗号!_只愿与一人十指紧扣_新浪博客
- 如何将 CentOS迁移到 AlmaLinux?
- 拒绝了对对象 'XXX' (数据库 'XXX',架构 'dbo')的 SELECT 权限
- 面试官:前端跨页面通信,你知道哪些方法?
- 【正则表达式】正则表达式匹配${xxx}
- UVA11161 Help My Brother (II)【大数+递推】
- IE兼容性问题解决方案
- Qt QListView详解
- java 注解 controller_@Controller注解
- mybatis case when
- 微信开发工具无法支持vue文件
- shell脚本编程大全
- typora+阿里云图床+印象笔记+OneDrive安全保存你的文章
- Unity 触发检测 碰撞检测
- 中国洗衣胶囊行业市场供需与战略研究报告
- 迷人和漂亮的十几岁的明星
- 非常可乐题解(BFS)
- Google Earth更新北京奥运场馆卫星地图
- item_review - 获得商品评论(shopee虾皮)
- 【笔记3-6】CS224N课程笔记 - RNN和语言模型