备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

《Ext JS 4 First Look》翻译之三：布局

2016-04-20 1783
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

第三章 布局　　　　　　　　　　　　　　　　　　　　　　　　　　

     布局用于定义容器如何组织内部子元素和控制子元素的大小。在一个应用程序中，作为定义容器的组织形式，布局是一个十分重要的组件。是显示单个子元素？还 是垂直或水平显示多个子元素？这些均由布局来定义。并且布局将占用应用程序大部分的呈现时间。Extjs4中对布局进行了重大的修整。下面我们将学习并熟 悉Extjs中的布局。
本章目录如下：
 
3.1. Extjs 4 布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
     Extjs4对布局进行了重大的修整。布局引擎已被重写，但API仍保持原样，从而使得布局是向后兼容的。当然所生成的HTML标签也作出了修整。
     Extjs2中引入了布局这一特性。当时其具有良好的性能和速度，但欠缺灵活性。后来的版本增强了灵活性却牺牲了性能（译者语：Extjs3在性能方面 确实令不少人望而却步啊！）。在Extjs4中对加载速度、性能和灵活性等方面都作出了改进，通过下面的图例我们可以看到改进结果：
除了上述内容，Extjs4还引入两类型的布局：Container 布局 和 Component 布局。
Component 布局：负责组织组件的HTML元素；
     包括：Dock布局、Toolbar布局、Field布局、TriggerField布局。
Container 布局：负责容器内容Extjs元素和调整Extjs元素的大小。
     包括：Border布局、Box布局、Fit布局等等。
（译者语：如果接触过Extjs旧有版本的朋友应该对Container布局不陌生了，而Component布局是Extjs4独有的，但不由开发人员来设置、调用，而是框架中的组件已内置好的。）
 
3.2. Container布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
     首先我们来看看Container布局的层级图吧！
 
3.2.1. Auto布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
     当没有为容器（Container或其子类实例）配置layout配置项时就会使用Auto布局。
     特点：
     1. 容器子元素不随容器大小变化而变化；
     2. 容器子元素按添加到容器的顺序自上而下排列。
实例：
var panel1 = Ext.create('Ext.panel.Panel', {

title: 'Panel 1',

html: 'Panel 1',

height: 60,

width: 100

});
var panel2 = Ext.create('Ext.panel.Panel', {

title: 'Panel 2',

     html: 'Panel 2', 

height: 80,

width: 60

});
var panel3 = Ext.create('Ext.panel.Panel', {

title: 'Panel 3',

html: 'Panel 3',

height: 65,

     width: 100
});
var panel4 = Ext.create('Ext.panel.Panel', {

title: 'Panel 4',

html: 'Panel 4',

height: 70,

     width: '90%'
});
var auto = Ext.create('Ext.window.Window', {

title: 'Auto Layout',

width: 100,

height: 320,

//layout:'auto',

defaults: {

     bodyStyle: 'padding:15px'

},

     items: [panel1, panel2, panel3, panel4]
}); 
     上述实例创建了四个panel组件实例并作为window组件实例的子元素。
     defaults：用于统一设置其子元素的配置项。
     结果如下：
1. 如果我们放大或缩小window组件实例，其内部的Panel1、Panel2、Panel3和Panel4的大小将不会随之变化；
2. Panel4中width值为90%表示该元素的宽度为父容器body宽度的90%。（在Chrome中使用百分比来设置宽度会出现没有右边框的异常）
 
3.2.2. Anchor布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
     特点：
     1. 容器子元素会随容器大小而变化；
     2. 子元素按添加到容器的次序，自上而下的排列;
     3. 子元素默认宽度为容器的body宽度。
     4. 通过子元素的x、y配置项可设置子元素离原来位置的左边距和上边距（效果如同position:relative,top:...,left:....）
 
     实例：
var panel1 = Ext.create('Ext.panel.Panel', {

title: 'Panel 1',

html: '100% 30%',

anchor:'100% 30%'

});
var panel2 = Ext.create('Ext.panel.Panel', {

title: 'Panel 2',

html: '80% 25%',

     anchor:'80% 25%'
});
var panel3 = Ext.create('Ext.panel.Panel', {

title: 'Panel 3',

html: '-70 20%',

     anchor:'-70 20%'
});
var panel4 = Ext.create('Ext.panel.Panel', {

title: 'Panel 4',

html: '-30 25%',

     anchor:'-30 25%'
});
var anchor = Ext.create('Ext.window.Window', {

title: 'Anchor Layout',

width: 250,

height:300,

layout:'anchor',

defaults: {

     bodyStyle: 'padding:10px'

},

     items: [panel1, panel2, panel3, panel4]
});
 
anchor.show(); 
从 实例我们可以知道，除了容器的layout配置项设为anchor后，若要定制子元素的布局细节就必须设置设置子元素的anchor配置项。 （Ext.panel.Panel中有anchorSize这一配置项，但与布局中上述的anchor配置项功能不同，无法实现上述效果）
anchor值为字符串，若形如"80"、"-30"或"80%"表示设置子元素占容器的宽度；而形如"80 90"或"90 80%"等表示设置子元素占容器的宽度和高度。
  1. 80等正数表示子元素离父容器左内边框、上内边框的距离；
  2. -30等负数表示子元素离父容器右内边框、下内边框的距离；
  3. 80%等百分数表示子元素占父容器宽度、高度的百分比。注意：对于高度使用百分比值时，每个子元素的最终的值都是“百分比*父容器的高度”。
改变容器大小后
 
3.2.3. Absolute布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
     AbsoluteLayout是AnchorLayout的子类，其继承了AnchoreLayout的所有特性。并且可以设置x和y配置项来相对与父容器来定位子元素。
     特点：
     1. 容器子元素会随容器大小而变化；
     2. 子元素默认宽度为容器的body宽度；
     3. 子元素默认位置为容器的左上角（x:0,y:0），就是不设置各子元素的x、y配置项时，所有子元素会在容器的左上角重叠；
     4. 子元素通过x、y配置项来设置子元素离容器左内边框、上内边框的距离。
     
实例：

var panel1 = Ext.create('Ext.panel.Panel', {

title: 'Panel 1',

html: 'x: 10; y: 10 - anchor: 80% 80%', /*this config option will display the given text inside the panel*/

anchor:'80% 80%',

x: 10,

y: 10

});
var absolute = Ext.create('Ext.window.Window', {

title: 'Absolute Layout',

width: 300,

height: 200,

layout:'absolute',

defaults: {

     bodyStyle: 'padding:10px'

},

     items: [panel1]
});
 
absolute.show(); 
 
注意：子元素的anchor属性，对于高度使用百分比值时，每个子元素的最终的值都是“ 百分比*父容器的剩余高度”，父容器的剩余高度=父容器的高度-较早添加到容器的子元素高度。所以子元素添加到容器的次序将在使用百分比设置子元素anchor属性高度时起作用。
     
 
3.2.4. HBox 布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
     HBox布局组织子元素在容器内水平排列。
     特点：
          1. 容器子元素会随容器大小而变化；
          2. 通过三个 可选的配置项来组织子元素相对于容器的宽和高。
     配置项介绍：
     1. flex：各个子元素的的flex配置项会相互作用来决定子元素在容器内的宽度。如子元素1的flex为1，而子元素2的flex为2，而容器宽度为90，那么子元素1的宽度就为30，而子元素2的宽度为60。
     2. align：设置各个子元素的水平方向的对齐，可选值有：
               top：默认值，顶对齐；
               middle：中心线对齐；
               strech：使各个子元素的高度为容器body的高度来对齐；
               strechmax：以最高的子元素的高度作为其他各个子元素的高度来对齐。
     3.pack：设置所有子元素组成的元素块是紧靠容器的左、中、右中哪个位置，可选值有：
               start：默认值，靠容器的左边；
               center：靠中间；
               end：靠容器的右边。
     1配置项为子元素的配置项；2和3为layout属性的配置项。
 
实例：

var panel1 = Ext.create('Ext.panel.Panel', {

title: 'Panel 1',

html: 'Panel 1', //this text will be displayed on the panel body

flex: 1

});

var panel2 = Ext.create('Ext.panel.Panel', {

title: 'Panel 2',

html: 'Panel 2', //this text will be displayed on the panel body

flex: 3

 
});

