1) 、panel组件常用属性
因为panel组件的子类组件包括TabPanel,GridPanel,FormPanel,TreePanel组件,所以非常有必要介绍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和RenderTo强调to到html元素中,contentEl则是html元素到ext组件中去):
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和RenderTo强调to到html元素中,contentEl则是html元素到ext组件中去):
2)、带顶部,底部,脚部工具栏的panel
Ext.onReady(function(){
var p=new Ext.Panel({
id:"panel1", title:"标题",
collapsible:true,
renderTo:"container",
closable:true,
width:300,
height:200,
tbar:[{text:"按钮1"},{text:"按钮2"}], //顶部工具栏
bbar:[{text:"按钮1"},{text:"按钮2"}], //底部工具栏
html:"内容",
buttons:[{//footer部工具栏
text:"按钮1",
handler:function(){
Ext.MessageBox.alert("我是按钮1","我是通过按钮1激发出来的弹出框!")
}
},{
text:"按钮2"
}
],
tools:[{id:"save"},
{id:"help"},
{id:"up"},
{id:"close",handler:function(){
Ext.MessageBox.alert("工具栏按钮","工具栏上的关闭按钮时间被激发了")}
}
]
});
})
var p=new Ext.Panel({
id:"panel1", title:"标题",
collapsible:true,
renderTo:"container",
closable:true,
width:300,
height:200,
tbar:[{text:"按钮1"},{text:"按钮2"}], //顶部工具栏
bbar:[{text:"按钮1"},{text:"按钮2"}], //底部工具栏
html:"内容",
buttons:[{//footer部工具栏
text:"按钮1",
handler:function(){
Ext.MessageBox.alert("我是按钮1","我是通过按钮1激发出来的弹出框!")
}
},{
text:"按钮2"
}
],
tools:[{id:"save"},
{id:"help"},
{id:"up"},
{id:"close",handler:function(){
Ext.MessageBox.alert("工具栏按钮","工具栏上的关闭按钮时间被激发了")}
}
]
});
})
tools工具栏中的id枚举值为:
toggle (collapsable为true时的默认值) close 关闭
minimize
maximize
restore 恢复
gear
pin 置顶
unpin 去除置顶
right
left
up
down
refresh
minus
plus
help
search
save
相关推荐
标题提到的 "基于vue20可自由拖拽自由调整大小收缩展开的panel组件" 正是这样一种组件,它提供了丰富的交互功能,如拖动、缩放和折叠,为用户界面带来更高的灵活性和用户体验。 首先,我们来了解下这个组件的基本...
在Delphi编程环境中,动态创建组件是常见的需求,特别是在构建用户界面时,为了实现更灵活的设计和交互。本文将深入探讨如何动态创建Panel,并在Panel上添加其他组件,如TRzBackground和TBmpButton,同时处理鼠标...
#### 三、Panel组件样式属性 `Panel`组件是Flex中常用的布局容器之一,用于封装其他子组件。它也支持多种样式属性,包括但不限于: 1. **Corner Radius**:定义面板的圆角大小,取值范围为0到280。当值为0时,表示...
在C#编程中,`Panel`控件是一个非常常见的组件,它主要用于组织和管理其他控件。本示例探讨了如何实现`Panel`的动态创建、拖动以及缩放功能,这对于开发用户界面(UI)时增强交互性非常重要。下面我们将详细讲解这些...
在WinForm中,Panel控件默认具有一个边框,它的样式可以通过`BorderStyle`属性来设置,常见的选项有None(无边框)、FixedSingle(固定单边框)、Fixed3D(固定三维边框)等。默认情况下,边框的颜色与控件的背景色...
Panel组件提供了多种事件,如`onOpen`、`onClose`等,可以监听并处理用户操作: ```javascript $('#panelId').panel({ onOpen: function() { console.log('面板已打开'); }, onClose: function() { console....
1. **创建Panel实例**:首先,创建一个Panel实例,定义其配置属性,如标题、宽度、高度等。例如: ```javascript var panel = Ext.create('Ext.panel.Panel', { title: '我的面板', width: 400, height: 300, //...
我们可以通过配置对象来设置Panel的各种属性,如title、width、height等。当涉及到事件监听时,我们可以利用Ext JS的事件系统来实现。 点击事件(click event)是用户与UI交互的常见行为,常用于触发某些操作。在...
标题中的"BSE的Panel"指的是一个基于BSE(可能是某个软件框架或库的缩写)的Panel组件。Panel在UI设计中是一个基本的容器控件,用于组织和管理其他控件,提供布局功能。在Windows应用程序开发中,Panel通常用于包含...
在编程领域,特别是GUI(图形用户界面)设计中,`Panel`组件是一个常见的元素,用于组织和展示其他控件或内容。本主题聚焦于“panel面板的隐藏与收缩”技术,我们将探讨如何在Windows和QQ风格的界面中实现这一功能。...
1. **Flex Panel组件**:Flex Panel是Flex SDK中的一个基础组件,属于MX Containers类别。它提供了一个带有标题栏的可调整大小的区域,通常用于显示内容或者作为其他组件的容器。 2. **最小化功能**:在Flex Panel...
以下是一些常见的Ext Component属性: 1. **id** - 每个组件都需要一个唯一的ID,用于识别和访问。如果不指定,系统会自动生成。 2. **xtype** - 定义组件的类型。例如,'panel'、'button'或'grid',这决定了组件...
在Windows和许多其他图形用户界面(GUI)系统中,`Panel`是一个常见的组件,用于组织和展示其他控件。在编程领域,特别是使用.NET Framework、WinForms或WPF(Windows Presentation Foundation)等技术时,`Panel`是...
在编程和用户界面设计中,`Panel` 是一个常见的组件,通常用于组织和管理其他控件。在Java Swing、Windows Forms、WPF等GUI库中都有`Panel`类的实现。`背景透明Panel`是一个特殊类型的`Panel`,它允许其背景变为透明...
1. **颜色属性**:`Panel`组件通常有多种颜色属性,包括背景色(BackgroundColor)、边框色(BorderColor)和字体颜色(ForeColor)。这些颜色可以通过编程语言中的相应属性进行设置,例如在Java Swing中是`set...
常见的容器类包括`Window`(如`Frame`和`Dialog`)、`Panel`和`Applet`等。容器可以使用`add(Component c)`方法添加组件,`removeAll()`方法移除所有组件,`remove(Component c)`方法移除特定组件。当容器的组件有...
在Windows Forms开发中,`Panel`控件是一个非常常见的组件,用于封装其他控件并提供一个可自定义的布局区域。在本示例中,我们关注的是一个特殊类型的`Panel`,它可以被折叠以节省屏幕空间,这在设计用户界面时尤其...
2. Panel组件:Panel是Flex中的一个容器组件,可以用来展示和组织其他组件。Panel具有可定制的标题、边框和背景,通常用于创建有内含内容的区域。 3. Window组件:Window在Flex中通常指的是PopUpManager管理的Modal...
在Delphi编程环境中,"Panel树"是一种常见的用户界面元素,它结合了多个Panel控件以形成层次结构,常用于构建复杂且具有可扩展性的UI布局。Panel控件本身是Delphi提供的一种容器,可以容纳其他控件,如按钮、编辑框...