学习ExtJS Panel常用方法

更新时间：2009年10月07日 22:43:50 作者：

ExtJS Panel常用方法，需要的朋友可以参考下。

一、属性

frame：布尔类型true 或 false ，为true时表示边框为圆角且具有背景色，取false则反之。

xtype：在EXTJS的可视化组件部署中的一种机制，即通过指定xtype的值，来告诉容量如何初始化所包含的级件，如xtype:"textfiled",表示使用Ext.form.TextFile来进行初始化当前组件。

xtype      Class
-------------  ------------------
box       Ext.BoxComponent
button      Ext.Button
buttongroup   Ext.ButtonGroup
colorpalette   Ext.ColorPalette
component    Ext.Component
container    Ext.Container
cycle      Ext.CycleButton
dataview     Ext.DataView
datepicker    Ext.DatePicker
editor      Ext.Editor
editorgrid    Ext.grid.EditorGridPanel
flash      Ext.FlashComponent
grid       Ext.grid.GridPanel
listview     Ext.ListView
panel      Ext.Panel
progress     Ext.ProgressBar
propertygrid   Ext.grid.PropertyGrid
slider      Ext.Slider
spacer      Ext.Spacer
splitbutton   Ext.SplitButton
tabpanel     Ext.TabPanel
treepanel    Ext.tree.TreePanel
viewport     Ext.ViewPort
window      Ext.Window
Toolbar components
---------------------------------------
paging      Ext.PagingToolbar
toolbar     Ext.Toolbar
tbbutton     Ext.Toolbar.Button    (deprecated; use button)
tbfill      Ext.Toolbar.Fill
tbitem      Ext.Toolbar.Item
tbseparator   Ext.Toolbar.Separator
tbspacer     Ext.Toolbar.Spacer
tbsplit     Ext.Toolbar.SplitButton  (deprecated; use splitbutton)
tbtext      Ext.Toolbar.TextItem
Menu components
---------------------------------------
menu       Ext.menu.Menu
colormenu    Ext.menu.ColorMenu
datemenu     Ext.menu.DateMenu
menubaseitem   Ext.menu.BaseItem
menucheckitem  Ext.menu.CheckItem
menuitem     Ext.menu.Item
menuseparator  Ext.menu.Separator
menutextitem   Ext.menu.TextItem
Form components
---------------------------------------
form       Ext.FormPanel
checkbox     Ext.form.Checkbox
checkboxgroup  Ext.form.CheckboxGroup
combo      Ext.form.ComboBox
datefield    Ext.form.DateField
displayfield   Ext.form.DisplayField
field      Ext.form.Field
fieldset     Ext.form.FieldSet
hidden      Ext.form.Hidden
htmleditor    Ext.form.HtmlEditor
label      Ext.form.Label
numberfield   Ext.form.NumberField
radio      Ext.form.Radio
radiogroup    Ext.form.RadioGroup
textarea     Ext.form.TextArea
textfield    Ext.form.TextField
timefield    Ext.form.TimeField
trigger     Ext.form.TriggerField
Chart components
---------------------------------------
chart      Ext.chart.Chart
barchart     Ext.chart.BarChart
cartesianchart  Ext.chart.CartesianChart
columnchart   Ext.chart.ColumnChart
linechart    Ext.chart.LineChart
piechart     Ext.chart.PieChart
Store xtypes
---------------------------------------
arraystore    Ext.data.ArrayStore
directstore   Ext.data.DirectStore
groupingstore  Ext.data.GroupingStore
jsonstore    Ext.data.JsonStore
simplestore   Ext.data.SimpleStore   (deprecated; use arraystore)
store      Ext.data.Store
xmlstore     Ext.data.XmlStore

defaults：xtypes的默认值，如：

 defaults:{xtype:"textfield",width:180},

 items:[{fieldLabel:"帐号"},{fieldLabel:"密码"}],

二、方法
add(Ext.Component/Object_component)：添加一个组件到面板中，运行时方法。

