面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)
通过此文能学习到如下内容
1.创建一个简单的面板 Ext.Panel
2.制作一个可以拖动的面板 Ext.Panel
3 .使用选项卡面板
3.使用Ext.Viewport搭一个简单布局(用一个小例子来总结本文所有内容)
面板是ExtJs控件的基础，很多控件都是在面板的基础上扩展的，或者他会与其他控件之间有关系。
面板由一个工具栏、一个底部工具栏、面板头部、面板尾部和面板主区域几个部分组成。面本类中还提供了面板展开、关闭等功能。并提供了一些可重用的工具按钮让我们灵活的控制面板。面板可以放入其他任何容器中，面板本身也是一个容器，所以面板里面也可以包含其他组件。面板的类名为Ext.Panel,其xtype为panel。
看下面一个例子来显示出面板的各个组成部分：
//普通的面板
function panel(){
var panel=new Ext.Panel({
renderTo:'panel',
title:'面板的头部',
width:400,
height:200,
html:'<h1>面板的主显示区域..可包含任何html代码</h1>',
tbar:[{text:'顶部工具栏按钮'}],
bbar:[{text:'底部工具栏'}],
buttons:[
{
text:'面板底部按钮',
handler:function()
{
Ext.Msg.alert('提示','面板底部按钮的事件！');
}
}
]
});
}
上面的代码就不做详细介绍了，特别注意的一点是renderTo:'panel'，这句代码负责把面板绑定到一个div层里，panel就是div的ID。
<div id="panel"></div>
代码执行后会显示下面的效果：
效果不错吧！面板中可以有多个工具栏，可以位于面板的顶部或底部，Ext工具栏是由Ext.Toolbar类表示。工具栏可以存放按钮、文本等内容。而且面板中还提了一些实用的工具栏，可以通过tools配置属性向面板头部加入工具栏选项，看下面的案例：
function panel(){
var panel=new Ext.Panel({
tools:[
{id:"save"},
{id:"help"},
{id:"up"},
{
id:"close",
handler:function(){
Ext.MessageBox.alert("工具栏按钮","工具栏的关闭按钮事件")
}
}
],
renderTo:'panel',
title:'面板的头部',
width:400,
height:200,
html:'<h1>面板的主显示区域..可包含任何html代码</h1>',
tbar:[{text:'顶部工具栏按钮'}],
bbar:[{text:'底部工具栏'}],
buttons:[
{
text:'面板底部按钮',
handler:function()
{
Ext.Msg.alert('提示','面板底部按钮的事件！');
}
}
]
});
}
跟普通的面板没什么区别，只是多了个tools配置属性，可以通过ID来设置工具栏选项种类，如果需要给工具栏选项添加事件，则直接配置handler属性就可以。下面我为大家贴了一些id的枚举值：
toggle (collapsable为true时的默认值)
close
minimize
maximize
restore
gear
pin
unpin
right
left
up
down
refresh
minus
plus
help
search
save
print
上面的东西我也没有全部测试，如果大家感兴趣就自己试一下吧。
如果我们需要让这个面板可以拖动，需要加3个配置属性，改变一处配置。
x:88,
y: 88,
renderTo: Ext.getBody(),//x,y,renderTo:Ext.getBody()初始化panel的位置
draggable: {
insertProxy: false,//拖动时不虚线显示原始位置
onDrag : function(e){
var pel = this.proxy.getEl();
this.x = pel.getLeft(true);
this.y = pel.getTop(true);//获取拖动时panel的坐标
var s = this.panel.getEl().shadow;
},
endDrag : function(e){
this.panel.setPosition(this.x, this.y);//移动到最终位置
}
}
x与y是设置在屏幕显示位置，renderTo不需要指定div的id了，直接用Ext.getBody()方法就可以把Panel加载。
draggable是拖动时设置，onDrag是在拖动时触发的事件，endDrag是结束拖动时事件。
效果:
这样就可以拖动了，但是会发现在拖动时有一个黑框框，这样可能有些不美观了。如果我们需要让这个黑框随着移动位置而变化。那么我们需要在onDrag事件函数中加如下代码:
if (s) {
s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
}
看看拖动例子的全部代码：
//可以拖动的面板
function panelDrag(){
var panel=new Ext.Panel({
title: '拖一下看看我动不.',
x:88,
y: 88,
renderTo: Ext.getBody(),//x,y,renderTo:Ext.getBody()初始化panel的位置
floating: true,//true
frame: true,//圆角边框
width: 400,
height: 200,
draggable: {
insertProxy: false,//拖动时不虚线显示原始位置
onDrag : function(e){
var pel = this.proxy.getEl();
this.x = pel.getLeft(true);
this.y = pel.getTop(true);//获取拖动时panel的坐标
var s = this.panel.getEl().shadow;
if (s) {
s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
}
},
endDrag : function(e){
this.panel.setPosition(this.x, this.y);//移动到最终位置
}
}
})
}
Ext.Panel有几个子类，所以来介绍一下Panel中常见的配置属性、方法，下面内容是资料中的：
1.autoLoad：有效的url字符串，把那个url中的body中的数据加载显示，但是可能没有样式和js控制，只是html数据
2.autoScroll:设为true则内容溢出的时候产生滚动条，默认为false
3.autoShow:设为true显示设为"x-hidden"的元素，很有必要，默认为false
4.bbar:底部条，显示在主体内，//代码：bbar:[{text:'底部工具栏bottomToolbar'}],
5.tbar:顶部条，显示在主体内，//代码:tbar:[{text:'顶部工具栏topToolbar'}],
6.buttons:按钮集合，自动添加到footer中（footer参数，显示在主体外）//代码：buttons:[{text:"按钮位于footer"}]
7.buttonAlign:footer中按钮的位置，枚举值为："left","right","center",默认为right
8.collapsible：设为true，显示右上角的收缩按钮，默认为false
9.draggable:true则可拖动，但需要你提供操作过程，默认为false
10.html:主体的内容
11.id：id值，通过id可以找到这个组件，建议一般加上这个id值
12.width：宽度
13.height：高度
13.title:标题
14.titleCollapse：设为true，则点击标题栏的任何地方都能收缩，默认为false.
15.applyTo：（id）呈现在哪个html元素里面
16.contentEl：（id）呈现哪个html元素里面，把el内的内容呈现
17.renderTo：（id）呈现在哪个html元素里面
applyTo、contentEl、renderTo三者区别个人理解为：applyTo和RenderTo绑定到html元素中，contentEl则是html元素到ext组件中去。
上面说到面板都是绑定在某个html元素中显示面板，是局部的。Extjs中还有一个可以显示在整个body中的组件Ext.ViewPort，它会随着浏览器而变化。要注意的是一个页面中只能存在一个viewport的实例。看下面的代码
function viewport(){
var view=new Ext.Viewport({
enableTabScroll:true,
layout:"fit",
items:[
{
title:'标题',
html:"内容",
bbar:[
{text:"按钮1"}
]
}
]
})
}
与其它使用方式大同小异，Viewport不需要指定renderTo，Viewport通常用于网站主页面，Viewport常用布局有fit、border等，设置layout属性改变布局。
基本的面板我们了解了，还有一个很重要的面板TabPanel，这里用一个小例子做说明，代码就不解释了。面板的用法是非常灵活的，我们可以发挥自己的想象力来做出漂亮的选项卡面板和实用的功能。因为它是可以无限嵌套控件的。
function tabpanel(){
var tabpanel=new Ext.TabPanel({
activeTab:0, //设置默认选择的选项卡
renderTo:'tabpanel',
width:200,
height:150,
items:[
{
title:"第一个选项",
html:"第一个的内容"
},
{
title:"第二个选项",
html:"第一个的内容"
}
]
});
}
对待本人用到的东西来做一个小设计。代码不多做讲解，发一下代码和效果吧
function viewportlayout(){
var view=new Ext.Viewport({
enableTabScroll:true,
layout:"border",
items:[
{
title:'面板',
html:"没有美术细胞，布局比较难看",
region:"north",
height:50
},
{
title:'菜单',
collapsible:true,
html:"菜单栏",
region:"west",
width:200
},
{
xtype:"tabpanel",
activeTab: 0,
region:"center",
items:[
{title:"面板1",html:"tab面板1的内容"},
{title:"面板2",html:"tab面板2的内容"}
]
}
]
})
}
基本的面板应用就算说完了。可能有些人认为文章写的很基础，没办法，我也是初学，只能写应用。还没能去研究ext的源码。如果各位对文章有什么不好的地方或者需要改进的地方请留言说明，我会尽量做到。
1.创建一个简单的面板 Ext.Panel
2.制作一个可以拖动的面板 Ext.Panel
3 .使用选项卡面板
3.使用Ext.Viewport搭一个简单布局(用一个小例子来总结本文所有内容)
面板是ExtJs控件的基础，很多控件都是在面板的基础上扩展的，或者他会与其他控件之间有关系。
面板由一个工具栏、一个底部工具栏、面板头部、面板尾部和面板主区域几个部分组成。面本类中还提供了面板展开、关闭等功能。并提供了一些可重用的工具按钮让我们灵活的控制面板。面板可以放入其他任何容器中，面板本身也是一个容器，所以面板里面也可以包含其他组件。面板的类名为Ext.Panel,其xtype为panel。
看下面一个例子来显示出面板的各个组成部分：
//普通的面板
function panel(){
var panel=new Ext.Panel({
renderTo:'panel',
title:'面板的头部',
width:400,
height:200,
html:'<h1>面板的主显示区域..可包含任何html代码</h1>',
tbar:[{text:'顶部工具栏按钮'}],
bbar:[{text:'底部工具栏'}],
buttons:[
{
text:'面板底部按钮',
handler:function()
{
Ext.Msg.alert('提示','面板底部按钮的事件！');
}
}
]
});
}
上面的代码就不做详细介绍了，特别注意的一点是renderTo:'panel'，这句代码负责把面板绑定到一个div层里，panel就是div的ID。
<div id="panel"></div>
代码执行后会显示下面的效果：
效果不错吧！面板中可以有多个工具栏，可以位于面板的顶部或底部，Ext工具栏是由Ext.Toolbar类表示。工具栏可以存放按钮、文本等内容。而且面板中还提了一些实用的工具栏，可以通过tools配置属性向面板头部加入工具栏选项，看下面的案例：
function panel(){
var panel=new Ext.Panel({
tools:[
{id:"save"},
{id:"help"},
{id:"up"},
{
id:"close",
handler:function(){
Ext.MessageBox.alert("工具栏按钮","工具栏的关闭按钮事件")
}
}
],
renderTo:'panel',
title:'面板的头部',
width:400,
height:200,
html:'<h1>面板的主显示区域..可包含任何html代码</h1>',
tbar:[{text:'顶部工具栏按钮'}],
bbar:[{text:'底部工具栏'}],
buttons:[
{
text:'面板底部按钮',
handler:function()
{
Ext.Msg.alert('提示','面板底部按钮的事件！');
}
}
]
});
}
跟普通的面板没什么区别，只是多了个tools配置属性，可以通过ID来设置工具栏选项种类，如果需要给工具栏选项添加事件，则直接配置handler属性就可以。下面我为大家贴了一些id的枚举值：
toggle (collapsable为true时的默认值)
close
minimize
maximize
restore
gear
pin
unpin
right
left
up
down
refresh
minus
plus
help
search
save
上面的东西我也没有全部测试，如果大家感兴趣就自己试一下吧。
如果我们需要让这个面板可以拖动，需要加3个配置属性，改变一处配置。
x:88,
y: 88,
renderTo: Ext.getBody(),//x,y,renderTo:Ext.getBody()初始化panel的位置
draggable: {
insertProxy: false,//拖动时不虚线显示原始位置
onDrag : function(e){
var pel = this.proxy.getEl();
this.x = pel.getLeft(true);
this.y = pel.getTop(true);//获取拖动时panel的坐标
var s = this.panel.getEl().shadow;
},
endDrag : function(e){
this.panel.setPosition(this.x, this.y);//移动到最终位置
}
}
x与y是设置在屏幕显示位置，renderTo不需要指定div的id了，直接用Ext.getBody()方法就可以把Panel加载。
draggable是拖动时设置，onDrag是在拖动时触发的事件，endDrag是结束拖动时事件。
效果:
这样就可以拖动了，但是会发现在拖动时有一个黑框框，这样可能有些不美观了。如果我们需要让这个黑框随着移动位置而变化。那么我们需要在onDrag事件函数中加如下代码:
if (s) {
s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
}
看看拖动例子的全部代码：
//可以拖动的面板
function panelDrag(){
var panel=new Ext.Panel({
title: '拖一下看看我动不.',
x:88,
y: 88,
renderTo: Ext.getBody(),//x,y,renderTo:Ext.getBody()初始化panel的位置
floating: true,//true
frame: true,//圆角边框
width: 400,
height: 200,
draggable: {
insertProxy: false,//拖动时不虚线显示原始位置
onDrag : function(e){
var pel = this.proxy.getEl();
this.x = pel.getLeft(true);
this.y = pel.getTop(true);//获取拖动时panel的坐标
var s = this.panel.getEl().shadow;
if (s) {
s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
}
},
endDrag : function(e){
this.panel.setPosition(this.x, this.y);//移动到最终位置
}
}
})
}
Ext.Panel有几个子类，所以来介绍一下Panel中常见的配置属性、方法，下面内容是资料中的：
1.autoLoad：有效的url字符串，把那个url中的body中的数据加载显示，但是可能没有样式和js控制，只是html数据
2.autoScroll:设为true则内容溢出的时候产生滚动条，默认为false
3.autoShow:设为true显示设为"x-hidden"的元素，很有必要，默认为false
4.bbar:底部条，显示在主体内，//代码：bbar:[{text:'底部工具栏bottomToolbar'}],
5.tbar:顶部条，显示在主体内，//代码:tbar:[{text:'顶部工具栏topToolbar'}],
6.buttons:按钮集合，自动添加到footer中（footer参数，显示在主体外）//代码：buttons:[{text:"按钮位于footer"}]
7.buttonAlign:footer中按钮的位置，枚举值为："left","right","center",默认为right
8.collapsible：设为true，显示右上角的收缩按钮，默认为false
9.draggable:true则可拖动，但需要你提供操作过程，默认为false
10.html:主体的内容
11.id：id值，通过id可以找到这个组件，建议一般加上这个id值
12.width：宽度
13.height：高度
13.title:标题
14.titleCollapse：设为true，则点击标题栏的任何地方都能收缩，默认为false.
15.applyTo：（id）呈现在哪个html元素里面
16.contentEl：（id）呈现哪个html元素里面，把el内的内容呈现
17.renderTo：（id）呈现在哪个html元素里面
applyTo、contentEl、renderTo三者区别个人理解为：applyTo和RenderTo绑定到html元素中，contentEl则是html元素到ext组件中去。
上面说到面板都是绑定在某个html元素中显示面板，是局部的。Extjs中还有一个可以显示在整个body中的组件Ext.ViewPort，它会随着浏览器而变化。要注意的是一个页面中只能存在一个viewport的实例。看下面的代码
function viewport(){
var view=new Ext.Viewport({
enableTabScroll:true,
layout:"fit",
items:[
{
title:'标题',
html:"内容",
bbar:[
{text:"按钮1"}
]
}
]
})
}
与其它使用方式大同小异，Viewport不需要指定renderTo，Viewport通常用于网站主页面，Viewport常用布局有fit、border等，设置layout属性改变布局。
基本的面板我们了解了，还有一个很重要的面板TabPanel，这里用一个小例子做说明，代码就不解释了。面板的用法是非常灵活的，我们可以发挥自己的想象力来做出漂亮的选项卡面板和实用的功能。因为它是可以无限嵌套控件的。
function tabpanel(){
var tabpanel=new Ext.TabPanel({
activeTab:0, //设置默认选择的选项卡
renderTo:'tabpanel',
width:200,
height:150,
items:[
{
title:"第一个选项",
html:"第一个的内容"
},
{
title:"第二个选项",
html:"第一个的内容"
}
]
});
}
对待本人用到的东西来做一个小设计。代码不多做讲解，发一下代码和效果吧
复制代码代码如下:
function viewportlayout(){
var view=new Ext.Viewport({
enableTabScroll:true,
layout:"border",
items:[
{
title:'面板',
html:"没有美术细胞，布局比较难看",
region:"north",
height:50
},
{
title:'菜单',
collapsible:true,
html:"菜单栏",
region:"west",
width:200
},
{
xtype:"tabpanel",
activeTab: 0,
region:"center",
items:[
{title:"面板1",html:"tab面板1的内容"},
{title:"面板2",html:"tab面板2的内容"}
]
}
]
})
}
基本的面板应用就算说完了。可能有些人认为文章写的很基础，没办法，我也是初学，只能写应用。还没能去研究ext的源码。如果各位对文章有什么不好的地方或者需要改进的地方请留言说明，我会尽量做到。
ExtJS Panel常用方法，需要的朋友可以参考下。
一、属性
add(Ext.Component/Object_component)：添加一个组件到面板中，运行时方法。
三、构造参数
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:"取消"}]
})
})