EXTJS布局示例(panel,Viewport,TabPanel)

原创 2012年03月23日 21:10:47

面板控件panel应用  
        new Ext.Panel({  
            title:'面板头部(header)',  
            tbar : ['顶端工具栏(top toolbars)'],  
            bbar : ['底端工具栏(bottom toolbars)'],  
            height:200,  
            width:300,  
            frame:true,  
            applyTo :'panel',  
            bodyStyle:'background-color:#FFFFFF',  
            html:'<div>面板体(body)</div>',  
            tools : [  
                {id:'toggle'},  
                {id:'close'},  
                {id:'maximize'}  
            ],  
            buttons:[  
                new Ext.Button({  
                    text:'面板底部(footer)' 
                })  
            ]  
        })  
 
 
面板panel加载远程页面  
        var panel = new Ext.Panel({  
            title:'面板加载远程页面',  
            height:150,//设置面板的高度  
            width:250,//设置面板的宽度  
            frame:true,//渲染面板  
            autoScroll : true,//自动显示滚动条  
            collapsible : true,//允许展开和收缩  
            applyTo :'panel',  
            autoLoad :'page1.html',//自动加载面板体的默认连接  
            bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色  
        })  
 
面板panel加载本地页面  
        var panel = new Ext.Panel({  
            title:'面板加载本地资源',  
            height:150,//设置面板的高度  
            width:250,//设置面板的宽度  
            frame:true,//渲染面板  
            collapsible : true,//允许展开和收缩  
            autoScroll : true,//自动显示滚动条  
            autoHeight  : false,//使用固定高度  
            //autoHeight  : true,//使用自动高度  
            applyTo :'panel',  
            contentEl :'localElement',//加载本地资源  
            bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色  
        })  
         本地资源  
    <table border=1 id='localElement'>  
        <tr><th colspan=2>本地资源---员工列表</th></tr>  
        <tr>  
            <th width = 60>序号</th><th width = 80>姓名</th>  
        <tr>  
        <tr><td>1</td><td>张三</td></tr>  
        <tr><td>2</td><td>李四</td></tr>  
        <tr><td>3</td><td>王五</td></tr>  
        <tr><td>4</td><td>赵六</td></tr>  
        <tr><td>5</td><td>陈七</td></tr>  
        <tr><td>6</td><td>杨八</td></tr>  
        <tr><td>7</td><td>刘九</td></tr>  
    </table>  
 
 
使用html配置项定义面板panel内容  
        var htmlArray = [  
                        '<table border=1>',  
                            '<tr><td colspan=2>员工列表</td></tr>',  
                            '<tr><th width = 60>序号</th><th width = 80>姓名</th><tr>',  
                            '<tr><td>1</td><td>张三</td></tr>',  
                            '<tr><td>2</td><td>李四</td></tr>',  
                            '<tr><td>3</td><td>王五</td></tr>',  
                            '<tr><td>4</td><td>赵六</td></tr>',  
                            '<tr><td>5</td><td>陈七</td></tr>',  
                            '<tr><td>6</td><td>杨八</td></tr>',  
                            '<tr><td>7</td><td>刘九</td></tr>',  
                        '</table>' 
                      ];  
        var panel = new Ext.Panel({  
            title:'使用html配置项自定义面板内容',  
            height:150,//设置面板的高度  
            width:250,//设置面板的宽度  
            frame:true,//渲染面板  
            collapsible : true,//允许展开和收缩  
            autoScroll : true,//自动显示滚动条  
            applyTo :'panel',  
            html:htmlArray.join(''),  
            bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色  
        })  
 
 
使用items添加panel内容  
        var panel = new Ext.Panel({  
            header : true,  
            title:'日历',  
            frame:true,//渲染面板  
            collapsible : true,//允许展开和收缩  
            autoHeight : true,//自动高度  
            width : 189,//固定宽度  
            applyTo :'panel',  
            items: new Ext.DatePicker()//向面板中添加一个日期组件  
        })  
 
 
 
