Ext.panel.Panel

属性

描述

animCollapse

Boolean

设置面板折叠展开是否显示动画,Ext.Fx可用默认true,否则false

applyTo

Mixed

面板定位

autoDestroy

Boolean

是否自动销毁从容器中移除组件(默认true)

autoHeight

Boolean

是否自动高度(默认false)

autoLoad

Object/String/Function

设置面板自动加载的url

autoScroll

Boolean

设置是否自动加载滚动条(默认false自动加滚动条)

autoShow

Boolean

是否移除组件的隐藏样式(默认flase)

autoWidth

Boolean

是否自动宽度(默认false)

baseCls

String

面板的基本样式类(默认x-panel)

bbar

Object/Array

设置面板底端工具栏,可是Ext.Toolbar,工具栏配置对象,button的数组

bodyBorder

Boolean

是否显示面板体内部边框(默认true,在border=true生效)

bodyStyle

String/Object/Function

应用于面板体的自定义样式(默认null)

border

Boolean

是否显示面板体边框(默认true,2px)

buttonAlign

String

设置面板底部按钮对齐方式(默认right,可为left,center)

buttons

Array

设置面板底部按钮配置数组

collapseFirst

Boolean

该项决定展开收缩按钮的位置(默认true)

collapsed

Boolean

设置面板在第一次渲染时是否处于收缩状态(默认true)

collapsible

Boolean

是否允许面板展开收缩(默认false)

contentEI

String

设置面板的内容元素,可为页面元素id,已存在的HTML节点

defaultType

String

面板中元素的默认类型(默认panel)

defaults

Object

应用到面板容器中所有元素配置对象,如:defaults:{bodyStyle:'padding:15px'}

floating

Boolean

设置面板是否可浮动(默认true,会导致面板显示负偏移,位置要明确设置!)

footer

Boolean

设置是否创建面板底部元素(默认true)

frame

Boolean

设置是否渲染面板

header

Boolean

设置是否创建头部(默认true)

headerAsText

Boolean

是否在面板header中显示title(默认true)

height

Number

面板高度(默认auto)

hideBorders

Boolean

true隐藏面板中所有元素的边框,false据组件具体配置

hideCollapseTool

Boolean

设置当collapsible为true是,是否显示展开收缩按钮

html

String/Object

设置面板元素内容为HTML片段或DomHelper生成内容

items

Mixed

单独一个子组件或子组件数组

layout

String

面板布局类型(默认Ext.layout.ContainerLayout布局)

layoutConfig

Object

这个配置对象包含被选布局的配置项

maskDisabled

Boolean

设置当面板不可使用时是否遮罩面目(默认true)

shadow

Boolean/String

设置是否在面板后显示阴影(默认true)

shadowOffset

Number

设置面板阴影偏移量(默认4)

tbar

Object/Array

设置面板顶端工具栏,可是Ext.Toolbar,工具栏配置对象,button配置对象数组,面板渲染后只能通过getTopToolbar方法访问该工具栏

title

String

显示在面板的头部标题信息

titleCollapse

Boolean

设置是否允许单击面板头部进行展开收缩(默认false)

tools

Array

面板头部工具按钮配置对象数组

width

Number

面板宽度(默认auto)

/*
tools配置表:
id String 必选
handler Function 单击按钮后出发的处理函数
scope Object 处理函数执行范围
qtip String/Object 为按钮指定提示信息
hidden Boolean 设置初次渲染是否隐藏
on Object 为按钮配置事件监听 tools配置项id对应不同按钮
*/
Ext.onReady(function() {
var config = {
title : '面板头部(hear)',
tbar : [ '顶端工具栏(top toolbars)' ],
bbar : [ '底端工具栏(bottom toolbars)' ],
height : 200,
width : 300,
frame : true,
renderTo : 'panel',
bodyStyle : 'background-color:#ffffff',
html : '<div>面板体(body)',
tools : [ {
id : 'toggle '
}, {
id : 'close '
}, {
id : 'maximize '
} ],
buttons : [ new Ext.Button({
text : '面板底部 (footer)'
}) ]
};
new Ext.Panel(config);
});
通过面板加载内容的方式有:
1.通过autoLoad加载远程页面
/*
使用autoLoad加载远程页面
*/
Ext.onReady(function() {
var config = {
title : '面板加载远程页面',
height : 150,
width : 250,
frame : true,
autoScroll : true,
collapsible : true, // 允许展开和收缩
applyTo : 'panel',
autoLoad : {
url : 'page1.html'
}, // 自动加载面板体的链接
bodyStyle : 'background-color:#ffffff'
}; var panel = new Ext.Panel(config);
});
2.通过contentEl加载本地资源
/*
contentEI加载本地资源
*/ Ext.onReady(function() {
var config = {
title : '面板加载本地数据',
height : 150,
width : 250,
frame : true,
collapsible : true,
autoScroll : true,
autoHeight : false,
// autoHeight:true,
renderTo : 'panel',
contentEl : 'localElement', // 要加载的本地资源的id,contentEl中l为小写的L!
bodyStyle : 'background-color:#ffffff'
}; new Ext.Panel(config);
}); <table id='localElement'>
<tr>
<td colspan="2">远程页面</td>
</tr>
<tr>
<td width="60">编号</td>
<td width="80">姓名</td>
</tr>
<tr>
<td>编号</td>
<td>姓名</td>
</tr>
<tr>
<td>编号</td>
<td>姓名</td>
</tr>
<tr>
<td>编号</td>
<td>姓名</td>
</tr>
<tr>
<td>编号</td>
<td>姓名</td>
</tr>
</table>
3.通过html配置自定义面板内容
var htmlArray = [ '<table>', '<tr><td colspan="2">html配置自定义面板内容</td></tr>',
'<tr><td width="60">编号</td><td width="80">姓名</td></tr>',
'<tr><td>编号</td><td>姓名</td></tr>', '<tr><td>编号</td><td>姓名</td></tr>',
'<tr><td>编号</td><td>姓名</td></tr>', '<tr><td>编号</td><td>姓名</td></tr>',
'<tr><td>编号</td><td>姓名</td></tr>', '<tr><td>编号</td><td>姓名</td></tr>',
'<tr><td>编号</td><td>姓名</td></tr>', '<tr><td>编号</td><td>姓名</td></tr>',
'</table>' ]; var config = {
title : '使用html配置自定义面板内容', // panel标题
height : 150, // panel高
width : 250, // panel宽
frame : true, // 渲染
collapsible : true, // 允许展开收缩
autoScroll : true, // 允许显示滚动条
autoHeight : false, // 使用固定高度
// autoHeight:true, //自适应高度
renderTo : 'panel', // 定位
html : htmlArray.join(''), // panel中显示的自定义html代码
bodyStyle : 'background-color:#ffffff' // panel背景色
}; var panel = new Ext.Panel(config);
4.通过items配置在面板中添加组件
/*
使用items配置在面板中添加组件
*/ /*使用items配置添加单一组件实例*/
Ext.onReady(function() {
var config = {
headler : true, // 面板头部
title : '日历', // 面板标题
frame : true, // 渲染
collapsible : true, // 允许伸展收缩
autoHeight : true, // 允许自动高度
width : 189, // 面板固宽度
renderTo : 'panel', // 面板定位
items : new Ext.DatePicker()
// 向面板中添加一日期组件
}; var panel = new Ext.Panel(config);
}); /* 使用items配置添加多个组件实例 */
Ext.onReady(function() {
var config = {
headler : true,
title : '使用items配置添加多个组件',
frame : true,
height : 200,
width : 250,
renderTo : 'panel',
// 设置所有面板的默认属性
defaults : {
bodyStyle : 'background-color:#ffffff', // 背景色
height : 80, // 面板固定高度
collapsible : true, // 允许伸展收缩
autoScroll : true
// 自动显示滚动条
},
// 面板元素数组
items : [
// 嵌套面板一
new Ext.Panel({
title : '嵌套面板一',
contentEl : 'localElement' // 加载本地数据
}), new Ext.Panel({
title : '嵌套面板而',
autoLoad : 'page1.html' // 加载远程页面(失败)
}) ]
}; var panel = new Ext.Panel(config);
});

