学习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 Ajax使用 全解析
Dec 15 Javascript
javascript-简单的计算器实现步骤分解(附图)
May 30 Javascript
jQuery动态添加删除select项(实现代码)
Sep 03 Javascript
减少访问DOM的次数提升javascript性能
Feb 24 Javascript
详解jquery中$.ajax方法提交表单
Nov 03 Javascript
Javascript中的方法和匿名方法实例详解
Jun 13 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
Aug 25 Javascript
AngularJS中如何使用echart插件示例详解
Oct 26 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
Feb 22 Javascript
vue实现微信二次分享以及自定义分享的示例
Mar 20 Javascript
js函数柯里化的方法和作用实例分析
Apr 11 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
获取远程文件大小的php函数
2010/01/11 PHP
php中关于普通表单多文件上传的处理方法
2011/03/25 PHP
PHP使用mysql_fetch_object从查询结果中获取对象集的方法
2015/03/18 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
实现PHP中session存储及删除变量
2018/10/15 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
任意位置显示html菜单
2007/02/01 Javascript
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
2013/11/15 Javascript
AngularJS使用指令增强标准表单元素功能
2016/07/01 Javascript
AngularJS指令中的绑定策略实例分析
2016/12/14 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
2017/11/03 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
2018/08/28 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
Python使用新浪微博API发送微博的例子
2014/04/10 Python
在Python中使用zlib模块进行数据压缩的教程
2015/06/26 Python
Python 的内置字符串方法小结
2016/03/15 Python
Python中多线程的创建及基本调用方法
2016/07/08 Python
Python实现Selenium自动化Page模式
2019/07/14 Python
python3的print()函数的用法图文讲解
2019/07/16 Python
python 并发编程 阻塞IO模型原理解析
2019/08/20 Python
解决django中form表单设置action后无法回到原页面的问题
2020/03/13 Python
美国购车网站:TrueCar
2016/10/19 全球购物
南京某公司笔试题
2013/01/27 面试题
幼儿园毕业寄语
2014/04/03 职场文书
师德模范事迹材料
2014/06/03 职场文书
债务授权委托书范本
2014/10/17 职场文书
2014年社区工作总结
2014/11/18 职场文书
生日赠语
2015/06/23 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
从贫穷到富有,是知识技能和学习力的差别
2019/08/20 职场文书
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android