addButton( String/Object config, Function handler, Object scope ) :添加一个按钮到面板中，设计时方法（对象在未构造之前调用）。

_panel.addButton({text:"确定"}); //form按默认宽度自适应创建

_panel.addButton(new Ext.Button({text:"取消",minWidth:200}));

三、事件

render：当前对象被构造后触发（设计时事件）。

renderto（构造参数）：将当前对象所生成的HTML对象存放在指定的对象中（运时时事件）。

两者不能同进使用，否则render不起作用。

三、构造参数

items：指定包含在面板中组件的配置数组如textField。

buttons：指定包含面板中按钮的配置数组。

四、应用举例

  Ext.onReady(function(){
        var _panel = new Ext.Panel({
                title:"人员信息",
                frame:true,
                width:400,
                height:300
            })
            _panel.addButton({text:"确定"});
            _panel.addButton(new Ext.Button({text:"取消",minWidth:200}));
            _panel.render(Ext.getBody());
    }) ;

Ext.onReady(function(){
       var _panel=new Ext.Panel({
             title:"登陆",
             renderTo:Ext.getBody(),
             frame:true,
             width:560,
             height:130,
             layout:"form",
             lableWidth:45,
             defaults:{xtype:"textfield",width:180},
             items:[{fieldLabel:"帐号"},{fieldLabel:"密码"}],
             buttons:[{text:"确定"},{text:"取消"}]

             })
    })

您可能感兴趣的文章:

ExtJS
Panel

ExtJS 工具栏分页事件参数
ExtJS 工具栏分页事件参数使用说明。
2010-03-03
自定义ExtJS控件之下拉树和下拉表格附源码
在Ext官方的例子中只有下拉列表控件，但是在实际业务中只有下拉列表无法满足需求的，对于刚使用Ext的人来说，自定义一个控件好难，下面是具体的实现
2013-10-10
Extjs Gird 支持中文拼音排序实现代码
本文为大家详细介绍下Extjs Gird 支持中文拼音排序以及修复汉字排序异常的Bug、localeCompare比较汉字字符串，Firefox与IE均支持，感兴趣的朋友可以参考下
2013-04-04
extjs 学习笔记（三）最基本的grid
extjs的一个亮点就是提供了丰富的UI，使得没有艺术细胞的程序员也能做出绚丽的界面。把所有的UI集中到一起，有好处也有坏处，好处是有了统一的风格和接口，坏处是js文件过于庞大，使用extjs的最小集合也超过了500k，所以在有些项目中并不适用。
2009-10-10
ExtJS 2.0 GridPanel基本表格简明教程
ExtJS中的表格功能非常强大，包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。
2010-05-05
extjs 学习笔记（二） Ext.Element类
上个系列中，我们用到了Ext.fly来获得一个Element对象，其实Ext.fly是Ext.Element.fly的简写形式。类似的方法还有一个Ext.get，是Ext.Element.get的简写。这两个方法都可以用使用Dom元素或者Dom元素的id作为参数来获得一个Element对象。
2009-10-10
使用ExtJS技术实现的拖动树结点
在本文将介绍TreePanel组件非常有意思的一个功能：结点拖放。要使TreePanel组件的结点可以拖放非常简单，只需要将TreePanel类的enableDD选项参数设为true即可。当然，要想实现更复杂的功能，还需要配合其他的参数和事件。
2010-08-08
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
在解决这个有很多优化方法，今天来说其中一种，那就是在Ant脚本打包的时候，把js中空格、注释去掉、以及合并，合并今天不说了，还未实现这个，在研究中
2013-04-04
ExtJS4 动态生成的grid导出为excel示例
解决了一个表格不能重复下载的小BUG，一个使用grid初始化发生的BUG,需要的朋友可以参考下
2014-05-05
Extjs学习笔记之九数据模型(上）
本文开始进入Extjs最核心最优秀的部分。
2010-01-01