<HTML>

<HEAD>

<TITLE>面板</TITLE>

<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />

<script type="text/javascript" src="Ext/ext-base.js"></script>

<script type="text/javascript" src="Ext/ext-all.js"></script>

<script type="text/javascript" src="Ext/ext-lang-zh_CN.js" charset="utf-8"></script>

</HEAD>

<script type="text/javascript">

    function PannelBasic(){

        var btn = new Ext.Button({text:"按钮1"});

        var p = new Ext.Panel({

            title: '面板标题',

            collapsible:true,//是否允许收缩

            renderTo: 'basic',//指定渲染对象的ID

            width:400,

            // html: '<b>内容</b><br>Hello 曼迪!', //html中的内容会显示在panel里面

            //autoload:"news.html",//panel加载url

            items:[btn,{xtype:"button",text:"按钮2"},{title:"面板3",height:50,border:false}],

            //    按照布局方位，按钮在面板中出现的地方有这么几种：

            //    bbar：显示在底部的工具栏

            //    buttons：显示在底部的按钮集合,如要改变其对齐方式用buttonAlign

            //    tbar：顶部工具栏

            //    bbar：底部工具栏

            //    tools：头部工具栏

            //    如果要显示一个Ext的按钮，可以使用下面代码实现：

            //    new Ext.Button({ text: '新增' })//表示新建一个按钮对象

            //  '-' 是按钮之间的分隔线

            //    由于Ext提供的按钮类型比较丰富，按钮还可以简单的描述为“{ text: '取消'}”

            tbar: [new Ext.Button({ text: '新增' }),'-', new Ext.Button({ text: '保存' }), new Ext.Button({ text: '修改' }) ] ,

            bbar: [{text: '添加内容',handler:function(){

                    p.add({title:"添加面板"});

                    var p2 = p.getComponent(2);

                    alert(p2.title);

                    p.remove(p2);

                    p.doLayout();//重新布局，否则不会显示添加的面板

                    //p.load("news.html");

                    p.body.update("<h1>新的内容</h1>"+new Date());

                }},{text: '上一页'},{text: '下一页'}],

            tools: [{id:'save'},{id:'help'},{id:'close'},{id:'print',handler:function(){window.print();}}],

            buttonAlign:"center",

            buttons: [{ text: '保存', handler: worning }, { text: '取消'}]

            });

    }

    function worning() {

        Ext.MessageBox.alert('提示','你点击了保存按钮！');

    }

    Ext.onReady(PannelBasic);//开始执行

</script>

<BODY>

    <!--面板作为一个很基础的容器控件，使用方式比较特殊，需要指定一个被渲染对象，一般是用一个div实现，意思是需要在页面预先定义好一个div，然后在Ext中用id找到这个div并把相应的效果渲染在里面-->

    <div id="basic"></div>

</BODY>

</HTML>

当然除了常用的这几个属性外，还有一大堆属性，这里以表格的形式列举出来，供大家查阅：

Ext.Panel主要配置项目表表

配置项

参数类型

说明

  

animCollapse

Boolean

设置面板折叠或展开时是否显示动画效果，如果 Ext.Fx 类可用则默认
为true，否则为fasle。

  

applyTo

Mixed

一个页面上已经存在的元素或元素id，组件将会追加到该元素的后面，而不是将其作为新组件的容器。

  
 

autoDestroy

Boolean

设置是否自动销毁从容器中移除的组件，默认为true，否则要手工销毁

  

autoHeight

Boolean

是否使用自动高度，true则使用自动高度，false则使用固定高度，默认为false

  

autoLoad

Object/String/ 
Function

设置面板自动加载的url地址。如果不为null则面板会尝试加载该url
并立刻在面板中进行渲染。这个连接将变成面板的body元素，所以可以根据需要在任何时候刷新面板内容

  

autoScroll

Boolean

设置是否自动显示滚动条，true则设置面板的body元素样式为overflow:'auto'，内容溢出时会自动显示滚动条，false则不显示滚动条对溢出的内容进行截断。默认为false

  

autoShow

Boolean

设置是否移除组件的隐藏样式（例如'x-hidden' or 'x-hide-display'），如果为true则在渲染时移除它们，默认为false

  

autoWidth

Boolean

是否使用自动宽度，true为自动宽度，false为固定宽度，默认为false

  

baseCls

String

应用于面板元素的基本样式类，默认为'x-panel'

  

bbar

Object/Array

设置面板的底端工具栏，可以是Ext.Toolbar对象、工具栏配置对象或button配置对象的数组。

  

bodyBorder

Boolean

设置是否显示面板体（body）的内部边框，true则显示，false则隐藏，默认为true。并且该项只在border = true时生效

  

