学习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 相关文章推荐
Javascript 获取滚动条位置等信息的函数
Sep 08 Javascript
javascript showModalDialog 内跳转页面的问题
Nov 25 Javascript
js replace正则表达式应用案例讲解
Jan 17 Javascript
初识Node.js
Sep 03 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
Aug 22 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 Javascript
懒加载实现的分页&&网站footer自适应
Dec 21 Javascript
基于jQuery实现火焰灯效果导航菜单
Jan 04 Javascript
Vue DevTools调试工具的使用
Dec 05 Javascript
基于elementUI实现图片预览组件的示例代码
Mar 31 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
Apr 29 Javascript
antd日期选择器禁止选择当天之前的时间操作
Oct 29 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
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
将OICQ数据转成MYSQL数据
2006/10/09 PHP
PHPUnit PHP测试框架安装方法
2011/03/23 PHP
php数组函数序列之array_unshift() 在数组开头插入一个或多个元素
2011/11/07 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
javascript String 的扩展方法集合
2008/06/01 Javascript
javascript之Partial Application学习
2013/01/10 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
2015/11/20 Javascript
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
详解Vue 的异常处理机制
2020/11/30 Vue.js
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
深入理解python try异常处理机制
2016/06/01 Python
Python中死锁的形成示例及死锁情况的防止
2016/06/14 Python
Python实现Sqlite将字段当做索引进行查询的方法
2016/07/21 Python
全面分析Python的优点和缺点
2018/02/07 Python
python sys,os,time模块的使用(包括时间格式的各种转换)
2018/04/27 Python
pycharm 解除默认unittest模式的方法
2018/11/30 Python
python多线程调用exit无法退出的解决方法
2019/02/18 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
python实现登录与注册系统
2020/11/30 Python
详解HTML5中的拖放事件(Drag 和 drop)
2016/11/14 HTML / CSS
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
劳资员岗位职责
2013/11/11 职场文书
受欢迎的大学生自我评价
2013/12/05 职场文书
南京青奥会口号
2014/06/12 职场文书
标准单位租车协议书
2014/09/23 职场文书
小学重阳节活动总结
2015/03/24 职场文书
小学运动会入场口号
2015/12/24 职场文书
python关于集合的知识案例详解
2021/05/30 Python
Python scrapy爬取起点中文网小说榜单
2021/06/13 Python
《战锤40K:暗潮》跳票至9月 公布新宣传片
2022/04/03 其他游戏
flex布局中使用flex-wrap实现换行的项目实践
2022/06/21 HTML / CSS