面板panel嵌套的使用  
 
        var panel = new Ext.Panel({  
            header : true,  
            title:'使用items进行面板嵌套',  
            frame:true,//渲染面板  
            collapsible : true,//允许展开和收缩  
            height : 200,  
            width : 250,  
            applyTo :'panel',  
            defaults : {//设置默认属性  
                bodyStyle:'background-color:#FFFFFF',//设置面板体的背景色  
                height : 80,//子面板高度为80  
                collapsible : true,//允许展开和收缩  
                autoScroll : true//自动显示滚动条  
            },  
            items: [  
                new Ext.Panel({  
                    title : '嵌套面板一',  
                    contentEl : 'localElement'//加载本地资源  
                }),  
                new Ext.Panel({  
                    title : '嵌套面板二',  
                    autoLoad : 'page1.html'//加载远程页面  
                })  
            ]  
        })  
 
FitLayout布局panel  
 
        var panel = new Ext.Panel({  
            layout : 'fit',  
            title:'Ext.layout.FitLayout布局示例',  
            frame:true,//渲染面板  
            height : 150,  
            width : 250,  
            applyTo :'panel',  
            defaults : {//设置默认属性  
                bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色  
            },  
            //面板items配置项默认的xtype类型为panel,  
            //该默认值可以通过defaultType配置项进行更改  
            items: [  
                {  
                    title : '嵌套面板一',  
                    html : '面板一' 
                },  
                {  
                    title : '嵌套面板二',  
                    html : '面板二' 
                }  
            ]  
        })  
 
 
layout.Accordion布局panel  
        var panel = new Ext.Panel({  
            layout : 'accordion',  
            layoutConfig : {  
                activeOnTop : true,//设置打开的子面板置顶  
                fill : true,//子面板充满父面板的剩余空间  
                hideCollapseTool: false,//显示“展开收缩”按钮  
                titleCollapse : true,//允许通过点击子面板的标题来展开或收缩面板  
                animate:true//使用动画效果  
            },  
            title:'Ext.layout.Accordion布局示例',  
            frame:true,//渲染面板  
            height : 150,  
            width : 250,  
            applyTo :'panel',  
            defaults : {//设置默认属性  
                bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色  
            },  
            items: [  
                {  
                    title : '嵌套面板一',  
                    html : '说明一' 
                },  
                {  
                    title : '嵌套面板二',  
                    html : '说明二' 
                }  
                ,  
                {  
                    title : '嵌套面板三',  
                    html : '说明三' 
                }  
            ]  
        })  
 
 
layout.CardLayout布局panel  
        var panel = new Ext.Panel({  
            layout : 'card',  
            activeItem : 0,//设置默认显示第一个子面板  
            title:'Ext.layout.CardLayout布局示例',  
            frame:true,//渲染面板  
            height : 150,  
            width : 250,  
            applyTo :'panel',  
            defaults : {//设置默认属性  
                bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色  
            },  
            items: [  
                {  
                    title : '嵌套面板一',  
                    html : '说明一',  
                    id : 'p1' 
                },  
                {  
                    title : '嵌套面板二',  
                    html : '说明二',  
                    id : 'p2' 
                }  
                ,  
                {  
                    title : '嵌套面板三',  
                    html : '说明三',  
                    id : 'p3' 
                }  
            ],  
            buttons:[  
                {  
                    text : '上一页',  
                    handler : changePage  
                },  
                {  
                    text : '下一页',  
                    handler : changePage  
                }  
            ]  
        })  
        //切换子面板  
        function changePage(btn){  
            var index = Number(panel.layout.activeItem.id.substring(1));  
            if(btn.text == '上一页'){  
                index -= 1;  
                if(index < 1){  
                    index = 1;  
                }  
            }else{  
                index += 1;  
                if(index > 3){  
                    index = 3;  
                }  
            }  
            panel.layout.setActiveItem('p'+index);  
        }  
 
 
