Ext学习笔记05 - UI组件 - Panel,TextField
TextField
TextField在Ext.form.TextField包下面（叫包叫习惯了），是form组件中的一个，是对传统文本框的封装（input）。
?
在页面中直接使用某些Component是不起作用的，因为Ext UI设计是类似Swing布局的，布局的宿主对象必须是Ext.Container或者Ext.Container的子类，详细的使用方法后面慢慢了解。
?
根据上面的原理，我们要在页面中创建一个TextField组件，就需要给它一个宿主，最常用的就是Panel，先说TextField，简单使用Panel，Panel的详细用法接下来谈。看个例子：
?
实际上TextField的代码只有很少
???在页面中显示：
，当单击文字“姓名”的时候，焦点会落到后面的input框中，因为在label中设置"for"属性，指向id为"name"的Component，另外，在严格标准的情况下，label标签是Accessibility(可访问性)所要求的，label标签会表明他所指向的对象，从而将label标签中的内容和指向的内容关联起来，严格意义上讲某些特定的情形下label标签是不可缺少的。（可能有不太了解Accessibility的朋友，可以参考：http://www.junchenwu.com/WAI/wai-pageauth.html ）
?
?
方法
getValue()：得到当前文本框的值，这个方法很简单就不多说了，?TextField有很多的属性和方法，先介绍最基本的这些，随着深入的使用，再慢慢补充。
?
?
PanelPanel是Ext布局中非常重要也是非常常用的的一个组件，Panel使用起来非常灵活，先来一个简单的例子：
??
属性
title：Panel的标签名 width：指定Panel的宽度 height：指定Panel的高度方法
addButton(String/Object _config, Function _handler, Object _scope)，添加一个Button到Panel中在Panel中添加两个Button对象，这里的addButton()方法是“设计时”方法，要在当前对象未构建之前调用，这里深层次的原因是JavaScript内部机制决定的，在当前对象构建之后add的话就会出现错误。
?
来看addButton()方法的使用：
? ，对比一下，加上frame属性之后美观了不少。?在构建Button对象的过程中，给addButton()添加了两个不同的参数
???
?
通过CSS就可以控制创建的Panel在页面中的位置，这样做的好处是巨大的，我们不用在页面使用table等传统标签进行布局，使用CSS我们可以做到这一点，而且修改很灵活，要改变创建的元素在页面中的位置，我们不需要对Ext的代码进行任何的改动，只需要修改CSS文件就可以了，这也实现了结构化文档与表现分离的思想。如果不使用CSS来进行表现，将布局代码写死在Ext代码中，那么一旦要进行修改，代价会非常大。
?
页面效果：
?
这里在向页面中添加元素的时候用到了applyToMarkup()方法，该方法类似render()，简单的解释一下：
?
如果在构造参数中定义：
renderTo:将当前对象放到renderTo指定的元素里面 applyTo:直接在当前对象之上构建在构造方法外部定义：
render：等同于renderTo() applyToMarkup：等同于applyTo()DomHelper.append是Ext中动态创建Dom对象的方式，也是经常用到的一个方法，来看API中的定义
?
DomHelper.append (?Mixed el , Object/String o , ???
这里_panel.add()方法和上面的addButton()看起来很像啊，传入的参数形式也是一样的。
?
?
在Ext2.0之后的版本，添加了 items 和 buttons 属性，使用他们可以方便的进行form中Component的设计，代码更加简洁，来看一个例子：
?
?
?
理解了上面的知识，再综合起来创建一个这样的Panel是不是觉得轻松多了？
?
校验：参考 - VType
