学习ExtJS Panel常用方法

所属分类: 网络编程 / JavaScript 阅读数: 1778
收藏 0 赞 0 分享
 一、属性
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 configFunction handlerObject 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:"取消"}]

             })
    })
更多精彩内容其他人还在看

深入解析Vue 组件命名那些事

本篇文章主要介绍了深入解析Vue 组件命名那些事,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Vue学习笔记进阶篇之vue-cli安装及介绍

这篇文章主要介绍了Vue学习笔记进阶篇之vue-cli安装及介绍,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

jquery版轮播图效果和extend扩展

这篇文章主要为大家详细介绍了jquery版轮播图效果,以及extend扩展的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

jQuery Validate格式验证功能实例代码(包括重名验证)

本文通过实例代码给大家介绍了jQuery Validate格式验证功能,代码中包括重名验证的方法,需要的的朋友参考下吧
收藏 0 赞 0 分享

Angular.js中angular-ui-router的简单实践

本篇文章主要介绍了Angular.js中angular-ui-router的简单实践,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

JavaScript实现二维坐标点排序效果

这篇文章主要为大家详细介绍了JavaScript实现二维坐标点排序效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

深入理解vue2.0路由如何配置问题

本篇文章主要介绍了vue2.0路由配置问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

基于bootstrap实现多个下拉框同时搜索功能

这篇文章主要为大家详细介绍了基于bootstrap实现多个下拉框同时搜索功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

JavaScript 值类型和引用类型的初次研究(推荐)

这篇文章主要介绍了JavaScript 值类型和引用类型的初次研究,需要的朋友可以参考下
收藏 0 赞 0 分享

利用jQuery异步上传文件的插件用法详解

这篇文章主要介绍了利用jQuery异步上传文件的插件用法详解,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多