`
endual
  • 浏览: 3560766 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

extjs布局(转)

 
阅读更多

    周末两天又要去参加婚礼,但是同学带的本科生居然系统没通过,叫我帮写一个。都怪自己,在帮他们调试的时候,

说自己在以前也写过两个项目,给本科生。系统要写两个的,一个打算用java swing写桌面的,一个打算用Struts2 + extjs + json+hibernate+mysql写web端。周2要交?两个晚上加一天+一个上午,天啊,挑战下自己也好吧。

 

 

下面是转来的,extjs做web的桌面,我喜欢extjs这么风格的,方便。

extjs的容器组件都可以设置它的显示风格,它的有效值有 absolute, accordion, anchor, border, card, column, fit, form and table. 一共9种。简单总结一下,帮助记忆。 
[list]
  • absolute
  • 顾名思义,在容器内部,根据指定的坐标定位显示 
  • accordion
  • 这个是最容易记的,手风琴效果 
    Java代码  收藏代码
    1. Ext.OnReady(function(){  
    2. var panel=new Ext.Panel(//Ext.formPanel就是Panel中用了form布局  
    3.       {  
    4.        renderTo:'paneldiv',  
    5.        title:'容器组件',  
    6.        layout:'accordion',         
    7.        width:500,  
    8.        height:200,  
    9.        layoutConfig:{animate:false},  
    10.        items:[  
    11.         {title:'元素1',html:''},  
    12.         {title:'元素2',html:''},  
    13.         {title:'元素3',html:''},  
    14.         {title:'元素4',html:''}  
    15.        ]  
    16.       }  
    17.      );  
    18. });  

  • anchor
  • 这个效果具体还不知道有什么用,就是知道注意一下 
    1.容器内的组件要么指定宽度,要么在anchor中同时指定高/宽, 
    2.anchor值通常只能为负值(指非百分比值),正值没有意义, 
    3.anchor必须为字符串值 
    Java代码  收藏代码
    1. Ext.onReady(function() {  
    2.         var panel1 = new Ext.Panel({  
    3.             title: "panel1",  
    4.             height: 100,  
    5.             anchor: '-50',  
    6.             html: "高度等于100,宽度=容器宽度-50"  
    7.         });  
    8.   
    9.         var panel2 = new Ext.Panel({  
    10.             title: "panel2",  
    11.             height: 100,  
    12.             anchor: '50%',  
    13.             html: "高度等于100,宽度=容器宽度的50%"  
    14.   
    15.         });  
    16.   
    17.         var panel3 = new Ext.Panel({  
    18.             title: "panel3",  
    19.             anchor: '-10, -250',  
    20.             html: "宽度=容器宽度-10,高度=容器宽度-250"  
    21.   
    22.         });  
    23.   
    24.         var win = new Ext.Window({  
    25.             title: "Anchor Layout",  
    26.             height: 400,  
    27.             width: 400,  
    28.             plain: true,                      
    29.             layout: 'anchor',  
    30.             items: [panel1, panel2,panel3]              
    31.         });  
    32.         win.show();  
    33.     });  

  • border
  • 将容器分为五个区域:east,south,west,north,center 
    Java代码  收藏代码
    1.  Ext.onReady(function() {       
    2.   
    3.         var button = Ext.get('show-btn');  
    4.         var win;  
    5.           
    6.         button.on('click', function() {  
    7.   
    8.             //创建TabPanel  
    9.             var tabs = new Ext.TabPanel({  
    10.                 region: 'center'//border布局,将页面分成东,南,西,北,中五部分,这里表示TabPanel放在中间  
    11.                 margins: '3 3 3 0',  
    12.                 activeTab: 0,  
    13.                 defaults: {  
    14.                     autoScroll: true  
    15.                 },  
    16.                 items: [{  
    17.                     title: 'Bogus Tab',  
    18.                     html: "第一个Tab的内容."  
    19.                 }, {  
    20.                     title: 'Another Tab',  
    21.                     html: "我是另一个Tab"  
    22.                 }, {  
    23.                     title: 'Closable Tab',  
    24.                     html: "这是一个可以关闭的Tab",  
    25.                     closable: true  
    26. }]  
    27.                 });  
    28.   
    29.                 //定义一个Panel  
    30.                 var nav = new Ext.Panel({  
    31.                     title: 'Navigation',  
    32.                     region: 'west'//放在西边,即左侧  
    33.                     split: true,  
    34.                     width: 200,  
    35.                     collapsible: true//允许伸缩  
    36.                     margins: '3 0 3 3',  
    37.                     cmargins: '3 3 3 3'  
    38.                 });  
    39.   
    40.                 //如果窗口第一次被打开时才创建  
    41.                 if (!win) {  
    42.                     win = new Ext.Window({  
    43.                         title: 'Layout Window',  
    44.                         closable: true,  
    45.                         width: 600,  
    46.                         height: 350,  
    47.                         border : false,  
    48.                         plain: true,  
    49.                         layout: 'border',  
    50.                         closeAction:'hide',  
    51.                         items: [nav, tabs]//把上面创建的panel和TabPanel放在window中,并采用border方式布局  
    52.                     });  
    53.                 }  
    54.                 win.show(button);  
    55.             });  
    56.         });  

  • card
  • 像安装向导一样,一张一张显示 
    Java代码  收藏代码
    1. Ext.onReady(function() {  
    2.   
    3.         var i = 0;  
    4.   
    5.         var navHandler = function(direction) {  
    6.             if (direction == -1) {  
    7.                 i--;  
    8.                 if (i < 0) { i = 0; }  
    9.             }  
    10.   
    11.             if (direction == 1) {  
    12.                 i++;  
    13.                 if (i > 2) { i = 2return false; }  
    14.             }  
    15.   
    16.   
    17.             var btnNext = Ext.get("move-next").dom.document.getElementsByTagName("button")[1];  
    18.             var btnBack = Ext.get("move-next").dom.document.getElementsByTagName("button")[0];  
    19.   
    20.             if (i == 0) {  
    21.                 btnBack.disabled = true;  
    22.             }  
    23.             else {  
    24.                 btnBack.disabled = false;  
    25.             }  
    26.   
    27.             if (i == 2) {  
    28.                 btnNext.value = "完成";  
    29.                 btnNext.disabled = true;  
    30.             }  
    31.             else {  
    32.                 btnNext.value = "下一步";  
    33.                 btnNext.disabled = false;  
    34.             }  
    35.   
    36.             card.getLayout().setActiveItem(i);  
    37.   
    38.         };  
    39.   
    40.   
    41.         var card = new Ext.Panel({  
    42.             width: 200,  
    43.             height: 200,  
    44.             title: '注册向导',  
    45.             layout: 'card',  
    46.             activeItem: 0// make sure the active item is set on the container config!  
    47.             bodyStyle: 'padding:15px',  
    48.             defaults: {  
    49.                 border: false  
    50.             },  
    51.             bbar: [  
    52.                 {  
    53.                     id: 'move-prev',  
    54.                     text: '上一步',  
    55.                     handler: navHandler.createDelegate(this, [-1])                      
    56.                 },  
    57.                 '->',  
    58.                 {  
    59.                     id: 'move-next',  
    60.                     text: '下一步',  
    61.                     handler: navHandler.createDelegate(this, [1])  
    62.                 }  
    63.             ],  
    64.   
    65.             items: [{  
    66.                 id: 'card-0',  
    67.                 html: '<h1>欢迎来到注册向导!</h1><p>Step 1 of 3</p>'  
    68.             }, {  
    69.                 id: 'card-1',  
    70.                 html: '<h1>请填写注册资料!</h1><p>Step 2 of 3</p>'  
    71.             }, {  
    72.                 id: 'card-2',  
    73.                 html: '<h1>注册成功!</h1><p>Step 3 of 3 - Complete</p>'  
    74. }],  
    75.   
    76.                 renderTo: "container"  
    77.             });  
    78.   
    79.   
    80.   
    81.         });  

  • column
  • 把整个容器看成一列,然后向容器放入子元素时 
    Java代码  收藏代码
    1. Ext.onReady(function() {  
    2.         var win = new Ext.Window({  
    3.             title: "Column Layout",  
    4.             height: 300,  
    5.             width: 400,  
    6.             plain: true,  
    7.             layout: 'column',  
    8.             items: [{  
    9.                 title:"width=50%",  
    10.                 columnWidth:0.5,  
    11.                 html:"width=(容器宽度-容器内其它组件固定宽度)*50%",  
    12.                 height:200  
    13.             },  
    14.             {  
    15.                 title:"width=250px",  
    16.                 width: 200,  
    17.                 height:100,  
    18.                 html:"固定宽度为250px"  
    19.             }              
    20.             ]  
    21.         });  
    22.         win.show();  
    23.     });  

  • fit
  • 一个子元素将充满整个容器(如果多个子元素则只有一个元素充满整个容器) 
    Java代码  收藏代码
    1. Ext.OnReady(function(){  
    2. var panel=new Ext.Panel(  
    3.       {  
    4.        renderTo:'paneldiv',  
    5.        title:'容器组件',  
    6.        layout:'fit',  
    7.        width:500,  
    8.        height:100,  
    9.        items:[  
    10.         {title:'子元素1'},  
    11.         {title:'子元素2'},  
    12.         {title:'子元素3'},  
    13.         {title:'子元素4'},  
    14.         {title:'子元素5'}  
    15.        ]  
    16.       }  
    17.      );  
    18. });  
  • form
  • 是一种专门用于管理表单中输入字段的布局 
    Java代码  收藏代码
    1. Ext.onReady(function() {  
    2.         var win = new Ext.Window({  
    3.             title: "form Layout",  
    4.             height: 150,  
    5.             width: 230,  
    6.             plain: true,  
    7.             bodyStyle: 'padding:15px',  
    8.             items:   
    9.             {  
    10.                 xtype: "form",  
    11.                 labelWidth: 30,  
    12.                 defaultType: "textfield",  
    13.                 frame:true,  
    14.                 items:   
    15.                 [  
    16.                     {  
    17.                         fieldLabel:"姓名",  
    18.                         name:"username",  
    19.                         allowBlank:false  
    20.                     },  
    21.                     {  
    22.                         fieldLabel:"呢称",  
    23.                         name:"nickname"  
    24.                     },  
    25.                     {  
    26.                         fieldLabel: "生日",  
    27.                         xtype:'datefield',  
    28.                         name: "birthday",  
    29.                         width:127  
    30.                     }  
    31.                 ]  
    32.             }  
    33.         });  
    34.         win.show();  
    35.     });  

  • table
  • 按照普通表格的方法布局子元素,用layoutConfig:{columns:3},//将父容器分成3列 
    Java代码  收藏代码
    1. Ext.onReady(function(){  
    2. var panel=new Ext.Panel(  
    3.       {  
    4.        renderTo:'paneldiv',  
    5.        title:'容器组件',  
    6.        layout:'table',         
    7.        width:500,  
    8.        height:200,  
    9.        layoutConfig:{columns:3},//将父容器分成3列  
    10.        items:[  
    11.         {title:'元素1',html:'ssssssssss',rowspan:2,height:100},  
    12.         {title:'元素2',html:'dfffsddsdfsdf',colspan:2},  
    13.         {title:'元素3',html:'sdfsdfsdf'},  
    14.         {title:'元素4',html:''}  
    15.        ]  
    16.       }  
    17.      );  
    18. });
    分享到:
    评论

    相关推荐

      ExtJS布局之border实例

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

      Extjs布局实例

      Extjs布局实例

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

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

      ExtJs布局教程Ext详细布局

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

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

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

      ExtJS布局练习例

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

      extjs页面布局生成器

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

      extjs布局管理学习指南

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

      ExtJs常用布局--layout详解实例代码

      ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...

      extjs布局全面讲解

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

      Extjs4.1布局与树

      纯Extjs代码,对初学Ext有点点帮助

      ExtJs4 layout 布局

      ExtJs4 layout 布局 这是鄙人之前自学Ext时收集的文档,详细讲诉了各种布局,并附源码与界面展示,希望能给你带来帮助

      ExtJS布局之border实例中文WORD版

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

      ExtJS3.2列布局

      列布局(Column Layout)是ExtJS的一种布局策略,它允许你在同一行内创建多个并排显示的区域,每个区域可以包含不同的组件,如文本框、选择框、按钮等。这种布局方式非常适合用来构建表格化的表单,使得数据输入和...

      Extjs4.1.1

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

      ExtJs4.2首页布局示例

      左边菜单,右边是内容,北边是log图片 简单首页布局示例

      ExtjS--accordion布局

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

      ExtJS4.1布局后台系统

      用ExtJS4.1布局后台系统,这个是自写的js,extjs4.1的源码包,需要到extjs.org.cn下载。

      Extjs4 layout 布局

      用extjs4搭的一个简单布局框架

    Global site tag (gtag.js) - Google Analytics