关闭

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

361人阅读 评论(0) 收藏 举报

面板控件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 : '散步' 
                        }  
                    }  
                ]  
            }  
            ]  
        })

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:118834次
    • 积分:3879
    • 等级:
    • 排名:第8569名
    • 原创:234篇
    • 转载:83篇
    • 译文:1篇
    • 评论:6条