学习ExtJS Panel常用方法_extjs

 一、属性

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());
    }) ;

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:"取消"}]

             })
    })