ExtJS Panel主要配置列表的更多相关文章

  1. 无废话ExtJs 入门教程十七[列表:GridPanel]

    无废话ExtJs 入门教程十七[列表:GridPanel] extjs技术交流,欢迎加群(201926085) 在Extjs中,GridPanel用于数据显示,即我们平时说的列表页.在本节中,我们先对 ...

  2. 夺命雷公狗ThinkPHP项目之----企业网站18之网站配置列表页的完成

    我们点击下配置列表即可查看我们列表页的配置信息了: 其实这个最简单了,首先我们先来完成他控制器的代码: public function lists(){ $mod = M('Conf')->se ...

  3. 深入理解Eureka - Eureka配置列表

    Eureka包含四个部分的配置 instance:当前Eureka Instance实例信息配置 client:Eureka Client客户端特性配置 server:Eureka Server注册中 ...

  4. atitit.手动配置列表文件的选择and 数据的层次结构 attilax总结最佳实践--yaml

    atitit.手动配置列表文件的选择and 数据的层次结构 attilax总结最佳实践--yaml 1. yaml是个好的选择.. 1 2. 数据的层次结构--结构:hash,list,和block  ...

  5. Extjs入门——环境配置

    Extjs框架作为一个07年就上线的框架,虽然与现在的框架对比,显得十分臃肿.但是在针对企业内部引用系统上,它依旧能发挥出不错的效果.现在我接触到了Extjs,所以我准备写一个入门框架,简单的介绍Ex ...

  6. Extjs Panel

    刚学习Extjs @{ Layout = "~/_SiteLayout.cshtml"; Page.Title = "欢迎访问我的网站!"; } @{ stri ...

  7. Extjs.panel.Panel赋值的问题

    初学extjs,很是不爽.也是只有初学者才犯的错误,发出来以免再犯. 先创建一个panel var panel1 = Ext.create('Ext.panel.Panel', { id: 'p1', ...

  8. 6. extjs panel layoutconfig属性

    转自:https://blog.csdn.net/xingtianyiyun/article/details/7686811 layoutConfig: Object 这是一个包含指定布局详细属性的对 ...

  9. 22.Extjs Panel中显示多行工具栏(tbar)

    转自:http://blog.sina.com.cn/s/blog_454fbf740100t0xj.html 在应用程序的制作中,我们经常性的会用到工具栏,在Extjs中Panel中提供了tbar和 ...

随机推荐

  1. 解决maven Generating project in Interactive mode卡死问题(转)

    原文链接:http://blog.csdn.net/only_wan/article/details/52975760 mvn 创建时在generating project in interactiv ...

  2. windows azure中国 里面建立一个虚拟机,与虚拟机建立通信 里面部署IIS,外网访问

    在windows azure中国 里面建立一个虚拟机,里面部署IIS,外网不能访问么? 外网访问的地址是给的那个DNS地址 ,比如我的是 DNS 名称 urbanairserver.cloudapp. ...

  3. 百度云加速时使用Cloudflare的技术

    百度云加速时使用Cloudflare的技术 引用“百度的关于我们”这是在打脸吗?就是把英文翻译过来换个验证码 百度是全球最大的中文搜索引擎.最大的中文网站.2000年1月创立于北京中关村.如今,百度已 ...

  4. Ogre中TerrainSceneManager

    转自:http://blog.csdn.net/yanonsoftware/article/details/1103665 TerrainSceneManager是一个OctreeSceneManag ...

  5. (转)Position定位:relative | absolute

    原文:http://hi.baidu.com/zxc0420/item/9ada5110845ba1e89c778a08 Position定位:relative | absolute 定位一直是WEB ...

  6. Python学习路程day4

    迭代器&生成器 迭代器 迭代器是访问集合元素的一种方式.迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后退,不过这也没什么,因为人们很少在迭代途中往后退. ...

  7. 强引用strong和弱引用weak的定义

    1.强引用表示从属关系,引用对象拥有被引用的对象.弱引用则暗示引用对象不拥有被引用的对象.一个对象的寿命是由它被强引用多少次来决定的.只要对象还存在强引用,就不会释放该对象. 注意:但是对象之间的引用 ...

  8. Include and Require

    The include or require statement takes all the text/codde/markup that exists in the specified file a ...

  9. Android弹出选项框及指示箭头动画选择

     Android弹出选项框及指示箭头动画选择 Android原生的Spinner提供了下拉列表选项框,但在一些流行的APP中,原生的Spinner似乎不太受待见,而通常会有下图所示的下拉列表选项框 ...

  10. 【转发】构建高可伸缩性的WEB交互式系统(下)

    原文转自:http://kb.cnblogs.com/page/504518/ 本文是<构建高可伸缩性的WEB交互式系统>系列文章的第三篇,以网易的NEJ框架为例,对模块的可伸缩性进行分析 ...