繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 学习ExtJS Panel常用方法
- Javascript
- 网页常用小技巧—javascript篇
- 中文的版用javascript实现超酷的“网页时钟”
- 60秒倒计时的一个小javascript
- 一步一步教你用JS和INF编辑注册表
- 仿Office 2003的工具条
- javascript加密解密终级指南
- 在网页里做类似window右键的弹出式菜单
- 几行代码轻松搞定网页的简繁转换
- 利用Yahoo! Search API开发自已的搜索引擎-javascript版
- 服务器控件中js脚本注册方法
- 一行代码生成Google SiteMap
- 用javascript连接access数据库的方法
- javascript+xml实现二级下拉菜单，不会被任何标签或元素遮住
- javascript的IE和Firefox兼容性汇编
- TreeView节点互斥,autopostback＝false的方法
- 一个解析URL及图片地址的JS函数
- javascript模拟ACDSEE简单功能
- 实现textarea内字符串选择查询替换功能
- javascript Web页面内容导出到Word、Excel
- 在客户端设置cooke和获取cooke的函数
Javascript 中的 学习ExtJS Panel常用方法
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-10 浏览: 369 ::
收藏到网摘: n/a
ExtJS Panel常用方法，需要的朋友可以参考下。 一、属性
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 config, Function handler, Object 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());
}) ;
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:"取消"}]
})
})
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:"取消"}]
})
})
评论 (0) All
