ExtJS Panel主要配置列表
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主要配置列表的更多相关文章
- 无废话ExtJs 入门教程十七[列表:GridPanel]
无废话ExtJs 入门教程十七[列表:GridPanel] extjs技术交流,欢迎加群(201926085) 在Extjs中,GridPanel用于数据显示,即我们平时说的列表页.在本节中,我们先对 ...
- 夺命雷公狗ThinkPHP项目之----企业网站18之网站配置列表页的完成
我们点击下配置列表即可查看我们列表页的配置信息了: 其实这个最简单了,首先我们先来完成他控制器的代码: public function lists(){ $mod = M('Conf')->se ...
- 深入理解Eureka - Eureka配置列表
Eureka包含四个部分的配置 instance:当前Eureka Instance实例信息配置 client:Eureka Client客户端特性配置 server:Eureka Server注册中 ...
- atitit.手动配置列表文件的选择and 数据的层次结构 attilax总结最佳实践--yaml
atitit.手动配置列表文件的选择and 数据的层次结构 attilax总结最佳实践--yaml 1. yaml是个好的选择.. 1 2. 数据的层次结构--结构:hash,list,和block ...
- Extjs入门——环境配置
Extjs框架作为一个07年就上线的框架,虽然与现在的框架对比,显得十分臃肿.但是在针对企业内部引用系统上,它依旧能发挥出不错的效果.现在我接触到了Extjs,所以我准备写一个入门框架,简单的介绍Ex ...
- Extjs Panel
刚学习Extjs @{ Layout = "~/_SiteLayout.cshtml"; Page.Title = "欢迎访问我的网站!"; } @{ stri ...
- Extjs.panel.Panel赋值的问题
初学extjs,很是不爽.也是只有初学者才犯的错误,发出来以免再犯. 先创建一个panel var panel1 = Ext.create('Ext.panel.Panel', { id: 'p1', ...
- 6. extjs panel layoutconfig属性
转自:https://blog.csdn.net/xingtianyiyun/article/details/7686811 layoutConfig: Object 这是一个包含指定布局详细属性的对 ...
- 22.Extjs Panel中显示多行工具栏(tbar)
转自:http://blog.sina.com.cn/s/blog_454fbf740100t0xj.html 在应用程序的制作中,我们经常性的会用到工具栏,在Extjs中Panel中提供了tbar和 ...
随机推荐
- 解决maven Generating project in Interactive mode卡死问题(转)
原文链接:http://blog.csdn.net/only_wan/article/details/52975760 mvn 创建时在generating project in interactiv ...
- windows azure中国 里面建立一个虚拟机,与虚拟机建立通信 里面部署IIS,外网访问
在windows azure中国 里面建立一个虚拟机,里面部署IIS,外网不能访问么? 外网访问的地址是给的那个DNS地址 ,比如我的是 DNS 名称 urbanairserver.cloudapp. ...
- 百度云加速时使用Cloudflare的技术
百度云加速时使用Cloudflare的技术 引用“百度的关于我们”这是在打脸吗?就是把英文翻译过来换个验证码 百度是全球最大的中文搜索引擎.最大的中文网站.2000年1月创立于北京中关村.如今,百度已 ...
- Ogre中TerrainSceneManager
转自:http://blog.csdn.net/yanonsoftware/article/details/1103665 TerrainSceneManager是一个OctreeSceneManag ...
- (转)Position定位:relative | absolute
原文:http://hi.baidu.com/zxc0420/item/9ada5110845ba1e89c778a08 Position定位:relative | absolute 定位一直是WEB ...
- Python学习路程day4
迭代器&生成器 迭代器 迭代器是访问集合元素的一种方式.迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后退,不过这也没什么,因为人们很少在迭代途中往后退. ...
- 强引用strong和弱引用weak的定义
1.强引用表示从属关系,引用对象拥有被引用的对象.弱引用则暗示引用对象不拥有被引用的对象.一个对象的寿命是由它被强引用多少次来决定的.只要对象还存在强引用,就不会释放该对象. 注意:但是对象之间的引用 ...
- Include and Require
The include or require statement takes all the text/codde/markup that exists in the specified file a ...
- Android弹出选项框及指示箭头动画选择
Android弹出选项框及指示箭头动画选择 Android原生的Spinner提供了下拉列表选项框,但在一些流行的APP中,原生的Spinner似乎不太受待见,而通常会有下图所示的下拉列表选项框 ...
- 【转发】构建高可伸缩性的WEB交互式系统(下)
原文转自:http://kb.cnblogs.com/page/504518/ 本文是<构建高可伸缩性的WEB交互式系统>系列文章的第三篇,以网易的NEJ框架为例,对模块的可伸缩性进行分析 ...