学习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 相关文章推荐
Js之软键盘实现(js源码)
Jan 30 Javascript
jQuery 获取对象 定位子对象
May 31 Javascript
jquery 插件学习(六)
Aug 06 Javascript
javascript实现数组去重的多种方法
Mar 14 Javascript
动态加载js、css的实例代码
May 26 Javascript
Node.js实现文件上传的示例
Jun 28 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
Jul 04 Javascript
vue 2.0 购物车小球抛物线的示例代码
Feb 01 Javascript
浅谈React组件之性能优化
Mar 02 Javascript
vue文件运行的方法教学
Feb 12 Javascript
js计时事件实现圆形时钟
Mar 25 Javascript
vue移动端模态框(可传参)的实现
Nov 20 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中判断文件存在是用file_exists还是is_file的整理
2012/09/12 PHP
CI框架Session.php源码分析
2014/11/03 PHP
php 利用socket发送HTTP请求(GET,POST)
2015/08/24 PHP
PHP文件上传操作实例详解
2016/09/27 PHP
jQuery 添加/移除CSS类实现代码
2010/02/11 Javascript
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
js中精确计算加法和减法示例
2014/03/28 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
vue组件与复用详解
2018/04/08 Javascript
element UI upload组件上传附件格式限制方法
2018/09/04 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
python学习 流程控制语句详解
2016/06/01 Python
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
python识别验证码图片实例详解
2020/02/17 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
用python实现名片管理系统
2020/06/18 Python
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
美国购买韩国护肤和美容产品网站:Althea Korea
2020/11/16 全球购物
职工趣味运动会方案
2014/02/10 职场文书
历史专业学生的自我评价
2014/02/28 职场文书
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
向国旗敬礼活动总结范文2014
2014/09/27 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书
2015年小学生暑假总结
2015/07/13 职场文书
2019财务管理制度最新范本!
2019/07/09 职场文书
导游词之无锡梅园
2019/11/28 职场文书
html+css实现文字折叠特效实例
2021/06/02 HTML / CSS
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android
Python 居然可以在 Excel 中画画你知道吗
2022/02/15 Python