zoukankan      html  css  js  c++  java
  • EXTJS布局示例(panel,Viewport,TabPanel)(带图)

    面板控件panel应用

            new Ext.Panel({
                title:'面板头部(header)',
                tbar : ['顶端工具栏(top toolbars)'],
                bbar : ['底端工具栏(bottom toolbars)'],
                height:200,
                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)'
                    })
                ]
            })
      
    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
                     150
                },{
                    title: 'Main Content',
                    html : '中间',
                    region:'center'//指定子面板所在区域为center
                }]
            });
     
     
     
     
  • 相关阅读:
    前端工程师应该具备的三种思维
    7 个 Bootstrap 在线编辑器用于快速开发响应式网站
    js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交)
    JAVASCRIPT加密方法,JS加密解密综述(7种)
    JavaScript生成GUID的方法
    js判断是否为手机访问
    Jquery中parent()和parents()
    jQuery中ajax和post处理json的不同
    JQuery实现回车代替Tab键(按回车跳到下一栏)
    js中replace的用法
  • 原文地址:https://www.cnblogs.com/rc727512646/p/2981205.html
Copyright © 2011-2022 走看看