layout.AnchorLayout布局panel  
        var panel = new Ext.Panel({  
            layout : 'anchor',  
            title:'Ext.layout.AnchorLayout布局示例',  
            frame:false,//渲染面板  
            height : 150,  
            width : 300,  
            applyTo :'panel',  
            defaults : {//设置默认属性  
                bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色  
            },  
            items: [  
                {  
                    anchor : '50% 50%',//设置子面板的宽高为父面板的50%  
                    title : '子面板' 
                }  
            ]  
        })  
       或者:  
                        items: [  
                {  
                    anchor : '-10 -10',//设置子面板的宽高偏移父面板10像素  
                    title : '子面板' 
                }  
            ]  
 
      或者:  
            items: [  
                {  
                    anchor : 'r b',//相对于父容器的右边和底边的差值进行定位  
                    width : 200,  
                    height : 100,  
                    title : '子面板' 
                }  
            ]  
 
    或者:  
            items: [  
                {  
                    x : '10%',//横坐标为距父容器宽度10%的位置  
                    y : 10,//纵坐标为距父容器上边缘10像素的位置  
                    width : 100,  
                    height : 50,  
                    title : '子面板一' 
                },  
                {  
                    x : 90,//横坐标为距父容器左边缘90像素的位置  
                    y : 70,//纵坐标为距父容器上边缘70像素的位置  
                    width : 100,  
                    height : 50,  
                    title : '子面板二' 
                }  
            ]  
 
layout.FormLayout布局panel  
        var panel = new Ext.Panel({  
            title:'Ext.layout.FormLayout布局示例',  
            layout : 'form',  
            labelSeparator : ':',//在容器中指定分隔符  
            frame:true,//渲染面板  
            height : 110,  
            width : 300,  
            applyTo :'panel',  
            defaultType: 'textfield',//指定容器子元素默认的xtype类型为textfield  
            defaults : {//设置默认属性  
                msgTarget: 'side'//指定默认的错误信息提示方式  
            },  
            items: [  
                {  
                    fieldLabel:'用户名',  
                    allowBlank : false 
                },  
                {  
                    fieldLabel:'密码',  
                    allowBlank : false 
                }  
            ]  
        })  
 
layout.ColumnLayout布局panel  
        var panel = new Ext.Panel({  
            title:'Ext.layout.ColumnLayout布局示例',  
            layout : 'column',  
            frame:true,//渲染面板  
            height : 150,  
            width : 250,  
            applyTo :'panel',  
            defaults : {//设置默认属性  
                bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色  
                frame : true 
            },  
            items: [  
                {  
                    title:'子面板一',  
                    width:100,//指定列宽为100像素  
                    height : 100  
                },  
                {  
                    title:'子面板二',  
                    width:100,//指定列宽为100像素  
                    height : 100  
                }  
            ]  
        })  
 
           或者:  
            items: [  
                {  
                    title:'子面板一',  
                    columnWidth:.3,//指定列宽为容器宽度的30%  
                    height : 100  
                },  
                {  
                    title:'子面板二',  
                    columnWidth:.7,//指定列宽为容器宽度的70%  
                    height : 100  
                }  
            ]  
 
          或者:  
            items: [  
                {  
                    title:'子面板一',  
                    width : 100,//指定列宽为100像素  
                    height : 100  
                },  
                {  
                    title:'子面板二',  
                    width : 100,  
                    columnWidth:.3,//指定列宽为容器剩余宽度的30%  
                    height : 100  
                },  
                {  
                    title:'子面板三',  
                    columnWidth:.7,//指定列宽为容器剩余宽度的70%  
                    height : 100  
                }  
            ]  
 
 
layout.TableLayout布局panel  
        var panel = new Ext.Panel({  
            title:'Ext.layout.TableLayout布局示例',  
            layout : 'table',  
            layoutConfig : {  
                columns : 4 //设置表格布局默认列数为4列  
            },  
            frame:true,//渲染面板  
            height : 150,  
            applyTo :'panel',  
            defaults : {//设置默认属性  
                bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色  
                frame : true,  
                height : 50  
            },  
            items: [  
                {  
                    title:'子面板一',  
                    colspan : 3//设置跨列  
                },  
                {  
                    title:'子面板二',  
                    rowspan : 2,//设置跨行  
                    height : 100  
                },  
                {title:'子面板三'},  
                {title:'子面板四'},  
                {title:'子面板五'}  
            ]  
        })  
 
 
layout.BorderLayout布局panel  
        var panel = new Ext.Panel({  
            title : 'Ext.layout.BorderLayout布局示例',  
            layout:'border',//表格布局  
            height : 250,  
            width : 400,  
            applyTo : 'panel',  
            items: [  
            {  
                title: 'north Panel',  
                html : '上边',  
                region: 'north',//指定子面板所在区域为north  
                height: 50  
            },  
            {  
                title: 'South Panel',  
                html : '下边',  
                region: 'south',//指定子面板所在区域为south  
                height: 50  
            },{  
                title: 'West Panel',  
                html : '左边',  
                region:'west',//指定子面板所在区域为west  
                width: 100  
            },{  
                title: 'east Panel',  
                html : '右边',  
                region:'east',//指定子面板所在区域为east  
                width: 100  
            },{  
                title: 'Main Content',  
                html : '中间',  
                region:'center'//指定子面板所在区域为center  
            }]  
        });  
 
Ext.Viewport布局示例  
        new Ext.Viewport({  
            title : 'Ext.Viewport示例',  
            layout:'border',//表格布局  
            items: [  
            {  
                title: 'north Panel',  
                html : '上边',  
                region: 'north',//指定子面板所在区域为north  
                height: 100  
            },{  
                title: 'West Panel',  
                html : '左边',  
                region:'west',//指定子面板所在区域为west  
                width: 150  
            },{  
                title: 'Main Content',  
                html : '中间',  
                region:'center'//指定子面板所在区域为center  
            }]  
        });  
 
 
 
Ext.TabPanel 标签页示例  
        var tabPanel = new Ext.TabPanel({  
            height : 150,  
            width : 300,  
            activeTab : 0,//默认激活第一个tab页  
            animScroll : true,//使用动画滚动效果  
            enableTabScroll : true,//tab标签超宽时自动出现滚动按钮  
            applyTo : 'panel',  
            items: [  
                {title: 'tab标签页1',html : 'tab标签页1内容'},  
                {title: 'tab标签页2',html : 'tab标签页2内容'},  
                {title: 'tab标签页3',html : 'tab标签页3内容'},  
                {title: 'tab标签页4',html : 'tab标签页4内容'},  
                {title: 'tab标签页5',html : 'tab标签页5内容'}  
            ]  
        });  
 
 
Ext.TabPanel(转换div)示例  
 
  <mce:script type="text/javascript"><!--  
    Ext.onReady(function(){  
        Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';  
        var tabPanel = new Ext.TabPanel({  
            height : 50,  
            width : 300,  
            autoTabs : true,//自动扫描页面中的div然后将其转换为标签页  
            deferredRender : false,//不进行延时渲染  
            activeTab : 0,//默认激活第一个tab页  
            animScroll : true,//使用动画滚动效果  
            enableTabScroll : true,//tab标签超宽时自动出现滚动按钮  
            applyTo : 'panel' 
        });  
    });  
    
// --></mce:script>  
 </HEAD>  
 <BODY>  
    <table width = 100%>  
        <tr><td> <td></tr>  
        <tr><td width=100></td><td>  
        <div id='panel'>  
            <div class='x-tab' title='tab标签页1'>tab标签页1内容</div>  
            <div class='x-tab' title='tab标签页2'>tab标签页2内容</div>  
            <div class='x-tab' title='tab标签页3'>tab标签页3内容</div>  
            <div class='x-tab' title='tab标签页4'>tab标签页4内容</div>  
            <div class='x-tab' title='tab标签页5'>tab标签页5内容</div>  
        </div>  
        <div class='x-tab' title='tab标签页6'>tab标签页6内容</div>  
        <td></tr>  
    </table>  
 </BODY>  
</HTML>  
 
 
Ext.TabPanel示例(动态添加tab页)  
        var tabPanel = new Ext.TabPanel({  
            height : 150,  
            width : 300,  
            activeTab : 0,//默认激活第一个tab页  
            animScroll : true,//使用动画滚动效果  
            enableTabScroll : true,//tab标签超宽时自动出现滚动按钮  
            applyTo : 'panel',  
            resizeTabs : true,  
            tabMargin : 50,  
            tabWidth : 100,  
            items : [  
                {title: 'tab标签页1',html : 'tab标签页1内容'}  
            ],  
            buttons : [  
                {  
                    text : '添加标签页',  
                    handler : addTabPage  
                }  
            ]  
        });  
        function addTabPage(){  
            var index = tabPanel.items.length + 1;  
            var tabPage = tabPanel.add({//动态添加tab页  
                title: 'tab标签页'+index,  
                html : 'tab标签页'+index+'内容',  
                closable : true//允许关闭  
            })  
            tabPanel.setActiveTab(tabPage);//设置当前tab页  
        }  
 
 