bodyStyle

String/Object/ 
Function

应用于面板体（body）的自定义样式。默认为null

  

border

Boolean

这是是否显示面板体（body）的边框，true则显示，false则隐藏，默认为true。默认边框宽度为2px

  

buttonAlign

String

设置面板底部（footer）中按钮的对齐方式，有效值包括：'right', 'left' 和'center'，默认为'right'

  

buttons

Array

加入到面板底部（footer）中按钮配置对象的数组

  

collapseFirst

Boolean

设置渲染展开或收缩按钮的顺序。true则在其它按钮渲染前先渲染展开或收缩按钮，false则最后渲染，默认为true。该配置项决定了展开或收缩按钮的位置。

  

collapsed

Boolean

设置面板在第一次渲染时是否处于收缩状态，true则收缩，false则展开，默认为false

  

collapsible

Boolean

设置是否允许面板进行展开和收缩，true则允许进行展开和收缩，并在面板头部显示伸缩按钮。默认为false

  

contentEl

String

设置面板的内容元素，可以是页面元素的id或已存在的HTML节点

  

defaultType

String

面板中元素的默认类型，默认为'panel'

  

defaults

Object

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

  

floating

Boolean

设置面板是否可以浮动，true则允许，默认为false。注意，设置floating为true会导致面板显示在负偏移的位置，从而面板不可见，因为浮动状态下面板是采用绝对定位的，位置必须在渲染之后进行明确的设置（例如myPanel.setPosition(100,100);）.，浮动面板也需要有固定的宽度

  

footer

Boolean

设置是否创建面板底部（footer）元素，true则创建，false则跳过footer元素的创建，如果一个或多个按钮被加入到footer中，则footer的设置会被忽略，而直接创建footer元素

  

frame

Boolean

设置是否渲染面板，true则渲染面板为自定义的圆角边框，false则渲染为1px的直角边框

  

header

Boolean

设置是否创建面板头部（header）元素，true则创建，false则跳过header元素的创建，如果提供了title但没有设置header则header会被自动创建。如果提供了title但明确设置header为false则header不会被创建

  

headerAsText

Boolean

设置是否在面板的header中显示title，true则显示，默认为true

  

height

Number

面板高度，默认为auto

  

hideBorders

Boolean

true则隐藏面板容器中所有组件的边框，false则根据组件的具体配置进行显示

  

hideCollapseTool

Boolean

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

  

html

String/Object

设置面板（body）元素的内容为HTML片段或DomHelper生成的内容。

  

items

Mixed

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

  

layout

String

面板的布局类型，默认Ext.layout.ContainerLayout布局，被选布局的配置项通过layoutConfig进行设置

  

layoutConfig

Object

这个配置对象包含被选布局的配置项，针对每种布局的配置项需要查看相应的布局类说明

  

maskDisabled

Boolean

设置当面板不能使用时是否遮罩面板，true则遮罩，默认为true

  

shadow

Boolean/String

设置是否在面板后面显示阴影，true则显示，或通过字符串指定阴影的显示模式，有效值包括：sides、frame、drop，默认为'sides'。该项只在floating 为 true时生效

  

shadowOffset

Number

设置面板阴影的偏移量，以像素为单位，默认为4。该项只在floating 为true时生效

  

tbar

Object/Array

设置面板的顶端工具栏，可以是Ext.Toolbar对象、工具栏配置对象或button配置对象的数组。注意，面板渲染后只能通过getTopToolbar方法访问该工具栏

  

title

String

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

  

titleCollapse

Boolean

设置是否允许通过点击面板头部进行展开和收缩操作，true则允许，默认为false

  

tools

Array

工具按钮配置对象的数组，这些按钮会被添加到面板头部功能区，在表5-2中会有详细的说明

  

width

Number

面板宽度，默认为auto

  
         

Tools 配置项主要用来设置面板头部功能区所要显示的各类按钮，每个按钮的配置对象可能包含的配置项在表5-2中说明，tools配置项id与按钮图标对应关系如表5-3所示。

tools配置项明细表

配置项

参数类型

说明

id

String

必选项，可能值及效果见表5.3

handler

Function

点击按钮后触发的处理函数，参数包括： event : Ext.EventObject、toolEl : Ext.Element、Panel : Ext.Panel

scope

Object

处理函数的执行范围

qtip

String/Object

为按钮指定提示信息，可以是字符串或配置对象

hidden

Boolean

设置初次渲染时，是否隐藏

on

Object

为按钮配置事件监听器。

表5-3  tools配置项id与按钮图标对应关系表

