`
lhy2012
  • 浏览: 15285 次
  • 性别: Icon_minigender_2
  • 来自: 济南
社区版块
存档分类
最新评论

【转载】EXTJS布局示例（panel，Viewport，TabPanel）

    博客分类：
  • Ext
extpanelViewportTabPanel
阅读更多

原文网址：http://www.cnblogs.com/johan/archive/2011/04/11/1947982.html

面板控件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 = 'http://www.cnblogs.com/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 : '散步'
                        }
                    }
                ]
            }
            ]
        })
分享到：
| 【转载】js页面跳转 和 js打开新窗口 方 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics