学习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 相关文章推荐
json 定义
Jun 10 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
Aug 23 Javascript
Javascript自定义排序 node运行 实例
Jun 05 Javascript
JavaScript中判断两个字符串是否相等的方法
Jul 07 Javascript
微信小程序 开发工具快捷键整理
Oct 31 Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 Javascript
vue axios 二次封装的示例代码
Dec 08 Javascript
layui radio性别单选框赋值方法
Aug 15 Javascript
javascript验证form表单数据的案例详解
Mar 25 Javascript
js实现web调用摄像头 js截取视频画面
Apr 21 Javascript
Vue使用zTree插件封装树组件操作示例
Apr 25 Javascript
谈谈IntersectionObserver懒加载的具体使用
Oct 15 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和editplus正则表达式去除空白行
2015/04/17 PHP
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
web 页面分页打印的实现
2009/06/22 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
2011/10/13 Javascript
关于跨站脚本攻击问题
2011/12/22 Javascript
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
浅谈jQuery before和insertBefore的区别
2016/12/04 Javascript
vue通过watch对input做字数限定的方法
2017/07/13 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
Python cookbook(数据结构与算法)将多个映射合并为单个映射的方法
2018/04/19 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
使用Python自动生成HTML的方法示例
2019/08/06 Python
Python的Lambda函数用法详解
2019/09/03 Python
Python批量启动多线程代码实例
2020/02/18 Python
HTML5实现签到 功能
2018/10/09 HTML / CSS
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
自我评价范文点评
2013/12/04 职场文书
客服部班长工作责任制
2014/02/25 职场文书
大宝sod蜜广告词
2014/03/21 职场文书
政府门卫岗位职责
2014/04/29 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
经理岗位职责范本
2015/04/15 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android
【海涛教你打DOTA】死灵飞龙第一视角解说
2022/04/01 DOTA