不能懒惰

elearning的账号密码reset申请成功了，终于可以完成Foundation of software security的training了。training长达两个小时，真的很容易犯困，做到晚上还有复习题没做，明儿继续。

总结下今天看的技术知识点：
1.component lifecycle
initialization,render,destruction
每个component实例化都和带着有一个独特的Ext.generated ID的ComponentMgr类被注册，它可以通过在对象配置中传递一个id参数的方式被重写。
Render：
beforerender fired - container ser - onRender()- Component is unhidden - custom Css adn/or styles applied - after render fired - Component hidden or disabled - State-specific event fired

2.Containers
这是一个幕后类，它提供管理组件和他们的孩子的基础。它的方法被大多子类所使用，包括：Panel,Viewport,Window.

var panel1 = {
html : 'I am Panel1', id : 'panel1',
frame : true, height : 100
First and second
B child panels
};
var panel2 = {
html : '<b>I am Panel2</b>', id : 'panel2',
frame : true
};
var myWin = new Ext.Window({
id : 'myWin', height : 400, width : 400, items : [
panel1, panel2
Last child, a
C form panel
]
});

每一个Container通过一个items属性存储它孩子的索引，他们可以通过someContainer.items方法被获得并且是Ext.util.MixedCollection的实例。

1）tame children
Adding Components:add and insert方法

Ext.getCmp('myWin').add({ title : 'Appended Panel', id : 'addedPanel',
html : 'Hello there!'
});

显示不出来，需要加上下面一行代码：

Ext.getCmp('myWin').doLayout();

doLayout方法迫使Container和它的孩子们的重新计算，并且将会渲染任何一个每被渲染的孩子。

insert方法实例：->有助于指定插入位置

Ext.getCmp('myWin').insert(1, {
title : 'Inserted Panel', id : 'insertedPanel', html : 'It is cool here!'
});

removing items 需要两个参数：我们想要删除的或从其中删除的组件的id；指定是否调用毁灭方法。
示例：

var panel = Ext.getCmp('addedPanel'); Ext.getCmp('myWin')remove(panel);

默认是true，即立即销毁panel

var panel = Ext.getCmp('insertedPanel'); Ext.getCmp('myWin')remove(panel, false); Ext.getCmp('otherParent').add(panel); Ext.getCmp('otherParent').doLayout();

2)查询Container层架构
findeByType方法：
用于在container层级中找到带有特定xtype的items并且返回找到的一系列items
示例：

var fields = Ext.getCmp('myForm').findByType('field');

他是怎么工作的？
findBy方法接受两个参数：custom方法
用户检测你的搜索标准和调用你的custom方法的范围。
示例：假设你想要找到所有隐藏了的子item


var findHidden = function(comp) {
if (! comp.isVisible()) {
return true;
}
}
var panels = Ext.getCmp('myContainer').findBy(findHidden);

3)Viewport Container
viewport类是所有独立依赖于通过浏览器viewport或display100％显示Ext的所有网页应用的基础。
这个类非常轻量级和有效。所以常被使用
示例：

new Ext.Viewport({ layout : 'border', items : [
{
{
]
});
height : 75, region : 'north',
title : 'Does Santa live here?'
},
{
width : 150, region : 'west',
title : 'The west region rules'
},
{
region : 'center',
title : 'No, this region rules!'
}
]
});

如果你改变浏览器窗口大小，你将会注意到中间的panel也被自动改变了大小，这演示了viewpot如何监听和响应浏览器改变大小事件。

第四章一个存放组建的地方
4.1 The Panel
有六个区域
建立一个复杂的Panel：
示例：

var myBtnHandler = function(btn) { Ext.MessageBox.alert('You Clicked', btn.text);
Button click
B handler method
}
var fileBtn = new Ext.Button({
text : 'File', handler : myBtnHandler
C File Button
});
var editBtn = new Ext.Button({
text : 'Edit', handler : myBtnHandler
D Edit Button
});
var tbFill = new Ext.Toolbar.Fill();
var myTopToolbar = new Ext.Toolbar({
items : [ fileBtn, tbFill, editBtn
E “Greedy” Toolbar fill
F
Top Toolbar instantiation
]
});
var myBottomToolbar = [
{
G Bottom Toolbar array configuration
},
'-',
{
},
text : 'Save', handler : myBtnHandler
text : 'Cancel', handler : myBtnHandler
'->',
'<b>Items open: 1</b>',
];

var myPanel = new Ext.Panel({
width : 200, height : 150,
title : 'Ext Panels rock!', collapsible : true,
renderTo : Ext.getBody(), tbar : myTopToolbar, bbar : myBottomToolbar,
html : 'My first Toolbar Panel!'
});

猜你喜欢