简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

ExtJS Panel_extjs의 일반적인 방법 알아보기

WBOY
풀어 주다： 2016-05-16 18:45:21
원래의
999명이 탐색했습니다.
 一、属性
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({
             제목:"登陆",
            renderTo:Ext.getBody(),
             프레임:참,
             폭:560,
            높이:130 ,
             레이아웃:"양식",
            lableWidth:45,
             기본값:{xtype:"텍스트 필드",너비:180},
             항목:[{fieldLabel:"帐号"},{fieldLabel: "密码"}],
             버튼:[{text:"确결정 "},{텍스트:"取消"}]

            })
    })
관련 라벨：
extjs panel
원천：php.cn
이전 기사：기사 내용을 클릭하면 페이지 코드_광고 코드가 팝업됩니다. 다음 기사：객체지향 javascript (Notes)_js 객체지향
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
EXTJS에서 node.appendChild 생성 시 선택 및 편집 저는 Extjs를 처음 접했고 현재 분기와 섹션을 만드는 트리 작업을 하고 있습니다. 코드 편집 기능에 대한 도움이 필요합니다. createSection: 함수(...
에서 2024-04-03 17:39:46
0
1
397
요소 속성을 가져오기 위한 Cypress 테스트 저는 ExtJS 애플리케이션에 Cypress 테스트를 추가하기 위해 새로운 테스트 프로젝트를 개발하기 시작했습니다. ExtJS는 동적 ID를 사용하므로 요소를 식...
에서 2024-03-30 18:13:55
0
1
352
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！