`

Ext布局

    博客分类:
  • Ext
ext 
阅读更多

FitLayout

自动适应页面大小,页面变大的时候Item跟着变大,页面变小的时候Item跟着变小。

使用FitLayout很容易实现这样的功能。

不过,FitLayout中的Item只能有一个,如果有多个则会忽略其他的。

示例:

Ext.onReady(function(){

// data for grid

var data1 = [

[2,"里斯",22,"man"],

[3,"李四",24,"man"],

[4,"丽丝",25,"woman"],

[5,"王五",26,"man"],

[6,"王武",26,"man"],

[7,"周瑜",27,"man"],

[8,"小乔",27,"woman"],

[9,"罗密欧",27,"man"],

[10,"朱丽叶",28,"woman"]

];

// array reader

var reader = new Ext.data.ArrayReader({},[

{name:"id",type:"int"},

{name:"name"},

{name:"age",type:"int"},

{name:"sex"}

]);

 

var store1 = new Ext.data.Store({

data:data1,

reader:reader

});

 

var grid = new Ext.grid.GridPanel({

id:"grid1",

title:"Grid1",

viewConfig:{

forceFit:true

},

columns:[

{header:"编号",dataIndex:"id",sortable:true},

{header:"名字",dataIndex:"name"},

{header:"年龄",dataIndex:"age",sortable:true},

{header:"性别",dataIndex:"sex",sortable:true}

],

store:store1,

frame:true,

width: 750,

height:200,

collapsible: true,

animCollapse: false,

enableDragDrop :true

});

 

new Ext.Viewport({

layout: 'fit',

items: [grid]

});

 

});

效果就是页面上一个表格,跟随页面的大小变化。

 

 

25.2BorderLayout

将整个区域分布成东西南北中5个区域,除了中间区域,其他区域是可以省略的。

可以设置split:true来允许用户拖放改变某一个区域的大小,同时设置minSizemaxSize防止某一个区域太大或大小导致显示混乱。

设置collapsible:true可以折叠某一个区域,以实现隐藏。

示例代码:

// border layout

newExt.Viewport({

layout: 'border',

items: [{

region: 'north',

html: '<h1class="x-panel-header">Page Title</h1>',

autoHeight: true,

border: false,

margins: '0 0 5 0'

}, {

region: 'west',

collapsible: true,

title: 'Navigation',

xtype: 'treepanel',

width: 200,

autoScroll: true,

split: true, // 用户可以自行拖放改变大小

minSize:120, // 拖放的最小尺寸,以免显示混乱

maxSize:600, // 拖放的最大尺寸,以免显示混乱

loader: new Ext.tree.TreeLoader(),

root: new Ext.tree.AsyncTreeNode({

expanded: true,

children: [{

text: '员工管理',

children:[

{text:"新增员工",leaf:true}

]

}, {

text: 'Menu Option 2',

leaf: true

}, {

text: 'Menu Option 3',

leaf: true

}]

}),

rootVisible: false,

listeners: {

click: function(n) {

Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');

}

}

}, {

region: 'center',

xtype: 'tabpanel',

items: [{

title: 'Default Tab',

html: 'The first tab\'s content. Othersmay be added dynamically'

},{

title: 'Tab 2',

html: 'The second tab\'s content. Othersmay be added dynamically'

}]

}, {

region: 'south',

title: 'Information',

collapsible: true,

html: 'Information goes here',

split: true, // 用户可以自行拖放改变大小

height: 100,

minHeight: 100

}, {

region: 'east',

title: 'About',

collapsible: true,

html: 'About Information goes here',

split: true, // 用户可以自行拖放改变大小

height: 100,

minHeight: 100,

collapsible:true

}]

});

 

显示效果:


WestEast2个区域可以折叠,可以拖放改变大小。

 

 

25.3制作伸缩菜单的布局——Accordion

 

 

示例:

// Accordion

newExt.Viewport({

layout:"border",

items:[

{

region:"west",

layout:"accordion",

width:200,

items:[

{

title:"人员管理",

html:"员工档案管理"

},

{

title:"考勤管理",

html:"员工考勤管理"

},

{

title:"薪资管理",

html:"员工薪资管理"

}

]

},

{

region:"center",

html:"Center"

}

 

]

});

 

效果:


单击标题或后面的图标可以折叠或收缩。

 

 

25.4操作向导布局——CardLayout(卡片布局)

可以看做是一叠卡片,从上面看,每次只能看到一张卡片。

 

示例:

// CardLayout

varnavHandler = function(direction){

var layout = card.getLayout();

var activeItem = layout.activeItem.id;

var btnPrev = Ext.getCmp("move-prev");

var btnNext = Ext.getCmp("move-next");

 

if (direction == 1) { // Button Next

if (activeItem == "card-0") {

layout.setActiveItem("card-1");

btnPrev.enable();

}

elseif (activeItem == 'card-1') {

layout.setActiveItem("card-2");

btnNext.disable();

}

}

else { // Button Prev

if (activeItem == 'card-1') {

layout.setActiveItem("card-0");

btnPrev.disable();

btnNext.enable();

}

elseif (activeItem == 'card-2') {

layout.setActiveItem("card-1");

btnNext.enable();

}

}

};

 

var card= new Ext.Panel({

title: 'Example Wizard',

layout:'card',

activeItem: 0, // make sure the active item isset on the container config!

renderTo:document.body,

height:300,

bodyStyle: 'padding:15px',

defaults: {

// applied to each contained panel

border:false

},

// just an example of one possiblenavigation scheme, using buttons

bbar: [

{

id: 'move-prev',

text: 'Back',

handler:navHandler.createDelegate(this, [-1]),

disabled: true

},

'->', // greedy spacer so that the buttons are aligned to eachside

{

id: 'move-next',

text: 'Next',

handler:navHandler.createDelegate(this, [1])

}

],

// the panels (or "cards") withinthe layout

items: [{

id: 'card-0',

html: '<h1>Welcome to theWizard!</h1><p>Step 1 of 3</p>'

},{

id: 'card-1',

html: '<p>Step 2 of 3</p>'

},{

id: 'card-2',

html: '<h1>Congratulations!</h1><p>Step3 of 3 - Complete</p>'

}]

});

 

效果:


单击Next按钮


单击Next按钮


分享到:
评论

相关推荐

    ext布局和菜单设计整理

    ext布局和菜单设计整理

    EXT 布局 Layout 资料

    ### EXT 布局 Layout 资料详解 #### 6.1 布局概述 在 Ext JS 中,布局(Layout)是一个重要的概念,它指的是容器组件内子元素的排列方式。Ext JS 的所有容器组件都支持布局操作,并且每个容器都有一个对应的布局...

    Ext布局类的介绍与使用

    在Web开发中,界面布局设计是提升用户体验的关键因素之一。EXT框架提供了一套强大的布局管理机制,使得开发者能够轻松创建复杂且响应式的用户...熟练掌握EXT布局的使用,可以极大地提升Web应用的用户体验和开发效率。

    ext布局(Layout.html)例子.pdf

    EXT布局是一种强大的前端开发框架,用于构建富互联网应用程序(RIA)。在EXT中,布局管理器是核心组件之一,它负责处理容器中的子组件的排列和大小调整。以下是对EXT布局中几种常见布局方式的详细说明: 1. Column...

    搜集来的ext布局材料

    以下是从给定代码片段中提取的EXT布局相关的重要知识点: 1. **Viewport布局**: - `Ext.Viewport` 是EXTJS中的一个全局对象,用于全屏布局,它会占据浏览器的整个视口。 - 在示例中,`viewport` 的布局有两种...

    ext布局(Layout.html)例子[参考].pdf

    以下将详细介绍EXT布局中的几种主要类型及其应用场景。 1. **Column布局**:此布局将容器划分为多列,每列的宽度可以通过`columnWidth`指定为百分比值。例如,设置`layout: "column"`后,可以分配列的相对宽度,...

    EXT布局,EXT相关知识

    主要讲的是EXT布局,使用这个布局,能让你学习更好的知识,我也在学习,咱们一起学习吧~~

    Ext布局类的介绍与使用的例程

    Ext布局类是Ext JS库中的核心组件之一,用于在页面上组织和管理控件的布局。这个强大的功能允许开发者创建复杂、响应式的用户界面。在本文中,我们将深入探讨`borderlayout`,这是一种常见的布局模式,它将容器分为...

    GWT-ext 布局示例

    在本文中,我们将深入探讨GWT-Ext框架中布局管理器的应用,这是一个基于Google Web Toolkit (GWT) 和 ExtJS 的强大控件库,用于快速开发富互联网应用程序。本系列文章的第三部分主要关注各种布局的实现和使用技巧,...

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

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

    ext布局layout各组件动态生成并相互交互

    发现目前网上 ext layout 例子虽然各项功能可以实现但是无法应用到真实项目中 因为大部分例子其中的各组件是静态写成的 只是动态的通过对象名调用 实际开发中各组件多为动态生成 因为即时数据:不能定义对象名...

    ext布局layout各组件动态生成并相互交互2

    发现目前网上 ext layout 例子虽然各项功能可以实现但是无法应用到真实项目中 因为大部分例子其中的各组件是静态写成的 只是动态的通过对象名调用 实际开发中各组件多为动态生成 因为即时数据:不能定义对象名...

    ext布局使用,菜单内容

    主要编写EXT的布局,rar文件,里面包含了EXT2.1的资源文件,

    EXT 布局 tab布局 普通拖拽 异步加载的树 节点可以编辑的树

    即:Ext.window 4.mainPage.html为tab布局,右面为tree中间为tab页面。 5.tz-normal-test.html为普通拖拽的练习。 6.tree-asynch-test.html为异步加载的树 7.tree-edit-test.html为节点可以编辑的树 8.tree-tz-...

    ext布局demo

    ext 3做的布局DEMO 适合新手借鉴 用myeclipse写的 可以直接用浏览器打开

    ext表格布局小例子

    ### ExtJS 表格布局小例子详解 #### 一、简介 本文档旨在解析一个具体的 ExtJS 表格布局小例子,重点介绍其中涉及的数据存储、数据删除与添加的方法。ExtJS 是一款强大的 JavaScript 框架,用于构建交互式的前端...

    ext简单布局,直接修改即可使用

    ext做简单布局,ext简单布局,直接修改即可使用ext简单布局,直接修改即可使用ext简单布局,直接修改即可使用

    Ext简介及应用案例 ppt

    Ext是一个强大的JavaScript库,特别设计用于构建富互联网应用程序(RIA)。它基于Ajax技术,提供丰富的用户界面组件和高度可定制的界面元素。Ext的核心特点包括遵循W3C标准,拥有庞大的组件模型,允许开发者创建复杂...

    经典EXT后台简单布局

    EXT后台简单布局,很好的,好用!!!!

    ext学习文档

    - **applayout.html**: 介绍了一个典型的EXT布局文件示例。 - **applayout.js**: 提供了一个示例脚本文件,展示了如何使用EXT构建应用程序。 - **公开Public、私有Private、特权的Privileged?**: 解释了EXT中变量和...

Global site tag (gtag.js) - Google Analytics