ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport(转)
2015-04-21 10:28
579 查看
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的实例。看下面的代码
与其它使用方式大同小异,Viewport不需要指定renderTo,Viewport通常用于网站主页面,Viewport常用布局有fit、border等,设置layout属性改变布局。
基本的面板我们了解了,还有一个很重要的面板TabPanel,这里用一个小例子做说明,代码就不解释了。面板的用法是非常灵活的,我们可以发挥自己的想象力来做出漂亮的选项卡面板和实用的功能。因为它是可以无限嵌套控件的。
对待本人用到的东西来做一个小设计。代码不多做讲解,发一下代码和效果吧
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的内容"} ] } ] }) }
相关文章推荐
- ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport第1/3页
- ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport第1/3页
- Extjs学习 Ext.TabPanel
- ExtJs4 笔记(10) Ext.tab.Panel 选项卡
- ExtJs4 笔记(10) Ext.tab.Panel 选项卡
- ExtJs学习笔记基础篇(3)-面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)
- ExtJs4 笔记(9) Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件
- ExtJs4 笔记(9) Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件
- ExtJs4 笔记(10) Ext.tab.Panel 选项卡
- ExtJS面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)
- ExtJS学习笔记(1)-表单验证,Ext.FormPanel
- ExtJs4 笔记(10) Ext.tab.Panel 选项卡
- ExtJS面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)
- ExtJS学习笔记(2)-From的类型,Ext.FormPanel
- extJs 2.1学习笔记(Ext.TabPanel篇)
- Extjs学习笔记--Ext.tree.Panel
- ExtJS学习笔记之四------- TabPanel
- extJs 2.1学习笔记(Ext.TabPanel篇)
- ExtJs学习笔记(8)_TabPanel的用法
- ExtJs4.2学习--Ext.tab.Panel 选项卡