`
houzhaowei
  • 浏览: 499275 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

extjs 布局

阅读更多

/*//Viewport
    function()
    {
     var vport=new Ext.Viewport(
      {
       enableTabScroll:false,
       layout:"fit",//border
       items:[
         {title:"面板",html:"esfsdf",
          tbar:[{text:"按钮1"},{text:"按钮2"}],
          bbar:[{text:"按钮1"},{text:"按钮2"}]
         }
          ]       
      }     
     );
    }*/
    
    /*//Viewport--窗口布局
    function()
    {
     var vport=new Ext.Viewport(
      {
       enableTabScroll:true,
       layout:"border",
       items:[
        {
         title:"面板",
         region:"north",//位置
         collapsible:false,//是否允许隐藏
         width:300,
         html:"<h1>XXXXXXXX管理系统</h1>"
        },
        {
         title:"面板",
         region:"south",
         collapsible:true,
         width:300,
         html:"<h1>XXXXXXXX管理系统</h1>"
        },
        {
         title:"面板",
         region:"east",
         collapsible:true,
         width:300,
         html:"<h1>XXXXXXXX管理系统</h1>"
        },
        {
         title:"菜单",
         region:'west',
         width:200,
         collapsible:true,
         html:'菜单栏'
        },
        {
         xtype:'tabpanel',
         region:'center',
         items:[
           {title:'面板1'},
           {title:'面板2'}
            ]
        }
       ]
      }     
     );
    }*/
    
    /*//布局--感性认识
    function()
    {
     var panel=new Ext.Panel(
      {
       renderTo:'paneldiv',
       width:400,
       height:200,
       layout:'column',//column:设定比例,fit:单个子元素自动充满,border:,form:子元素原有大小自动排列,card,table
       items:[
        {columnWidth:0.5,title:'面板1',height:100,collapsible:true,html:'aaa'},
        {columnWidth:0.5,title:'面板2',height:100,collapsible:true,html:'bbb'},
        {columnWidth:0.5,title:'面板2',height:100,collapsible:true,html:'ccc'}
       ]
      }
     );
    }*/
    /*//布局-border:将容器分为五个区域:east,south,west,north,center
    function()
    {
     var vport=new Ext.Viewport(
      {
       enableTabScroll:true,
       layout:"border",
       items:[
        {
         title:"顶部面板",
         region:"north",//位置
         collapsible:false,//是否允许隐藏
         height:50,
         html:""
        },
        {
         title:"底部面板",
         region:"south",
         collapsible:true,
         height:50,
         html:""
        },
        {
         title:"右部面板",
         region:"east",
         collapsible:true,
         width:100,
         html:""
        },
        {
         title:"左部面板",
         region:'west',
         width:100,
         collapsible:true,
         html:'菜单栏'
        },
        {
         xtype:'tabpanel',
         region:'center',
         items:[
           {title:'面板1'},
           {title:'面板2'}
            ]
        }
       ]
      });
    }*/
    /*//布局-column:把整个容器看成一列,然后向容器放入子元素时,可通过在子元素中指定columnWidth或width来设定子元素所占的列宽,
    //columnWidth:百分比,width:实际尺寸
    //可混合用,混合用时:比例表示占剩余部分的百分比
    function()
    {
     var panel=new Ext.Panel(
      {
       renderTo:'paneldiv',
       title:'容器组件',
       layout:'column',
       width:500,
       height:100,
       items:[
        {title:'列1',width:100},
        {title:'列1',width:100},
        {title:'列1',width:100},
        {title:'列1',width:100},
        {title:'列1',columnWidth:1}
       ]
      }
     );
    }*/
    /*//布局-fit:一个子元素将充满整个容器(如果多个子元素则只有一个元素充满整个容器)
    function()
    {
     var panel=new Ext.Panel(
      {
       renderTo:'paneldiv',
       title:'容器组件',
       layout:'fit',
       width:500,
       height:100,
       items:[
        {title:'子元素1'},
        {title:'子元素2'},
        {title:'子元素3'},
        {title:'子元素4'},
        {title:'子元素5'}
       ]
      }
     );
    }*/
    /*//布局-form:是一种专门用于管理表单中输入字段的布局
    function()
    {
     var panel=new Ext.Panel(//Ext.formPanel就是Panel中用了form布局
      {
       renderTo:'paneldiv',
       title:'容器组件',
       layout:'form',       
       width:300,
       height:200,
       
       defaultType:'textfield',//设置表单字段的默认类型
       hideLabels:false,//是否隐藏表单内的标签
       labelAlign:"right",//标签对齐方式
       items:[
        {fieldLabel:"请输入姓名",name:'name'},
        {fieldLabel:"请输入地址",name:'address'},
        {fieldLabel:"请输入电话",name:'tel'},
        {fieldLabel:"请输入电话",name:'time',xtype:'datefield'}
       ]
      }
     );
    }*/
    /*//布局-accordion-可折叠的布局,注意其中用到了layoutConfig.
    function()
    {
     var panel=new Ext.Panel(//Ext.formPanel就是Panel中用了form布局
      {
       renderTo:'paneldiv',
       title:'容器组件',
       layout:'accordion',       
       width:500,
       height:200,
       layoutConfig:{animate:false},
       items:[
        {title:'元素1',html:''},
        {title:'元素2',html:''},
        {title:'元素3',html:''},
        {title:'元素4',html:''}
       ]
      }
     );
    }*/
    //布局-table:按照普通表格的方法布局子元素,用layoutConfig:{columns:3},//将父容器分成3列
    //用rowspan或colspan指定子元素所横跨的单元格数
    function()
    {
     var panel=new Ext.Panel(
      {
       renderTo:'paneldiv',
       title:'容器组件',
       layout:'table',       
       width:500,
       height:200,
       layoutConfig:{columns:3},//将父容器分成3列
       items:[
        {title:'元素1',html:'ssssssssss',rowspan:2,height:100},
        {title:'元素2',html:'dfffsddsdfsdf',colspan:2},
        {title:'元素3',html:'sdfsdfsdf'},
        {title:'元素4',html:''}
       ]
      }
     );
    }

0
0
0
(请您对文章做出评价)
分享到:
评论

相关推荐

    ExtJS布局之border实例

    资源名称:ExtJS布局之border实例内容简介:border布局是常见的布局样式,本文档中一个实际项目的示例,比较简单,仅供初学者参考。感兴趣的朋友可以过来看看。自动生成行号,支持checkbox全选,动态选择显示哪些列...

    Extjs布局实例

    Extjs布局实例

    ExtJs布局教程Ext详细布局

    ExtJS布局是构建用户界面的关键部分,特别是在使用ExtJS库时。本文主要讲解ExtJS的Column布局,一种非常灵活的布局方式,可以帮助开发者创建复杂的、响应式的用户界面。 Column布局在ExtJS中用于将容器(如Panel)...

    ExtJS布局练习例

    ### ExtJS布局类型 #### 1. **Column Layout** 文件中的示例使用了`column`布局,这是ExtJS中的一种常用布局方式,用于将子元素按列排列。例如,在代码中,可以看到一个`Ext.Panel`对象被创建,并指定了`layout:'...

    EXTJS学习,webform+mvc routeing extjs布局 适合初学者

    EXTJS学习,webform+mvc routeing extjs布局 适合初学者

    extjs布局全面讲解

    ### ExtJS布局全面讲解 #### 一、Border Layout(方位布局) **定义与特性:** - **定义**:Border布局由类`Ext.layout.BorderLayout`定义,布局名称为`border`,这是一种非常实用且常见的布局方式,适用于创建...

    extjs布局管理学习指南

    ### ExtJS布局管理学习指南 #### 一、引言 ExtJS是一款强大的JavaScript框架,用于构建复杂的前端应用程序。其中布局管理是ExtJS的核心特性之一,它可以帮助开发者有效地组织UI组件,使得用户界面既美观又实用。...

    Extjs 布局生成器(ext布局本地版本)

    Extjs 布局生成器,可以生产各布局查看布局代码

    ExtJS布局之border实例中文WORD版

    资源名称:ExtJS布局之border实例 中文WORD版内容简介:border布局是常见的布局样式,本文档中一个实际项目的示例,比较简单,仅供初学者参考。感兴趣的朋友可以过来看看资源截图: 资源太大,传百度网盘了,链接在...

    Extjs 布局样板

    收集到的Extjs 布局,有兴趣朋友快来看看

    extjs页面布局生成器

    很好的ext页面布局自动生成功能,快速布局,减少你页面开发时间!用法:解压-&gt;添加文件夹到一个web工程当中-&gt;进入index.html进入页面编辑就可以自由设计你的布局了,代码在查看/修改中可以看到,只需复制粘贴到自己...

    自己写的extjs布局

    自己写的ext布局。请下载的朋友注意目录的结构。否则可能不能运行。 关于内容和需求请参看文章:http://blog.csdn.net/sunxing007/archive/2009/03/17/3999705.aspx#1444224和需求:...

    ExtJS之布局详解

    以下是关于ExtJS布局的详细解释: 1. **基本知识:布局操作** - 布局操作涉及容器组件内的子元素组件如何组织和分布。 - 布局的基类是`Ext.layout.ContainerLayout`,它提供了所有布局的基础功能,但本身并不具有...

    Extjs之布局

    ### Extjs布局详解 在深入探讨Extjs布局之前,我们先简单回顾一下Extjs是什么。Extjs是一款基于JavaScript的企业级富客户端应用框架,它提供了一系列的UI组件和强大的数据处理能力,使得开发者能够构建出高性能的...

    ExtjS--accordion布局

    在本篇博客中,我们将聚焦于"accordion布局"这一特性,它是ExtJS布局系统中的一种特殊形式。 Accordion布局,又称为折叠面板布局,允许在一个容器内放置多个面板,这些面板会像手风琴一样展开和折叠。这种布局模式...

    Extjs4.1.1

    第八讲.EXtJS布局模式-Auto布局、Fit布局、Accordion布局 第九讲.ExtJS布局模式-Card、Anchor、Absolute 第十讲.ExtJS布局模式-Column、Table、Border 第十一讲.ExtJS布局模式-Box布局、使用ViewPort布局首页 第...

    Extjs学习笔记之七 布局

    以上介绍的只是Extjs布局管理中的一小部分,Extjs官网提供了丰富的例子和详细的文档,这是学习Extjs布局的最佳资源。通过官网的例子,可以直观地看到不同布局类型的效果和配置方法,极大地便利了开发者的布局实践和...

    Extjs布局源码

    想学Extjs吗 这是一个学习Extjs复杂布局的源码 很不错哦!

Global site tag (gtag.js) - Google Analytics