学习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 相关文章推荐
jquery控制listbox中项的移动并排序
Nov 12 Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 Javascript
jQuery简单实现title提示效果示例
Aug 01 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
浅谈JavaScript的函数及作用域
Dec 30 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
微信小程序 登录的简单实现
Apr 19 Javascript
JS身份证信息验证正则表达式
Jun 12 Javascript
jQury Ajax使用Token验证身份实例代码
Sep 22 Javascript
angular写一个列表的选择全选交互组件的示例
Jan 22 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 Javascript
简单了解Vue computed属性及watch区别
Jul 10 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/10/09 PHP
一个高ai的分页函数和一个url函数
2006/10/09 PHP
怎样在UNIX系统下安装MySQL
2006/10/09 PHP
PHP 上传文件的方法(类)
2009/07/30 PHP
php正则过滤html标签、空格、换行符的代码(附说明)
2010/10/25 PHP
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
深入理解PHP原理之执行周期分析
2016/06/01 PHP
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
javascript 遍历验证所有文本框的值
2009/08/27 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
在Ubuntu系统上安装Node.JS的教程
2015/10/15 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
javascript 正则表达式分组、断言详解
2017/04/20 Javascript
JavaScript中 DOM操作方法小结
2017/04/25 Javascript
微信小程序中时间戳和日期的相互转换问题
2018/07/09 Javascript
angular的输入和输出的使用方法
2018/09/22 Javascript
js自定义input文件上传样式
2018/10/26 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
2019/07/10 jQuery
js+canvas实现画板功能
2020/09/13 Javascript
python抓取最新博客内容并生成Rss
2015/05/17 Python
在Django的URLconf中进行函数导入的方法
2015/07/18 Python
深入浅析Python的类
2018/06/22 Python
Python ORM框架Peewee用法详解
2020/04/29 Python
图解Python中深浅copy(通俗易懂)
2020/09/03 Python
用python 绘制茎叶图和复合饼图
2021/02/26 Python
HTML5 语音搜索(淘宝店语音搜素)
2013/01/03 HTML / CSS
选购世界上最好的美妆品:Cult Beauty
2017/11/03 全球购物
台湾良兴购物网:EcLife
2019/12/01 全球购物
CNC数控操作工岗位职责
2013/11/19 职场文书
优秀共产党员先进事迹
2014/01/27 职场文书
预防艾滋病宣传标语
2014/06/25 职场文书