总结下今天看的技术知识点:
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!' });