var hbox = Ext.create('Ext.window.Window', {

title: 'HBox Layout',

width: 300,

height:100,

layout: {

type: 'hbox',

align: 'stretch'

},

defaults: {

bodyStyle: 'padding:10px'

},

items: [panel1, panel2]

});

 
hbox.show(); 
结果：
 
3.2.5. VBox 布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
     VBox布局与HBox相似，不同的是它用于组织子元素在容器内部垂直方向的布局。
     特点：
          1. 容器子元素会随容器大小而变化；
          2. 通过三个 可选的配置项来组织子元素相对于容器的宽和高。
     配置项介绍：
     1. flex：各个子元素的的flex配置项会相互作用来决定子元素在容器内的高度。如子元素1的flex为1，而子元素2的flex为2，而容器高度为90，那么子元素1的高度就为30，而子元素2的高度为60。
     2. align：设置各个子元素的垂直方向的对齐，可选值有：
               left：默认值，左对齐；
               center：中心线对齐；
               strech：使各个子元素的宽度为容器body的宽度来对齐；
               strechmax：以最宽的子元素的宽度作为其他各个子元素的宽度来对齐。
     3.pack：设置所有子元素组成的元素块是紧靠容器的左、中、右中哪个位置，可选值有：
               start：默认值，靠容器的左边；
               center：靠中间；
               end：靠容器的右边。
     1配置项为子元素的配置项；2和3为layout属性的配置项。
 
实例：

var panel1 = Ext.create('Ext.panel.Panel', {

title: 'Panel 1',

html: 'Panel 1',

flex: 2

});

var panel2 = Ext.create('Ext.panel.Panel', {

title: 'Panel 2',

html: 'Panel 2',

flex: 1

});

var vbox = Ext.create('Ext.window.Window', {

title: 'VBox Layout',

width: 82,

height: 300,

layout: {

type: 'vbox',

align: 'stretch'

},

defaults: {

bodyStyle: 'padding:15px'

},

items: [panel1, panel2]

});

 
vbox.show();
 
 
3.2.6.  Accordion 布局　　　　　　　　　　　　　　　　　　　　　　　　　　
     Accordion布局是VBox布局的子类。与VBox布局不同的是Accordion布局仅仅会展现其中一个子元素而其余子元素将被折叠起来。
     特点：
     1. 容器子元素会随容器大小而变化；
     2. 仅仅会展现其中一个子元素而其余子元素将被折叠起来或仅仅展现部分子元素而其他元素被折叠。
 
     配置项介绍：
     1. multi：默认为false，true表示可以同时展现多个子元素；
     2. collapseFirst：默认为false，false表示expand/collapse按钮在标题工具按钮栏的最左边，true表示在最后边。（关于标题工具按钮栏Ext.panel.Tool我们将在后面学习）
     3. animate：默认为true，false为执行expand/collapse操作时没有动画效果
     4. fill：默认为true，true表示expand的子元素高度将为整个容器剩余高度，false表示expand的子元素高度为自身的高度
     1、4为layout配置项的属性，2、3为子元素的配置项。
     （译者语：本人试了一下activeOnTop这一配置项，但未成功。）
实例：

var panel1 = Ext.create('Ext.panel.Panel', {

title: 'Panel 1',

html: '<b>Panel 1</b>'

});

var panel2 = Ext.create('Ext.panel.Panel', {

title: 'Panel 2',

html: '<b>Panel 2</b>'

 
});

var panel3 = Ext.create('Ext.panel.Panel', {

title: 'Panel 3',

html: '<b>Panel 3</b>'

});

var panel4 = Ext.create('Ext.panel.Panel', {

title: 'Panel 4',

html: '<b>Panel 4</b>'

});

var panel5 = Ext.create('Ext.panel.Panel', {

title: 'Panel 5',

html: '<b>Panel 5</b>'

});

