作者:李盼(Lipan)
出处:[Lipan]http://www.cnblogs.com/lipan/
版权声明:本文的版权归作者与博客园共有。转载时须注明本文的详细链接,否则作者将保留追究其法律责任。

本篇讲解三个容器类控件。

一、面板控件 Ext.Panel

一个面板控件包括几个部分,有标题栏、工具栏、正文、按钮区。标题栏位于最上面,工具栏可以在四个位置放置,围绕中间部分正文,按钮区位于最小方。下面介绍几个基本配置项:

1.title:设置面板标题文本。

2.tbar,lbar,rbar,bbar:分别设置上、左、右、下四个部位的工具栏。

3.html,items:前者用来设置正文部分的html,后者设置正文部分的ext控件。

4.buttons:设置按钮区的按钮。

下面看看面板生成代码:

[html]

    <h1>Panel</h1>
<div id="div1" class="content">
</div>

[Js]

Ext.onReady(function () {
var p = Ext.create('Ext.Panel', {
title: '面板标题',
collapsible: true,
renderTo: 'div1',
width: 400,
height: 300,
autoScroll: false,
bodyBorder: true,
buttonAlign: 'right',
buttons: [{
text: "按钮1",
handler: function () {
Ext.Msg.alert("提示", "第一个事件");
},
id: "bt1"
}, {
text: "按钮2",
id: "bt2"
}
],
floating: true,
footerCfg: { tag: 'span', id: 'span1', html: '面板底部' },
items: [{
xtype: "button",
text: "按钮"
}],
tbar: Ext.create('Ext.toolbar.Toolbar', { items: ["工具栏"] }),
html: "<b>正文</b>"
}); p.setPosition(40, 50); });

效果如下:

二、窗口控件 Ext.window.Window

窗口控件与面板控件基本类似,只不过他看起来像一个窗口,具备最大化,最小化,打开关闭、拖动等窗口操作,下面看看窗口生成代码:

下面看看面板生成代码:

[html]

    <h1>窗口</h1>
<div class="content" style="height:300px">
<button id="button1">打开窗口</button>
<div id="win1"></div>
</div>

[Js]

Ext.onReady(function () {
var window1 = Ext.create('Ext.window.Window', {
applyTo: 'win1',
layout: 'table', //内部元素布局方式{absolute accordion anchor border card column fit form table}
width: 500,
height: 200,
closeAction: 'hide', //窗口关闭的方式:hide/close
plain: true,
title: "窗口标题",
maximizable: true, //是否可以最大化
minimizable: true, //是否可以最小化
closable: false, //是否可以关闭
modal: true, //是否为模态窗口
resizable: false, //是否可以改变窗口大小
items: [{
text: '按钮',
xtype: "button"
}, {
width: 214,
minValue: 0,
maxValue: 100,
value: 50,
xtype: "slider"
}, {
xtype: "button",
text: '一个菜单',
width: "60px",
height: "15px",
menu: {
items: [
new Ext.ColorPalette({
listeners: {
select: function (cp, color) {
Ext.Msg.alert('颜色选择', '你选择了' + color + '。');
}
}
}), '-',
{ text: '菜单项1' }, { text: '菜单项2' }, { text: '菜单项3' }
]
}
}], buttons: [{
text: '确定',
disabled: true
}, {
text: '取消',
handler: function () {
window1.hide();
}
}]
});
Ext.fly("button1").on("click", function () {
window1.show(Ext.get("button1"));
});
});

效果如下:

三、布局控件 Ext.container.Viewport

布局控件一般用于整个页面的排版布局,它按四个方向分为四块区域,和中间正文部分,四个区域都可以自动隐藏,其实这个控件的核心功能就是用到了“border”方式的布局,下面看看生成代码:

[Js]

Ext.onReady(function () {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'north',
html: '<h1>这里放置logo</h1>',
xtype: "panel",
title: "标题",
autoHeight: true,
border: false,
margins: '0 0 5 0'
}, {
region: 'west',
collapsible: true,
title: '左侧导航',
xtype: 'panel',
width: 200,
autoScroll: true
}, {
region: 'center',
xtype: 'tabpanel',
activeItem: 0,
items: {
title: '首页',
html: '这里是首页正文内容'
}
}, {
region: 'south',
title: '底部',
collapsible: true, //允许折叠
html: '这里放置版权信息',
split: true,
height: 100,
minHeight: 100
}]
}); });

效果如下:

[转载]ExtJs4 笔记(9) Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件的更多相关文章

  1. ExtJs4 笔记(9) Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件

    本篇讲解三个容器类控件. 一.面板控件 Ext.Panel 一个面板控件包括几个部分,有标题栏.工具栏.正文.按钮区.标题栏位于最上面,工具栏可以在四个位置放置,围绕中间部分正文,按钮区位于最小方.下 ...

  2. [转载]ExtJs4 笔记(10) Ext.tab.Panel 选项卡

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...

  3. [转载]ExtJs4 笔记(8) Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...

  4. [转载]ExtJs4 笔记(12) Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...

  5. [转载]ExtJs4 笔记(11) Ext.ListView、Ext.view.View 数据视图

    本篇介绍两个用来展示数据的容器控件,分别是Ext.ListView和Ext.view.View.Ext.ListView就是大名鼎鼎的 Ext GridPanel的前身,不过现在的Ext4已经将它整合 ...

  6. [转载]ExtJs4 笔记(7) Ext.tip.ToolTip 提示

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...

  7. [转载]ExtJs4 笔记(4) Ext.XTemplate 模板

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...

  8. [转载]ExtJs4 笔记(1) ExtJs大比拼JQuery:Dom文档操作

    出处:[Lipan] (http://www.cnblogs.com/lipan/) 现在主流的JS框架要数ExtJs和JQuery应用的比较广泛.JQuery属于轻量级的,一般做网站应用比较常见,可 ...

  9. [转载]ExtJs4 笔记(2) ExtJs对js基本语法扩展支持

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/) 本篇主要介绍一下ExtJs对JS基本语法的扩展支持,包括动态加载.类的封装等. 一.动态引 ...

随机推荐

  1. 由SimpleAyncTaskExecutor到ListenableFutureTask

    Spring AsyncExecutor观后感 导语 本来想看下spring关于Async&Sync TaskExecutor的主要内容,看着看着发现ListenableTaskExecuto ...

  2. Hibernate框架之Criteria查询

    首先给大家说说Hibernate检索方式 Hibernate提供了5种检索对象的方式 1.导航对象图检索方式:根据已经加载的对象导航到其他对象 2.OID检索方式:按照对象的OID来检索对象 3.HQ ...

  3. Windows程序==>>使用ListView控件展示数据

    使用ListView控件展示数据 01.ImageList控件 1.了解了解         属性 说明 Images 储存在图像列表中的所有图像 ImageSize 图像列表中图像的大小 Trans ...

  4. centos/rhel 6.5下rabbitmq安装(最简单方便的方式)

    wget -c http://apt.sw.be/redhat/el5/en/x86_64/rpmforge/RPMS/rpmforge-release-0.3.6-1.el5.rf.x86_64.r ...

  5. XPM转换与查看工具

    X PixMap (XPM)是一种基于ASCII编码的图像格式,在X Window系统中的应用十分广泛.她最初由位于法国Sophia Antipolis的Bull研究中心的Daniel Dardail ...

  6. 我所了解的WEB开发(4) - 神奇的URL

    如果说WEB开发中什么最为神奇的话,我觉得这当属URL了.         URL的启蒙应该是当年的互联网冲浪(surf the Internet),记得当年的电视上宣传互联网冲浪就好似今天对大数据的 ...

  7. js得到屏幕宽高、页面宽高 (window.screen.availHeight)等--笔记

    window.screen.availWidth 返回当前屏幕宽度(空白空间) window.screen.availHeight 返回当前屏幕高度(空白空间) window.screen.width ...

  8. js阻塞

    阻塞指的是暂停一个线程的执行以等待某个条件发生(如某资源就绪),JS单线程避免阻塞方法: 1.sleep()方法:sleep()允许指定以毫秒为单位的一段时间作为参数,使得线程在指定的时间内进入阻塞状 ...

  9. 原创:SAP LVC ALV编辑小技巧

    前两天有个打印需求变更,需要在ALV显示列表中添加两个字段,可编辑,而我自己用的是函数:REUSE_ALV_GRID_DISPLAY_LVC 因为之前做可编辑基本都是固定套路,定义类,画屏幕.... ...

  10. Android 在内部存储读写文件

    文件读写操作* Ram内存:运行内存,相当于电脑的内存* Rom内存:内部存储空间,相当于电脑的硬盘* sd卡:外部存储空间,相当于电脑的移动硬盘在内部存储空间中读写文件>小案例:用户输入账号密 ...