布局嵌套实现表单横排  
 
        var form = new Ext.form.FormPanel({  
            title:'通过布局嵌套实现表单横排',  
            labelSeparator :':',//分隔符  
            labelWidth : 50,//标签宽度  
            bodyStyle:'padding:5 5 5 5',//表单边距  
            frame : false,  
            height:150,  
            width:250,  
            applyTo :'form',  
            items:[  
            {  
                xtype : 'panel',  
                layout : 'column',//嵌套列布局  
                border : false,//不显示边框  
                defaults : {//应用到每一个子元素上的配置  
                    border : false,//不显示边框  
                    layout : 'form',//在列布局中嵌套form布局  
                    columnWidth : .5//列宽  
                },  
                items : [  
                    {  
                        labelSeparator :':',//分隔符  
                        items : {  
                            xtype : 'radio',  
                            name : 'sex',//名字相同的单选框会作为一组  
                            fieldLabel:'性别',  
                            boxLabel : '男' 
                        }  
                    },  
                    {  
                        items : {  
                            xtype : 'radio',  
                            name : 'sex',//名字相同的单选框会作为一组  
                            hideLabel:true,//横排后隐藏标签  
                            boxLabel : '女' 
                        }  
                    }  
                ]  
            },  
            {  
                xtype : 'panel',  
                layout : 'column',//嵌套列布局  
                border : false,//不显示边框  
                defaults : {//应用到每一个子元素上的配置  
                    border : false,//不显示边框  
                    layout : 'form',//在列布局中嵌套form布局  
                    columnWidth : .5//列宽  
                },  
                items : [  
                    {  
                        labelSeparator :':',//分隔符  
                        items : {  
                            xtype : 'checkbox',  
                            name : 'swim',  
                            fieldLabel:'爱好',  
                            boxLabel : '游泳' 
                        }  
                    },  
                    {  
                        items : {  
                            xtype : 'checkbox',  
                            name : 'walk',  
                            hideLabel:true,//横排后隐藏标签  
                            boxLabel : '散步' 
                        }  
                    }  
                ]  
            }  
            ]  
        })

EXTJS布局示例(panel,Viewport,TabPanel)

EXTJS布局示例(panel,Viewport,TabPanel) [javascript] view plaincopy 面板控...

EXTJS布局示例(panel,Viewport,TabPanel)

面板控件panel应用           new Ext.Panel({              title:'面板头部(header)',              tbar : ['顶端...

extjs5学习笔记之viewport+tabpanel布局

整体布局是viewport  点击左边导航按钮天机一个tab  如tab存在 则聚焦该tab否则添加新的tab      下面直接上代码 var view = null; Ext.onRead...

ExtJs4 笔记(9) Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件

本篇讲解三个容器类控件。 一、面板控件 Ext.Panel 一个面板控件包括几个部分,有标题栏、工具栏、正文、按钮区。标题栏位于最上面,工具栏可以在四个位置放置,围绕中间部分正文,按钮区位于最小方...

ExtJs学习笔记基础篇(3)-面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)

通过此文能学习到如下内容        1.创建一个简单的面板 Ext.Panel        2.制作一个可以拖动的面板 Ext.Panel        3 .使用选项卡面板      ...

EXTJS 实现TabPanel 并在各个Tab页中添加js写的panel

初学EXTJS,要实现一个功能,实现两个TAB页切换的效果,并且点每个TAB页还能显示一个js文件中写好的panel,刚开始用panel 加tar的方式,发现这种方式还得写触发TAB切换的功能,好麻烦...

ExtJS三个容器类控件 Window,Panel以及Viewport

转自:http://www.cnblogs.com/lipan/archive/2011/12/20/2294118.html \ 该博客中有不少JS方面的知识点。可以参考 作者:李盼(Lipan...

我自己写的关于EXTJS的TreePanel、viewPort和tabPanel动态切换和添加tabpanel的例子

什么也不说直接上代码: var tabPanel; Ext.onReady(function...

ExtJS Panel 学习示例

//html代码 div id="container">     /div>   //js代码 var p = new Ext.Panel({         title:...

ExtJS Panel 学习示例

//html代码 div id="container">     /div>   //js代码 var p = new Ext.Panel({         title: '...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:EXTJS布局示例(panel,Viewport,TabPanel)
举报原因:
原因补充:

(最多只允许输入30个字)