var accordion = Ext.create('Ext.window.Window', {

title: 'Accordion Layout',

margins:'5 0 5 5',

split:true,

width: 210,

height:250,

layout:'accordion',

defaults: {

bodyStyle: 'padding:35 15 0 50'

},

items: [panel1, panel2, panel3, panel4, panel5]

 
accordion.show(); 
 
3.2.7. Table 布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
     使用Table布局那么将生成HTML的Table标签来作为布局的容器。
     特点：
     1. 可通过配置来设置容器子元素的大小是否随容器的大小变化
 
     配置项介绍：
     1. columns：设置表格布局的列数；
     2. tableAttrs：设置表格的属性（如style等）
     3. trAttrs：设置行的属性
     4. tdAttrs：设置单元格的属性
     5. colspan：设置跨列数目
     6. rowspan：设置跨行数目
     1、2、3和4为layout配置项的属性，5、6为子元素的配置项。
注意：子元素的排列次序为由左至右，由上到下。
实例：

var table = Ext.create('Ext.window.Window', {

title: 'Table Layout',

width: 250,

height: 200,

layout: {

type: 'table',

columns: 3,

tableAttrs: {

style: {

width: '100%',

height: '100%'

}

}

},

defaults: {

bodyStyle: 'padding:10px'

},

 
items:[{
html:'Cell 1',
rowspan: 3 //this cell will span 3 rows
},{
html:'Cell 2'
},{
html:'Cell 3'
},{
html:'Cell 4'
},{
html:'Cell 5'
},{
html:'Cell 6',
colspan: 2 //this cell will span 2 columns
},{

html:'Cell 7'

},{

html:'Cell 8'

},{

html:'Cell 9'

}]

});

table.show();  
     
 
3.2.8. Column 布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
     Column布局为Auto布局的子类，用于设置子元素的宽度。
     特点：
     1. 容器子元素的宽度会随容器宽度而变化；
     2. 容器子元素的高度不随容器高度而变化；  
 
     配置项介绍：
     1. columnWidth：设置子元素的宽度（值必须为百分数或小于1的小数）
     1用作子元素的配置项。
实例：
var panel1 = Ext.create('Ext.panel.Panel', {
title: 'Panel 1',
html: '.25',
columnWidth: .25 //means 25%

});

var panel2 = Ext.create('Ext.panel.Panel', {

title: 'Panel 2',

html: '.25',

columnWidth: .25 //means 25%

});

var panel3 = Ext.create('Ext.panel.Panel', {

title: 'Panel 3',

html: '1/2',

columnWidth: 1/2 //means 50%

});

var column = Ext.create('Ext.window.Window', {

title: 'Column Layout',

width: 400,

layout:'column',

defaults: {

height: 60,

bodyStyle: 'padding:10px'

},

items: [panel1, panel2, panel3]

});

 
column.show(); 
 
3.2.9. Fit 布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
     Fit 布局是容器内只能显示一个子元素，若设置多个子元素，则只显示第一个子元素。
     特点：
          1. 容器内只能显示一个子元素，若设置多个子元素，则只显示第一个子元素。
          2. 容器子元素随容器大小变化。
实例：
     var panel1 = Ext.create('Ext.panel.Panel', {

title: 'Panel 1',
bodyStyle: 'padding:15px',
html: 'Fit Content'
});
var fit = Ext.create('Ext.window.Window', {
title: 'Fit Layout',
width: 100,
height: 150,

layout:'fit',
items: [panel1]
});
fit.show();
 
3.2.10.Card 布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
     Card布局是Fit布局的子类。
     特点：
     1. 容器内只能显示一个子元素，若设置多个子元素，则只显示第一个子元素；
     2. 可通过设置 setActiveItem方法来展示其他子元素；
     3. 容器子元素随容器大小变化。
实例：
var card = Ext.create('Ext.window.Window', {
title: 'Card Layout',
width: 400,
height: 200,
layout: 'card',
activeItem: 0,
bodyStyle: 'padding:70 50 0 150',
defaults: {
border:false
},
bbar: [{
id: 'prevButton',
text: 'Preivous Step',
handler: navHandler,
disabled: true
},
'->',
{
id: 'nextButton',
text: 'Next Step',
handler: navHandler
}],
items: [{
html: '<p>Step 1 of 3</p>'
},{
html: '<p>Step 2 of 3</p>'
},{
html: '<p>Step 3 of 3</p>'
}]
});
card.show();
 

var navHandler = function(btn) {

var activeItem = card.layout.activeItem;

var active = card.items.indexOf(activeItem);

if (btn.id == 'nextButton') {

active += 1;

}

else if (btn.id == 'prevButton') {

active -= 1;

}

card.layout.setActiveItem(active);

var prev = card.dockedItems.items[1].items.items[0];

var next = card.dockedItems.items[1].items.items[2];

if (active == 0){

prev.setDisabled(true);

} else if (active == 1){

prev.setDisabled(false);

next.setDisabled(false);

} else if (active == 2){

next.setDisabled(true);

}};

 
3.2.11. Border布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
     Border布局将容器分为五个区域：north、south、east、west和center。如下图：
其中north、south、east、west为选填项，center为必填项。另外我们不用设置center区域的高宽，浏览器可视工作区的高宽减去north、south、east和west高宽后剩余的空间便是center区域的高宽。
实例：
var border = Ext.create('Ext.window.Window', {
width: 700,
height: 500,
title: 'Border Layout',
layout: 'border',
defaults:{
xtype: 'panel'
},
items: [{
title: 'North Region is resizable',
region: 'north',
height: 100,
split: true
},{
title: 'South Region is resizable',
region: 'south',
height: 100,
split: true
},{
title: 'West Region is collapsible',
region:'west',
width: 200,
collapsible: true,
layout: 'fit'
},{
title: 'East Region is collapsible',
region:'east',
width: 200,
collapsible: true,
layout: 'fit'
},{
title: 'Center Region',
region: 'center',
layout: 'fit'
}]
});
border.show();
 
3.2.12. Form布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
     （译者语：虽然原文中没有该节内容，但API文档有Ext.layout.container.Form类，为了知识的完整性，因此追加该内容）
     特点：
          1. 内部的子元素的宽度为容器body的宽度，并随容器的大小变化而变化；
          2. 属于Ext.form.field包下的内部子元素的padding属性将失效。
 
3.3. Component布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
     Component布局负责组织组件内部的HTML元素。Toolbars、Headers和表单的Fields中均有应用到。（译者 语：Container布局用于组织组件之间的布局关系；Component布局负责组织组件内部的HTML元素或子组件的关系，组件内部由多个部分 （HTML元素或子组件）组成，Extjs4中对于组件中的子组件的组织形式是可定制的，相当灵活。另外虽然可通过组件的componentLayout 配置项配置Component布局，但一般情况下我们不应该设置该配置项）
 
3.3.1. Dock 布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
     为提高灵活性，Extjs4引进新的布局引擎Dock布局，主要应用在panel类组件上。该布局已在组件内部设置并用于panel的Headers和Toolbars中。
下面我们通过将Extjs3和Extjs4作对比来学习Dock布局。
Extjs3中设置Toolbar如下：

var html = '<div style="padding:10px;"><h1><center><span>Body</ center></h1></div>';

var panel1 = new Ext.Panel({

collapsible:true,

width:400,

renderTo: 'ext3-panel',

title: 'Ext 3 Panel - Header',

html: html,

tbar: new Ext.Toolbar({

items: [{

type: 'button',

text:'Button - Top Toolbar'

}]

}),

bbar: new Ext.Toolbar({

items: [{

type: 'button',

text:'Button - Bottom Toolbar'

}]

}),

fbar: new Ext.Toolbar({

items: [{

type: 'button',

text:'Button - Footer Toolbar'

}]

})

}); 

上述代码片段中我们创建了一个标题为Ext 3 Panel - Header的Ext.Panel实例，其中包含Header（标题）和三个Toolbar（分别位于Ext.Panel实例的上、下、页脚的位置），每个Toolbar有一个按钮，结果如下：
下面我们来分析一下Extjs3的Ext.Panel实例所生成的代码，最外层是一个用于封装整个组件的元素（El），然后是panel自身的Header和body的封装体。在body的封装体内有是三个Toolbar和panel body，具体如下图：
从上图我们可以看到Extjs3中的Panel的Header和Toolbar在Panel内部的位置是固定的，不能作任何改变。
而Extjs4的Panel组件就不同了，我们先看一下从Extjs3迁移到Extjs4的实例吧：
var panel1 = Ext.create('Ext.panel.Panel', {
collapsible:true,
width:400,
renderTo: 'ext4-panel',
title: 'Ext 4 Panel - Header',
html: html,
tbar: Ext.create('Ext.toolbar.Toolbar',{
items: [{
type: 'button',
text:'Button - Top Toolbar'
}]
}),
bbar: Ext.create('Ext.toolbar.Toolbar',{
items: [{
type: 'button',
text:'Button - Bottom Toolbar'
}]
}),
fbar: Ext.create('Ext.toolbar.Toolbar',{
items: [{
type: 'button',
text:'Button - Footer Toolbar'
}]
})
});
与Extjs3的实例对比，我们可以发现除了用Ext.create代替new来实例化对象外，其他均没有变化。那么究竟Extjs4的Header和Toolbar有多灵活呢，下面我们看一个完整的例子吧：
var panel2 = Ext.create('Ext.panel.Panel', {
collapsible:true,
width:400,
border:true,
renderTo: 'ext4-panel2',
title: 'Ext 4 Panel - Header',
headerPosition: 'top',
html: html,
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'button',
text: 'Button - Top Toolbar'
}]
},{
xtype: 'toolbar',
dock: 'bottom',
items: [{
xtype: 'button',
text: 'Button - Bottom Toolbar'
}]
},{
xtype: 'toolbar',
dock: 'bottom',
items: [{
xtype: 'component',
flex: 1 //will occupy 100% of the width of the panel
},{
xtype: 'button',
text: 'Button - Footer Toolbar'
}]
}]
});
在Extjs4中Header已经独立成为Panel下的一个子组件了，所属类为Ext.panel.Header。我们可以设置Header的位置（top、bottom、left和right）
而Toolbar也通过dockedItems配置项可以设置到top、bottom、left和right位置，并且同一个位置可以有0到N个Toolbar。
下面是上述代码片段所生成的元素结构图：
（译者语：原文中对Dock布局讲解的其余部分均为设置headerPosition、dockedItems为不同的值时的效果描述，我想大家通过实践就会得到结论，所以在此就不在翻译了）
 
3.3.2. Tool布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
     Extjs4中的Ext.panel.Header中包含Ext.panel.Tool的0到N个实例a。而这些Ext.panel.Tool实例就是 通过Tool布局来组织其关系。（译者语：in为在API文档中没有发现Tool布局，所以本节内容将以介绍Ext.panel.Tool为主）
     Ext框架提供25种类型的Ext.panel.Tool，通过Ext.panel.Panel的tools配置项来设置Ext.panel.Tool 实例。要注意的一点是，Ext框架提供的Ext.panel.Tool仅包含按钮图标而具体的点击事件处理函数需要我们自定义。具体实例如下：
var panel1 = Ext.create('Ext.panel.Panel', {
width:500,
renderTo: 'ext4-panel-tools',
html: html,
title: 'Tools - Header',
tools: [{
type: 'close',
handler: function(){} //some logic inside handler
},{
type: 'collapse',
handler: function(){} //some logic inside handler
},{
type: 'down',
handler: function(){} //some logic inside handler
},{
type: 'expand',
handler: function(){} //some logic inside handler
},{
type: 'gear',
handler: function(){} //some logic inside handler
},{
type: 'help',
handler: function(){} //some logic inside handler
},{
type: 'left',
handler: function(){} //some logic inside handler
},{
type: 'maximize',
handler: function(){} //some logic inside handler
},{
type: 'minimize',
handler: function(){} //some logic inside handler
},{
type: 'minus',
handler: function(){} //some logic inside handler
},{
type: 'next',
handler: function(){} //some logic inside handler
},{
type: 'pin',
handler: function(){} //some logic inside handler
},{
type: 'plus',
handler: function(){} //some logic inside handler
},{
type: 'prev',
handler: function(){} //some logic inside handler
},{
type: 'print',
handler: function(){} //some logic inside handler
},{
type: 'refresh',
itemId: "refresh",
hidden: true,
handler: function(){} //some logic inside handler
},{
type: 'restore',
handler: function(){} //some logic inside handler
},{
type: 'right',
handler: function(){} //some logic inside handler
},{
type: 'save',
handler: function(){} //some logic inside handler
},{
type: 'toggle',
handler: function(){} //some logic inside handler
},{
type: 'unpin',
handler: function(){} //some logic inside handler
},{
type: 'up',
handler: function(){} //some logic inside handler
},{
type: "search",
handler: function(event, target, owner, tool){
            // do search
            owner.child('#refresh').show();
        }
}]
});
 