当然，Ext还有一个最显著的特点就是可拖拽，那么实现一个控件可拖拽到底难不难？只需要配置draggable:true即可，大家可以试下。不过我相信20秒过后一大堆转头就飞过来了，原因是，拖是可以拖了，但是，鼠标一松，就又回到原地了，只需要在主函数体中加上一句：

new Ext.dd.DDProxy('basic');//加上这一句就可以随意拖动

Ext面板的更多相关文章

  1. Ext 面板（Panel）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Ext入门学习系列（四）面板控件

    第四章 使用面板 上节学习了Ext复杂对话框,更进一步了解了Ext的运行机制.本章重点来了解Ext所有控件的基础——面板控件. 一.Ext的面板是什么? 同样先来看看几个效果: 基本面板,点击右上角小 ...

  3. Ext入门学习系列（五）表格控件（1）

    上节学习了Ext面板控件,为后面的各个控件学习奠定基础,在此基础上本章将学习网络开发最期待的功能——表格控件. 我们都知道网络编程语言中,除了.net其他的基本没有提供网格控件,而最近的asp.net ...

  4. [转载]ExtJs4 笔记（9） Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件

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

  5. ExtJs4 笔记（9） Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件

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

  6. Ext.js入门：面板（五）

    一:Ext.Panel类简介 二:Ext.Panel类常用属性方法与事件 三:Ext.Panel实例运用 1.Ext.Panel类简介   类 Ext.Panel   包: Ext   定义的文件: ...

  7. Ext扩展的QQ表情选择面板

    Ext扩展的QQ表情选择面板 define(function () { EmoteChooser = function(cfg){ this.width=340; this.height=112; t ...

  8. Ext查询面板收缩时，文本内容垂直显示

    css添加如下样式/***查询面板收缩时,文本内容垂直显示**/.x-layout-collapsedText{ width:16px; font-size:11px; word-wrap:break ...

  9. 36.面板Ext.Panel使用

    转自:https://www.cnblogs.com/linjiqin/archive/2011/06/22/2086620.html 面板Ext.Panel使用 概要 1.Ext.Panel概述 2 ...

随机推荐

  1. LightOJ 1323 Billiard Balls（找规律（蚂蚁爬木棍））

    题目链接:https://vjudge.net/contest/28079#problem/M 题目大意: 一个边界长为L宽为W的平面同时发射n个台球,运动K秒,台球碰到桌面及两(多)个台球相撞情况如 ...

  2. [VBA]批量替换PPT里的字体颜色

    不知道为什么计组老师的大量课件字体是伤害视力的亮蓝色……看久了眼睛疼,想把颜色替换成保护视力一点的灰色,但是找了N久也没找到在图形界面上直接操作的方法,于是在MSDN上晃了晃,Google了一下,写了 ...

  3. mouseover与mouseenter,mouseout与mouseleave的区别

    mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件.只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseout ...

  4. Codeforces Round #492 (Div. 2) [Thanks, uDebug!]

    这次的题好奇怪哦... C - Tesla 思路:先把跟停车位相邻的车停进去,然后开始转圈... #include<bits/stdc++.h> #define LL long long ...

  5. cpp笔记（长期更新）

    c++0x:c++11标准成为正式标准之前的草案临时名字 多态:接口的多种不同的实现方式即为多态,即子类类型的指针赋值给父类类型的指针 动态内存(堆)的管理是通过一对运算符来完成的: new:在动态内 ...

  6. 2017-2018-1 20179202《Linux内核原理与分析》第二周作业

    本周着重学习了汇编指令,并通过反汇编C程序了解栈帧变化. 实践 看了孟老师的演示视频后,我重新写了C程序,如下: int main() { int a=1,b=2; return g(a,b); } ...

  7. [Codeforces50C]Happy Farm 5 凸包

    大致题意: 平面上有n个整数点,问你最少经过多少步能够将所有点严格包围. 将点严格包围要求你走的路径完全包围给出的点且不能有点在路径上 你只能走整数点,且方向只有上下左右左上右下等8个方向,每次移动一 ...

  8. shell中的cat和文件分界符(<<EOF) (转)

    原文地址: http://blog.csdn.net/mosesmo1989/article/details/51123257 在shell中,文件分界符(通常写成EOF,你也可以写成FOE或者其他任 ...

  9. 【BZOJ 3456】 3456: 城市规划 （NTT+多项式求逆）

    3456: 城市规划 Time Limit: 40 Sec  Memory Limit: 256 MBSubmit: 658  Solved: 364 Description 刚刚解决完电力网络的问题 ...

  10. padding Oracle attack（填充Oracle攻击）

    最近学习到一种老式的漏洞,一种基于填充字节的漏洞.就想记录下来,早在2010年的blackhat大会上,就介绍了padding Oracle漏洞,并公布了ASP.NET存在该漏洞.2011年又被评选为 ...