Home >Web Front-end >JS Tutorial >Learn common methods of ExtJS Panel_extjs
Learn common methods of ExtJS Panel_extjs
- WBOYOriginal
- 2016-05-16 18:45:211055browse
一、属性
add(Ext.Component/Object_component)：添加一个组件到面板中，运行时方法。
三、构造参数
frame：布尔类型true 或 false ，为true时表示边框为圆角且具有背景色，取false则反之。
xtype：在EXTJS的可视化组件部署中的一种机制，即通过指定xtype的值，来告诉容量如何初始化所包含的级件，如xtype:"textfiled",表示使用Ext.form.TextFile来进行初始化当前组件。
xtype Class ------------- ------------------ box <a href="http://localhost/EXTJS/docs/output/Ext.BoxComponent.html" ext:cls="Ext.BoxComponent"><font color="#4371a6" size="2">Ext.BoxComponent</font></a> button <a href="http://localhost/EXTJS/docs/output/Ext.Button.html" ext:cls="Ext.Button"><font color="#4371a6" size="2">Ext.Button</font></a> buttongroup <a href="http://localhost/EXTJS/docs/output/Ext.ButtonGroup.html" ext:cls="Ext.ButtonGroup"><font color="#4371a6" size="2">Ext.ButtonGroup</font></a> colorpalette <a href="http://localhost/EXTJS/docs/output/Ext.ColorPalette.html" ext:cls="Ext.ColorPalette"><font color="#4371a6" size="2">Ext.ColorPalette</font></a> component <a href="http://localhost/EXTJS/docs/output/Ext.Component.html" ext:cls="Ext.Component"><font color="#4371a6" size="2">Ext.Component</font></a> container <a href="http://localhost/EXTJS/docs/output/Ext.Container.html" ext:cls="Ext.Container"><font color="#4371a6" size="2">Ext.Container</font></a> cycle <a href="http://localhost/EXTJS/docs/output/Ext.CycleButton.html" ext:cls="Ext.CycleButton"><font color="#4371a6" size="2">Ext.CycleButton</font></a> dataview <a href="http://localhost/EXTJS/docs/output/Ext.DataView.html" ext:cls="Ext.DataView"><font color="#4371a6" size="2">Ext.DataView</font></a> datepicker <a href="http://localhost/EXTJS/docs/output/Ext.DatePicker.html" ext:cls="Ext.DatePicker"><font color="#4371a6" size="2">Ext.DatePicker</font></a> editor <a href="http://localhost/EXTJS/docs/output/Ext.Editor.html" ext:cls="Ext.Editor"><font color="#4371a6" size="2">Ext.Editor</font></a> editorgrid <a href="http://localhost/EXTJS/docs/output/Ext.grid.EditorGridPanel.html" ext:cls="Ext.grid.EditorGridPanel"><font color="#4371a6" size="2">Ext.grid.EditorGridPanel</font></a> flash <a href="http://localhost/EXTJS/docs/output/Ext.FlashComponent.html" ext:cls="Ext.FlashComponent"><font color="#4371a6" size="2">Ext.FlashComponent</font></a> grid <a href="http://localhost/EXTJS/docs/output/Ext.grid.GridPanel.html" ext:cls="Ext.grid.GridPanel"><font color="#4371a6" size="2">Ext.grid.GridPanel</font></a> listview <a href="http://localhost/EXTJS/docs/output/Ext.ListView.html" ext:cls="Ext.ListView"><font color="#4371a6" size="2">Ext.ListView</font></a> panel <a href="http://localhost/EXTJS/docs/output/Ext.Panel.html" ext:cls="Ext.Panel"><font color="#4371a6" size="2">Ext.Panel</font></a> progress <a href="http://localhost/EXTJS/docs/output/Ext.ProgressBar.html" ext:cls="Ext.ProgressBar"><font color="#4371a6" size="2">Ext.ProgressBar</font></a> propertygrid <a href="http://localhost/EXTJS/docs/output/Ext.grid.PropertyGrid.html" ext:cls="Ext.grid.PropertyGrid"><font color="#4371a6" size="2">Ext.grid.PropertyGrid</font></a> slider <a href="http://localhost/EXTJS/docs/output/Ext.Slider.html" ext:cls="Ext.Slider"><font color="#4371a6" size="2">Ext.Slider</font></a> spacer <a href="http://localhost/EXTJS/docs/output/Ext.Spacer.html" ext:cls="Ext.Spacer"><font color="#4371a6" size="2">Ext.Spacer</font></a> splitbutton <a href="http://localhost/EXTJS/docs/output/Ext.SplitButton.html" ext:cls="Ext.SplitButton"><font color="#4371a6" size="2">Ext.SplitButton</font></a> tabpanel <a href="http://localhost/EXTJS/docs/output/Ext.TabPanel.html" ext:cls="Ext.TabPanel"><font color="#4371a6" size="2">Ext.TabPanel</font></a> treepanel <a href="http://localhost/EXTJS/docs/output/Ext.tree.TreePanel.html" ext:cls="Ext.tree.TreePanel"><font color="#4371a6" size="2">Ext.tree.TreePanel</font></a> viewport <a href="http://localhost/EXTJS/docs/output/Ext.ViewPort.html" ext:cls="Ext.ViewPort"><font color="#4371a6" size="2">Ext.ViewPort</font></a> window <a href="http://localhost/EXTJS/docs/output/Ext.Window.html" ext:cls="Ext.Window"><font color="#4371a6" size="2">Ext.Window</font></a> Toolbar components --------------------------------------- paging <a href="http://localhost/EXTJS/docs/output/Ext.PagingToolbar.html" ext:cls="Ext.PagingToolbar"><font color="#4371a6" size="2">Ext.PagingToolbar</font></a> toolbar <a href="http://localhost/EXTJS/docs/output/Ext.Toolbar.html" ext:cls="Ext.Toolbar"><font color="#4371a6" size="2">Ext.Toolbar</font></a> tbbutton <a href="http://localhost/EXTJS/docs/output/Ext.Toolbar.Button.html" ext:cls="Ext.Toolbar.Button"><font color="#4371a6" size="2">Ext.Toolbar.Button</font></a> (deprecated; use button) tbfill <a href="http://localhost/EXTJS/docs/output/Ext.Toolbar.Fill.html" ext:cls="Ext.Toolbar.Fill"><font color="#4371a6" size="2">Ext.Toolbar.Fill</font></a> tbitem <a href="http://localhost/EXTJS/docs/output/Ext.Toolbar.Item.html" ext:cls="Ext.Toolbar.Item"><font color="#4371a6" size="2">Ext.Toolbar.Item</font></a> tbseparator <a href="http://localhost/EXTJS/docs/output/Ext.Toolbar.Separator.html" ext:cls="Ext.Toolbar.Separator"><font color="#4371a6" size="2">Ext.Toolbar.Separator</font></a> tbspacer <a href="http://localhost/EXTJS/docs/output/Ext.Toolbar.Spacer.html" ext:cls="Ext.Toolbar.Spacer"><font color="#4371a6" size="2">Ext.Toolbar.Spacer</font></a> tbsplit <a href="http://localhost/EXTJS/docs/output/Ext.Toolbar.SplitButton.html" ext:cls="Ext.Toolbar.SplitButton"><font color="#4371a6" size="2">Ext.Toolbar.SplitButton</font></a> (deprecated; use splitbutton) tbtext <a href="http://localhost/EXTJS/docs/output/Ext.Toolbar.TextItem.html" ext:cls="Ext.Toolbar.TextItem"><font color="#4371a6" size="2">Ext.Toolbar.TextItem</font></a> Menu components --------------------------------------- menu <a href="http://localhost/EXTJS/docs/output/Ext.menu.Menu.html" ext:cls="Ext.menu.Menu"><font color="#4371a6" size="2">Ext.menu.Menu</font></a> colormenu <a href="http://localhost/EXTJS/docs/output/Ext.menu.ColorMenu.html" ext:cls="Ext.menu.ColorMenu"><font color="#4371a6" size="2">Ext.menu.ColorMenu</font></a> datemenu <a href="http://localhost/EXTJS/docs/output/Ext.menu.DateMenu.html" ext:cls="Ext.menu.DateMenu"><font color="#4371a6" size="2">Ext.menu.DateMenu</font></a> menubaseitem <a href="http://localhost/EXTJS/docs/output/Ext.menu.BaseItem.html" ext:cls="Ext.menu.BaseItem"><font color="#4371a6" size="2">Ext.menu.BaseItem</font></a> menucheckitem <a href="http://localhost/EXTJS/docs/output/Ext.menu.CheckItem.html" ext:cls="Ext.menu.CheckItem"><font color="#4371a6" size="2">Ext.menu.CheckItem</font></a> menuitem <a href="http://localhost/EXTJS/docs/output/Ext.menu.Item.html" ext:cls="Ext.menu.Item"><font color="#4371a6" size="2">Ext.menu.Item</font></a> menuseparator <a href="http://localhost/EXTJS/docs/output/Ext.menu.Separator.html" ext:cls="Ext.menu.Separator"><font color="#4371a6" size="2">Ext.menu.Separator</font></a> menutextitem <a href="http://localhost/EXTJS/docs/output/Ext.menu.TextItem.html" ext:cls="Ext.menu.TextItem"><font color="#4371a6" size="2">Ext.menu.TextItem</font></a> Form components --------------------------------------- form <a href="http://localhost/EXTJS/docs/output/Ext.FormPanel.html" ext:cls="Ext.FormPanel"><font color="#4371a6" size="2">Ext.FormPanel</font></a> checkbox <a href="http://localhost/EXTJS/docs/output/Ext.form.Checkbox.html" ext:cls="Ext.form.Checkbox"><font color="#4371a6" size="2">Ext.form.Checkbox</font></a> checkboxgroup <a href="http://localhost/EXTJS/docs/output/Ext.form.CheckboxGroup.html" ext:cls="Ext.form.CheckboxGroup"><font color="#4371a6" size="2">Ext.form.CheckboxGroup</font></a> combo <a href="http://localhost/EXTJS/docs/output/Ext.form.ComboBox.html" ext:cls="Ext.form.ComboBox"><font color="#4371a6" size="2">Ext.form.ComboBox</font></a> datefield <a href="http://localhost/EXTJS/docs/output/Ext.form.DateField.html" ext:cls="Ext.form.DateField"><font color="#4371a6" size="2">Ext.form.DateField</font></a> displayfield <a href="http://localhost/EXTJS/docs/output/Ext.form.DisplayField.html" ext:cls="Ext.form.DisplayField"><font color="#4371a6" size="2">Ext.form.DisplayField</font></a> field <a href="http://localhost/EXTJS/docs/output/Ext.form.Field.html" ext:cls="Ext.form.Field"><font color="#4371a6" size="2">Ext.form.Field</font></a> fieldset <a href="http://localhost/EXTJS/docs/output/Ext.form.FieldSet.html" ext:cls="Ext.form.FieldSet"><font color="#4371a6" size="2">Ext.form.FieldSet</font></a> hidden <a href="http://localhost/EXTJS/docs/output/Ext.form.Hidden.html" ext:cls="Ext.form.Hidden"><font color="#4371a6" size="2">Ext.form.Hidden</font></a> htmleditor <a href="http://localhost/EXTJS/docs/output/Ext.form.HtmlEditor.html" ext:cls="Ext.form.HtmlEditor"><font color="#4371a6" size="2">Ext.form.HtmlEditor</font></a> label <a href="http://localhost/EXTJS/docs/output/Ext.form.Label.html" ext:cls="Ext.form.Label"><font color="#4371a6" size="2">Ext.form.Label</font></a> numberfield <a href="http://localhost/EXTJS/docs/output/Ext.form.NumberField.html" ext:cls="Ext.form.NumberField"><font color="#4371a6" size="2">Ext.form.NumberField</font></a> radio <a href="http://localhost/EXTJS/docs/output/Ext.form.Radio.html" ext:cls="Ext.form.Radio"><font color="#4371a6" size="2">Ext.form.Radio</font></a> radiogroup <a href="http://localhost/EXTJS/docs/output/Ext.form.RadioGroup.html" ext:cls="Ext.form.RadioGroup"><font color="#4371a6" size="2">Ext.form.RadioGroup</font></a> textarea <a href="http://localhost/EXTJS/docs/output/Ext.form.TextArea.html" ext:cls="Ext.form.TextArea"><font color="#4371a6" size="2">Ext.form.TextArea</font></a> textfield <a href="http://localhost/EXTJS/docs/output/Ext.form.TextField.html" ext:cls="Ext.form.TextField"><font color="#4371a6" size="2">Ext.form.TextField</font></a> timefield <a href="http://localhost/EXTJS/docs/output/Ext.form.TimeField.html" ext:cls="Ext.form.TimeField"><font color="#4371a6" size="2">Ext.form.TimeField</font></a> trigger <a href="http://localhost/EXTJS/docs/output/Ext.form.TriggerField.html" ext:cls="Ext.form.TriggerField"><font color="#4371a6" size="2">Ext.form.TriggerField</font></a> Chart components --------------------------------------- chart <a href="http://localhost/EXTJS/docs/output/Ext.chart.Chart.html" ext:cls="Ext.chart.Chart"><font color="#4371a6" size="2">Ext.chart.Chart</font></a> barchart <a href="http://localhost/EXTJS/docs/output/Ext.chart.BarChart.html" ext:cls="Ext.chart.BarChart"><font color="#4371a6" size="2">Ext.chart.BarChart</font></a> cartesianchart <a href="http://localhost/EXTJS/docs/output/Ext.chart.CartesianChart.html" ext:cls="Ext.chart.CartesianChart"><font color="#4371a6" size="2">Ext.chart.CartesianChart</font></a> columnchart <a href="http://localhost/EXTJS/docs/output/Ext.chart.ColumnChart.html" ext:cls="Ext.chart.ColumnChart"><font color="#4371a6" size="2">Ext.chart.ColumnChart</font></a> linechart <a href="http://localhost/EXTJS/docs/output/Ext.chart.LineChart.html" ext:cls="Ext.chart.LineChart"><font color="#4371a6" size="2">Ext.chart.LineChart</font></a> piechart <a href="http://localhost/EXTJS/docs/output/Ext.chart.PieChart.html" ext:cls="Ext.chart.PieChart"><font color="#4371a6" size="2">Ext.chart.PieChart</font></a> Store xtypes --------------------------------------- arraystore <a href="http://localhost/EXTJS/docs/output/Ext.data.ArrayStore.html" ext:cls="Ext.data.ArrayStore"><font color="#4371a6" size="2">Ext.data.ArrayStore</font></a> directstore <a href="http://localhost/EXTJS/docs/output/Ext.data.DirectStore.html" ext:cls="Ext.data.DirectStore"><font color="#4371a6" size="2">Ext.data.DirectStore</font></a> groupingstore <a href="http://localhost/EXTJS/docs/output/Ext.data.GroupingStore.html" ext:cls="Ext.data.GroupingStore"><font color="#4371a6" size="2">Ext.data.GroupingStore</font></a> jsonstore <a href="http://localhost/EXTJS/docs/output/Ext.data.JsonStore.html" ext:cls="Ext.data.JsonStore"><font color="#4371a6" size="2">Ext.data.JsonStore</font></a> simplestore <a href="http://localhost/EXTJS/docs/output/Ext.data.SimpleStore.html" ext:cls="Ext.data.SimpleStore"><font color="#4371a6" size="2">Ext.data.SimpleStore</font></a> (deprecated; use arraystore) store <a href="http://localhost/EXTJS/docs/output/Ext.data.Store.html" ext:cls="Ext.data.Store"><font color="#4371a6" size="2">Ext.data.Store</font></a> xmlstore <a href="http://localhost/EXTJS/docs/output/Ext.data.XmlStore.html" ext:cls="Ext.data.XmlStore"><font color="#4371a6" size="2">Ext.data.XmlStore</font></a><font face="georgia, verdana, Arial, helvetica, sans-seriff"><span style="WHITE-SPACE: normal"> </span></font>
<span style="FONT-FAMILY: georgia, verdana, Arial, helvetica, sans-seriff; WHITE-SPACE: normal"><font color="#4b4b4b">defaults：xtypes的默认值，如：</font></span>
<span style="FONT-FAMILY: georgia, verdana, Arial, helvetica, sans-seriff; WHITE-SPACE: normal"><span style="WHITE-SPACE: pre"><font color="#4b4b4b"><span style="WHITE-SPACE: normal"> </span><span style="WHITE-SPACE: normal">defaults:{xtype:"textfield",width:180},</span></font></span></span>
<font face="georgia, verdana, Arial, helvetica, sans-seriff" color="#4b4b4b"><span style="WHITE-SPACE: normal"> items:[{fieldLabel:"帐号"},{fieldLabel:"密码"}],</span></font>
<font face="georgia, verdana, Arial, helvetica, sans-seriff"><span style="WHITE-SPACE: normal"><br> </span></font>二、方法
add(Ext.Component/Object_component)：添加一个组件到面板中，运行时方法。
addButton(
<font face="新宋体">String/Object config</font>, <font face="新宋体">Function handler</font>, <font face="新宋体">Object scope</font> ) :添加一个按钮到面板中，设计时方法（对象在未构造之前调用）。 _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:"取消"}]
})
})
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Click on the article content to pop up the page code_advertising codeNext article：Click on the article content to pop up the page code_advertising code
Related articles
See more- An in-depth analysis of the Bootstrap list group component
- Detailed explanation of JavaScript function currying
- Complete example of JS password generation and strength detection (with demo source code download)
- Angularjs integrates WeChat UI (weui)
- How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills