面板的五个部分
来源:互联网 发布:outlook pop服务器端口 编辑:程序博客网 时间:2024/06/09 20:00
//这段代码在VS中执行结果与firebug下有差别,不同之处就是底端工具栏的显示.还有就是标题栏的工具按钮显示有问题
//Ext.get(document.body).update('<div />');
var firstPanel = Ext.create('Ext.panel.Panel', {
collapsible:true,
renderTo: Ext.getBody(),
layout: 'accordion',//采用折叠布局,适合大量分组内容,多个子面板放在面板中,一次只有个子面板处于打开状态。,
//然后可以点击按钮展开各个子面板和收缩子面板。
defaults: { bodyPadding:11},
frame: true,
title: '面板头部',//第一部分:又叫面板标题栏
height: 300,
bodyPadding: 5,//不定义bodyPadding可能会导致面板体上的文本被面板部分遮挡,所以需要定义面板体的填充,只需要上下偏离5个像素,就可确保文本不会被面板标题栏和面板左边元素遮挡。
html: '<b>面板体<b>',//第二部分:设置面板体的内容为html片段,当然除了添加html标签也可以添加文本。
width: 450,//默认panel的宽度是浏览器的宽度,即宽度充满整个页面。
bodyStyle: 'background-color:#ffffff',//设置面板体背景为白色
tbar: [//第三部分,面板的上部工具栏,添加工具栏配置对象(即按钮)。
{ text: '新建' },//面板中定义的组件,默认是panel,但是若在配置对象中使用了text属性,则添加组件为button
{ text: '打开' },//若是使用了title则为panel
{ text: '保存' }
],
bbar: [//第四部分:面板的底端工具栏.要显示定义按钮{text:‘提交’},若是以{'提交'}则提交二字会部分被面板下部遮挡
{text: '提交' },
{text:'取消提交'}
],
tools: [//面板标题栏工具按钮,可以定义面板的最小化,最大化,关闭。都是按钮的形式。用面板提供的id
//{ id: 'toggle' },//定义对应的按钮很方便,程序员只需要实现对应的handler就ok了。
{ id: 'minimize' },
//{ id: 'print' },
{ id: 'close' },
{ id: 'maximize' }
],
buttons: [//第五部分:面板的底部位于面板体的右下方,但是并不是面板的最下,底端工具栏处于面板的最下方。
{ text: '面板底部' }
],
items:[
{title:'面板一',html:'面板一面板体'},
{title:'面板二',html:'面板二面板体'}
]
});
//Ext.get(document.body).update('<div />');
var firstPanel = Ext.create('Ext.panel.Panel', {
collapsible:true,
renderTo: Ext.getBody(),
layout: 'accordion',//采用折叠布局,适合大量分组内容,多个子面板放在面板中,一次只有个子面板处于打开状态。,
//然后可以点击按钮展开各个子面板和收缩子面板。
defaults: { bodyPadding:11},
frame: true,
title: '面板头部',//第一部分:又叫面板标题栏
height: 300,
bodyPadding: 5,//不定义bodyPadding可能会导致面板体上的文本被面板部分遮挡,所以需要定义面板体的填充,只需要上下偏离5个像素,就可确保文本不会被面板标题栏和面板左边元素遮挡。
html: '<b>面板体<b>',//第二部分:设置面板体的内容为html片段,当然除了添加html标签也可以添加文本。
width: 450,//默认panel的宽度是浏览器的宽度,即宽度充满整个页面。
bodyStyle: 'background-color:#ffffff',//设置面板体背景为白色
tbar: [//第三部分,面板的上部工具栏,添加工具栏配置对象(即按钮)。
{ text: '新建' },//面板中定义的组件,默认是panel,但是若在配置对象中使用了text属性,则添加组件为button
{ text: '打开' },//若是使用了title则为panel
{ text: '保存' }
],
bbar: [//第四部分:面板的底端工具栏.要显示定义按钮{text:‘提交’},若是以{'提交'}则提交二字会部分被面板下部遮挡
{text: '提交' },
{text:'取消提交'}
],
tools: [//面板标题栏工具按钮,可以定义面板的最小化,最大化,关闭。都是按钮的形式。用面板提供的id
//{ id: 'toggle' },//定义对应的按钮很方便,程序员只需要实现对应的handler就ok了。
{ id: 'minimize' },
//{ id: 'print' },
{ id: 'close' },
{ id: 'maximize' }
],
buttons: [//第五部分:面板的底部位于面板体的右下方,但是并不是面板的最下,底端工具栏处于面板的最下方。
{ text: '面板底部' }
],
items:[
{title:'面板一',html:'面板一面板体'},
{title:'面板二',html:'面板二面板体'}
]
});
0 0
- 面板的五个部分
- 搜索引擎优化最常犯的五个错误(第二部分)
- 搜索引擎优化最常犯的五个错误(第一部分)
- ScrumAlliance对Agile Coach的能力定义了五个部分
- 一个由C/C++编译的程序占用的内存分为以下五个部分
- 软件工程之五个层次四个部分
- Windows系统中可能含有的控制面板文件(并不完全,某些系统可能没有安装部分控制面板工具)
- 控制面板的面板项找不到?
- CMMI的五个台阶(五个等级)
- 控制面板的编程
- 控制面板的快捷方式
- 控制面板的快捷键
- 可折叠的SWT面板
- ubuntu面板的恢复
- jQuery的tab面板
- 可以伸缩的面板
- 内容面板的切换
- dbd面板的布局
- C++ restrict关键字
- 1410242114-hd-Balloon Comes!
- C7_结构体
- Nginx的配置与部署(11)应用模块之Memcached模块的两大应用场景
- java c/s中的日期选择控件 按钮式
- 面板的五个部分
- IIS权限设置
- C# XMLDocument
- WPF MVVM TreeViewItem
- 计算机视觉目标检测的框架与过程
- 计算机网络协议第三章,网络层协议
- uva 10012 - How Big Is It?
- HDU 5014 Number Sequence
- ftp的web访问格式