3.3.3. Field布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
     （译者语：原文中指出Extjs4中已不支持FormLayout，而是通过FieldLayout来替代FormLayout。但API中仍然存在 Ext.layout.container.Form，而且FormLayout属于Container布局而FieldLayout属于 Component布局，两者没有互斥关系，因此下面的内容以介绍Field布局为主，并不讨论它语Form布局的关系）
     下面我们先来看一下在Extjs3中是如何创建含两个字段的表单吧：
    Ext.form.Field.prototype.msgTarget = 'side';

var simple = new Ext.FormPanel({

labelWidth: 75,

url:'save-form.php',

frame:true,

title: 'Form - Ext 3',

bodyStyle:'padding:5px 5px 0',

width: 350,

renderTo:'ext3-form',

defaults: {width: 230},

defaultType: 'textfield',

items: [{

fieldLabel: 'First Name',

name: 'first',

allowBlank:false

},{

fieldLabel: 'Last Name',

name: 'last',

allowBlank:false

}

],

buttons: [{

     text: 'Save'
 },{
 

text: 'Cancel'
}]
});

上面的代码片段中，我们创建了一个宽度为350px的表单，字段的标题宽度为75px，字段输入框宽度为230px的两个字段。字段不能为空，若为空则显示错误提示信息。结果如下：
在Extjs3中我们需要为字段预留至少20px的空间来呈现错误提示信息图标，否则当字段验证失败时将无法看到错误提示信息图标。
下面我们看一下在Extjs4中的实现吧：

