Extjs学习笔记----------Panel的使用

36 阅读 0 评论 24 点赞

我是靠谱客的博主拼搏西装，最近开发中收集的这篇文章主要介绍Extjs学习笔记----------Panel的使用，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.之前已经学习过了关于ExtJs的一些基本知识，通过导入Extjs所必须的几个包能够进行写出几个基本的小例子；

下面要学习的是Extjs的另一个基本组件---->Pannel面板。

Pannel面板在java的Swing中是非常常用的一个基本组件，同样，Extjs是受到了Java Swing的启迪，在浏览器中同样可以使用Pannel

2.下面开始Pannel的学习。

首先要在HTML的<body></body>中定义一个div：<div id="myPannel"></div>随后将Pannel定义在这个div中。

首先先写一个简单的Pannel实例：

<script type="text/javascript">

Ext.onReady(function myPannel{

new Ext.Panel({

title:"这是一个面板",

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

renderTo:"myPannel", //指定渲染的是id为myPannel的div

width:400,

html:"<h1>Pannel使用</h1>"

});

});

</script>

这样就会创建一个简单的面板，并且能够实现上拉下拉的功能。

3.下面是几个基本的工具栏的定义：

bbar：显示在底部的工具栏

buttons：显示在底部的按钮集合

tbar：顶部工具栏

tools：头部工具栏

4.tools中提供了很多图标。功能十分强大。

tools:[{id:"save"},{id:"help"},{id:"close"},{id:"toggle"},{id:"minimize"},{id:"pin"},{id:"right"},{id:"up"},{id:"refresh"},

{id:"plus"},{id:"search"},{id:"maximize"},{id:"gear"},{id:"unpin"},{id:"left"},{id:"down"},{id:"minus"}]

5.下面的是一个综合实例：

<script type="text/javascript">

Ext.onReady(function Pannel(){

new Ext.Panel({

title:"这是一个面板",

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

renderTo:"basic", //指定渲染的是id为basic的div

width:400,

html:"<h1>Pannel使用</h1>",

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

tools:[{id:"save"},{id:"help"},{id:"close"}],

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

});

new Ext.dd.DDProxy("basic");//id为basic的div可以进行拖动

});

function worning(){

Ext.MessageBox.alert("提示","你确定保存？");

}

function worning2(){

Ext.MessageBox.alert("提示","你确定要取消？");

}

</script>

6.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

工具按钮配置对象的数组，这些按钮会被添加到面板头部功能区

配置项 width

参数类型 Number

面板宽度，默认为auto