学习ExtJS Panel常用方法


Posted in Javascript onOctober 07, 2009

 一、属性

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:"取消"}]

             })
    })

Javascript 相关文章推荐
基于node.js的快速开发透明代理
Dec 25 Javascript
JS简单实现文件上传实例代码(无需插件)
Nov 15 Javascript
javascript中的throttle和debounce浅析
Jun 06 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
Javascript 读取操作Sql中的Xml字段
Oct 09 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
Sep 17 Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 Javascript
Angular 项目实现国际化的方法
Jan 08 Javascript
解决vue项目打包后提示图片文件路径错误的问题
Jul 04 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
vue.js实现图书管理功能
Sep 24 Javascript
学习ExtJS TextField常用方法
Oct 07 #Javascript
学习ExtJS(二) Button常用方法
Oct 07 #Javascript
学习ExtJS(一) 之基础前提
Oct 07 #Javascript
JavaScript 浮点数运算 精度问题
Oct 06 #Javascript
面向对象的javascript(笔记)
Oct 06 #Javascript
js removeChild 障眼法 可能出现的错误
Oct 06 #Javascript
学习JS面向对象成果 借国庆发布个最新作品与大家交流
Oct 03 #Javascript
You might like
上传多个文件的PHP脚本
2006/11/26 PHP
php 文章调用类代码
2011/08/11 PHP
用穿越火线快速入门php面向对象
2012/02/22 PHP
处理单名多值表单的详解
2013/06/08 PHP
ThinkPHP使用心得分享-上传类UploadFile的使用
2014/05/15 PHP
smarty简单入门实例
2014/11/28 PHP
php使用Cookie控制访问授权的方法
2015/01/21 PHP
PHP抽象类与接口的区别实例详解
2019/05/09 PHP
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
Javascript图像处理思路及实现代码
2012/12/25 Javascript
完美解决AJAX跨域问题
2013/11/01 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
浅谈javascript的调试
2015/01/28 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
常用javascript表单验证汇总
2020/07/20 Javascript
基于Bootstrap+jQuery.validate实现表单验证
2016/05/30 Javascript
jQuery图片轮播功能实例代码
2017/01/29 Javascript
bootstrap suggest搜索建议插件使用详解
2017/03/25 Javascript
Angular 1.x个人使用的经验小结
2017/07/19 Javascript
layer弹出层父子页面事件相互调用方法
2018/08/17 Javascript
js模拟F11页面全屏显示
2019/09/17 Javascript
KnockoutJS数组比较算法实例详解
2019/11/25 Javascript
vue实现简单计算商品价格
2020/09/14 Javascript
vue解决跨域问题(推荐)
2020/11/10 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
python生成随机mac地址的方法
2015/03/16 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
python tkinter canvas 显示图片的示例
2019/06/13 Python
django框架使用orm实现批量更新数据的方法
2019/06/21 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
Python发起请求提示UnicodeEncodeError错误代码解决方法
2020/04/21 Python
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
环保宣传标语
2014/06/12 职场文书
导游词之丹东鸭绿江
2019/10/24 职场文书
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
2021/04/24 Python