var simple = Ext.create('Ext.form.Panel', {

frame:true,

title: 'Form - Ext 4',

bodyStyle:'padding:5px 5px 0',

width: 350,

renderTo:'ext4-form',

fieldDefaults: {

msgTarget: 'side',

labelWidth: 75

},

      defaultType: 'textfield',  
     defaults: {

anchor: '100%'

},

items: [{

fieldLabel: 'First Name',

name: 'first',

allowBlank:false

},{

fieldLabel: 'Last Name',

name: 'last',

allowBlank:false

}],

buttons: [{

text: 'Save'

},{

text: 'Cancel'

}]

 
}); 
在Extjs4上的实现与Extjs3的差不多，但我们已经不用为显示错误提示信息图标而预留至少20px的空间了，因为当字段验证失败时字段将缩短字段框的长度来显示错误提示信息图标。效果如下：
除了上述的改进外，现在我们可以为表单配置不同的布局，如HBox：
var hboxForm = Ext.create('Ext.form.Panel', {
frame:true,
title: 'Form - Ext 4',
bodyStyle:'padding:5px 5px 0',
width: 600,
renderTo:'ext4-form',
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
defaults: {
border: false,
xtype: 'panel',
flex: 1,
layout: 'anchor'
},
layout: 'hbox',
items: [{
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
anchor: '-10',
name: 'first',
allowBlank:false
}, {
xtype:'textfield',
fieldLabel: 'Phone Number',
anchor: '-10',
name: 'phone',
allowBlank:false
}]
}, {
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
anchor: '100%',
name: 'last',
allowBlank:false
},{
Chapter 3
[ 137 ]
xtype:'textfield',
fieldLabel: 'Email',
anchor: '100%',
name: 'email',
vtype:'email'
}]
}],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
结果如下：
 
3.3.4. TriggerField布局　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
     TriggerField布局是Field布局的扩展。Combox、DatePicker等组件都是用TriggerField布局，因此均不用预留至少20px的空间来显示错误提示信息图标。
     （译者语：原文余下的内容为证明上述内容的Extjs3和Extjs4对比实例，在此忽略了）
 
3.4. 总结　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
     在本章我们学习了Container和Component布局。在学习Ext的时候我们可能会更关注组件的使用而忽视了布局的学习，但布局是否使用得当往往是影响UI呈现速度的主要因素，因此充分理解布局的内容是十分重要的。
文章标签：
容器
JavaScript
API
Web App开发
关键词：
ext JavaScript布局
肥仔john
目录
相关文章
算精通
|
2月前
|
JavaScript 前端开发 Java
MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。
MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 和 Ext JS 都是 JavaScript 框架，用于开发 Web 应用程序。它们分别提供了不同的功能和特性，以帮助开发者更高效地构建和维护 Web 应用程序。
算精通
17 2
技术mix呢
|
JavaScript 容器 API
Ext Js简单常用对象的创建使用
技术mix呢
1127 0
技术mix呢
|
JavaScript 容器 索引
Ext Js简单事件处理和对象作用域
技术mix呢
1181 0
一线分享
|
前端开发 JavaScript 容器
5.Ext JS actioncolumn动态加载图标/提示
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/inforstack/article/details/54237726 ...
一线分享
940 0
yaohong
|
JavaScript
《Ext JS模板与组件基本框架图----组件》
本节主要从七个方面讲解组件，组件时什么，它的作用，它的构架，以及怎么创建和周期还有常见的配置项，属性方法和事件以及其层级是什么都进行整理，希望对大家有帮助。 组件的基础知识.png        2     AbstractContainer（派生37个）.
yaohong
835 0
yaohong
|
JavaScript 索引
《Ext JS模板与组件基本知识框架图----模板》
最近在整理Ext JS的模板和组件，在参考《Ext JS权威指南》,《Ext JS Web应用程序开发指南》，《Ext JS API》等相关书籍后才写下这篇《Ext JS模板与组件基本知识思维导图》，由于篇幅较长，所以必须肢解与各位分享。
yaohong
1376 0
一线分享
|
JavaScript
4.Ext JS Ext.data.Store本地过滤
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/inforstack/article/details/53608732 var myStore = Ext.
一线分享
834 0
一线分享
|
前端开发 JavaScript
2.Ext JS MVVM特性
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.
一线分享
792 0
一线分享
|
JavaScript
3.Ext JS 程序中使用路由
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/inforstack/article/details/53559851 简单说明 RedirectTo.
一线分享
963 0
一线分享
|
JavaScript 应用服务中间件 开发工具
1.Ext JS 建立web开发工程
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/inforstack/article/details/53515612 ...
一线分享
957 0

热门文章

最新文章

  • 1
    JavaScript基础语法（codewhy版本）（一）
  • 2
    JavaScript 权威指南第七版（GPT 重译）（三）(1)
  • 3
    JavaScript高级笔记-coderwhy版本（六）
  • 4
    JavaScript 权威指南第七版（GPT 重译）（六）(4)
  • 5
    JavaScript 权威指南第七版（GPT 重译）（四）(4)
  • 6
    JavaScript 权威指南第七版（GPT 重译）（二）(1)
  • 7
    JavaScript 权威指南第七版（GPT 重译）（六）(3)
  • 8
    JavaScript 权威指南第七版（GPT 重译）（三）(2)
  • 9
    报错/ ./node_modules/axios/lib/platform/index.js Module parse failed: Unexpected token (5:2)怎么解决？
  • 10
    在Blazor中使用Chart.js快速创建图表
  • 1
    js开发：请解释事件冒泡和事件捕获。
    15
  • 2
    js开发：请解释this关键字在JavaScript中的用法。
    7
  • 3
    js开发：请解释同步和异步编程的区别。
    11
  • 4
    学习JavaScript
    7
  • 5
    JS 几种循环遍历
    7
  • 6
    深入解析JavaScript原生操作DOM技术
    12
  • 7
    深入剖析JavaScript的事件循环
    11
  • 8
    JavaScript中的性能优化：代码优化技巧与性能分析工具
    10
  • 9
    JavaScript中的错误处理：try-catch语句与错误对象
    7
  • 10
    浏览器插件crx文件--JS混淆与解密
    9

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • Node.js 入门教程文档
  • HTML5 新特性教程
  • 前端开发CSS基础
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • JavaScript面向对象的程序设计
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
  • CSS基础教程
  • 搭建Node.js编程环境
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）