面试常问的几个dom

[b][size=large]1 说明Html DOM、Ext Element及Component三者的关系;[/size][/b]

[b] A[/b]：每一个html页面都有一个层次分明的dom树模型，浏览器中所有内容都有相应的dom对象，动态改变页面的内容，就是通过脚本语言来改变dom对象实现的（通过getElementById或则Ext.getDom获取）【[color=red][b]每个html页面就是一个dom树，浏览器中显示的所有内容都是通过对应的dom对象来显示的。要想动态改变页面的内容，就是通过js动态改变对应的dom[/b][/color]】
[b] B[/b]：但是仅仅有dom还是不够的，比如要把页面中的某个节点移到其它位置，或者给某个节点添加阴影，我们都需要通过几句javascript才能完成。
因此Ext在dom的基础上，创建了Ext Element，使用 Element来包装包装任何dom。 因为在Element中添加了一系列快捷，简便的使用方法（通常用Ext.get获得Element对象）；【[color=red]要想动态修改A中的步奏，就要通过javascript才行，在extjs中则是使用Ext Element，因为他是来包装dom 的，因为包装以后提供了一系列的快捷，简便的方法，如Ext.get就可获得要修改的dom对象[/color]】
[b]C[/b]: 对于终端用户来说，有了Element还是不够的，比如用户小显示一个表格，一棵树，弹出一个窗口等。因此，除了Element外，Ext又建立了一系列客户端界面组件Component，
我们在使用时，只要调用这些组件Component就可实现数据展示以及交互等。
Component是较高层次的抽象，每一个组件在渲染render的时候，都会一次通过Element，dom来生成最终的页面效果。（通常用Ext.getCmp获得Componet对象）【[color=red]Component虽然是根据需求建立的系列组件，但是在渲染(render)的时候仍需要通过最基础的方式element，dom来实现】
[/color]
[b][size=large]
2．阐述这几个方法各自的作用get()、getCmp()、getDom()、getBody()、getDoc()。[/size][/b]
[b]1、get方法[/b]
[color=red]get方法用来得到一个Ext元素，也就是类型为 Ext.Element的对象[/color]，Ext.Element类是Ext对DOM的封装，代表DOM的元素，可以为每一个DOM创建一个对应的Element对 象，可以通过Element 对象上的方法来实现对DOM指定的操作，比如用hide方法可以隐藏元素、initDD方法可以让指定的DOM具有拖放特性 等。get方法其实是Ext.Element.get的简写形式。
get方法中只有一个参数，这个参数是混合参数，可以是DOM节点的id、也可以是一个Element、或者是一个DOM节点对象等。看下面的示例代码：
Ext.onReady(function(){
var e=new Ext.Element("hello");
alert(Ext.get("hello"));
alert(Ext.get(document.getElementById("hello")));
alert(Ext.get(e));
});
Html页面中包含一个id为hello的div，代码如下：
<div id="hello">tttt</div>
Ext.get("hello")、Ext.get(document.getElementById("hello"))、Ext.get(e)等三个方法都可以得到一个与DOM节点hello对应的Ext元素。
[b]2、getCmp方法－获得Ext组件。[/b]
[color=red]getCmp方法用来获得一个Ext组件[/color]，也就是一个已经在页面中初始化了的Component或其子类的对象，getCmp方法其实是Ext.ComponentMgr.get方法的简写形式。getCmp方法中只有一个参数，也就是组件的id。比如下面的代码：
Ext.onReady(function(){
var h=new Ext.Panel({
id:"h2",
title:"　",
renderTo:"hello",
width:300,
height:200});
Ext.getCmp("h2").setTitle("新的标题");
});
在代码中，我们使用Ext.getCmp("h2").来得到id为h2的组件，并调用其setTitle方法来设置该面板的标题。
[b]3、getDom方法－获得DOM节点[/b]
[color=red]getDom方法能够得到文档中的DOM节点[/color]，该方法中包含一个参数，该参数可以是DOM节点的id、DOM节点对象或DOM节点对应的Ext元素(Element)等。比如下面的代码：
Ext.onReady(function(){
var e=new Ext.Element("hello");
Ext.getDom("hello");
Ext.getDom(e);
Ext.getDom(e.dom);
});
Html：
<div id="hello">tttt</div>
在上面的代码中，Ext.getDom("hello")、Ext.getDom(e)、Ext.getDom(e.dom)等三个语句返回都是同一个DOM节点对象。
[b]4、getBody方法－得到文档的body节点元素(Element)。[/b]
该方法直接得到文档中与document.body这个DOM节点对应的ExtJS元素（Element），[color=red]实质就是把document.body对象封装成ExtJS元素对象返回[/color]，该方法不带任何参数。比如下面的代码把面板h直接渲染到文档的body元素中。
Ext.onReady(function(){
var h=new Ext.Panel({title:"测试",width:300,height:200});
h.render(Ext.getBody());
});
[b]5、getDoc方法－获得与document对应的Ext元素(Element)[/b]
[color=red]getDoc方法实质上就是把当前html文档对象，也就是把document对象封装成ExtJS的Element对象返回[/color]，该方法不带任何参数。


3．构建一个符合以下条件的ExtJS UI。 
条件说明：显示一个宽600、高300的window, window为模式窗口，并且不能改变其大 小及不能移出viewport外。在window下为3个选项面板，默认打开第2个面板，每个选项 面板中放若干个field，要求自少有一个面板中的field放在fieldset中。
[img][/img]
[img]http://dl2.iteye.com/upload/attachment/0105/3329/7bf8fc18-6130-3acc-aea0-1a8cd5578e6b.jpg[/img]
[img][/img]
[img]http://dl2.iteye.com/upload/attachment/0105/3331/00e2e6a9-7cc2-3436-b3ae-ace72e089eea.png[/img]
[img][/img]
[img]http://dl2.iteye.com/upload/attachment/0105/3333/2d4f7a4d-76a3-3ee5-875a-ba6cd8c6aab8.png[/img]

4.写一颗树，所有节点图标自定义，点击任意一个节点可提示当前点击的是哪个节点。
  我的照片  
最新照片 
 去年照片  
  春季 
夏季 
秋季 
冬季 
前年照片 
春季
 夏季
 秋季 
冬季  
儿时照片 
 5岁以前   
5岁以后
Ext.create(“Ext. tree. Panel”,{
title:”Text Tree Panel”,
width:450,
height:300,
rootVisible:false,
store:Ext.create(“Ext.data.TreeStore”,{
root:{
expanded:true,
children:[{
text:”以前照片”,
leaf:true
},{
text:”最近照片”,
expanded:true,
leaf:false,
children:[{
text:”春天”,
leaf:true
},{
text:”夏天”,
leaf:true
}]
}]
}
}),
listeners:{
scope:this,
cellclick:function(tab, td, cellIndex, record, tr, rowIndex, e, opts){
alert(record.data.text)
}
}
});

一、选择题 
1． 在使用ExtJS开发应用时，必需引入的文件有哪些？（A、B、C） 
A．ext-base.js  B．ext-all.css  C．ext-all.js  D．ext-lang-zh_CN.js  
2． ExtJS的类库由以下哪几部分组成。（A、B、C、D） 
A．底层API   
B．UI及Ajax通信类  
C．实用工具Utils  
D．控件(widgets) 
 
3． ExtJS中的组件定义是由以下哪个类决定的。（A） 
A．Component B．BoxComponent C．Container  D．Object 
 
4． ExtJS中的组件大致可以分成哪几大类。（A、B、C、D） 
A．基本组件  
B．工具栏组件 
 
C．数据通信组件  
D．表单及元素组件
5． 以下属于基本组件有哪些？（A ,B） 
A．Button  
B．ColorPalette  C．Window  D．TimeField 
 
6． 以下创建组件的方式正确的是。（A、C） 
A．使用new关键字 B．layout C．xtype  
D．items 
  
7． 当在创建一个Extjs组件时，如果没有指定组件的类型，则默认组件类型为：（D） 
A．Component B．Object C．Window D．Panel   
8． 在Extjs中Panel组件默认就具有的配置属性有哪些？（） 
A．loader  B．deferredRender  C．autoLoad  D．buttons  
9． Extjs给对象添加事件的方法可以为：（A、C） 
A．addListener  B．onClick  C．on   D．delay 
 10． 我们知道所有的组件有包含一个beforedestroy事件，该事件触发的时候为：（C） 
A．渲染的时候  B．数据加载的时候  C．销毁的时候 D．关闭的时候  
11． 
 ExtJS中用于支持事件的基类为：（D） 
A．Component 
B．BoxComponent 
C．Container  
D．Observable 
  
12．  以下选项中属于Extjs容器组件(继承自Container)的有：（ABC） 
A．Fieldset B．Viewport   C．Toolbar   D．TabPanel //extend panel
13． 以下组件有哪些可以放在工具栏上面？（）
 A．TextItem   B．Spacer  C．Fill   D．Separator  E．PagingToolbar  F．Button  
 
14．  指定TabPanel中的某个Panel为当前活动Panel的配置参数为：（C） 
A．resizeTabs  
B．closable  C．activeTab  
 
D．enableTabScroll 
 
15． 
 Extjs控件不需要指定渲染到某个节点的控件为：（A、B）
A．Window  B．ViewPort  C．TabPanel  D．Buttons 
 
16．  在同一个项目应用开发过程中，一个页面中控件只能唯一的是。（B） 
A．Window  B．ViewPort  C．TabPanel  D．Buttons  
17．  当一个布局为border时，该布局下必须有一个区域region为?（C） 
A．north  B．east  C．center D．south  
18．  容器使用的布局类型类型默认可以为：（） 
A．Accordion   B．anchor  C．border  D．card   E．column   F．fit   G．form 
H．table 
 
19． 
 定义GridPanel必须包含的元素为：（AC） 
A．数据存储器Store B．Ext.data. JsonStore C．Ext.grid.ColumnModel D．fields  
20．  数据存储器根据解析的数据不同可以分为：（） 
A．JsonStore  B．GroupingStore  C．SQLiteStore 
 D．SimpleStroe． 
 
21．  GridPanel中自定义的列渲染函数名称为：（D） 
 A．header B．sortable  C．render  D．Renderer
22． 
 数据存储器需要加载数据时，可以使用的方式为：（A） 
 A．store.load() B．stroe.reload() C．stroe.removeAll() D．this.load() 
 
23．  当在GridPandl中需要编辑某一行数据时，得到当前选择行数据记录可用语句。（） 
 A．this.grid.getSelectionModel().getSelected() 
 B．this.getSelectionModel().getSelected()  
 C．this.getSelected()  
D．this.grid.getSelected() 
 
24． 
 当发起一个AJAX请求时，需要传送到http请求的查询参数定义名称为。（A） 
 A．baseParams 
B．Proxy 
 
C．url  
D．autoLoad  
25．  在TreePanel中，能定义表示一颗树的节点的类为。（C、D） 
A．TreePanel      B．TreeNode    C．TreeLoader   D．AsyncTreeNode  
26．  如何从一个stroe中得到指定索引位置的记录集Record。（A） 
 A．store.getAt(i)  B．store.getAt()  C．store.get(i)  
D．this.getAt(i) 
 
27． 
 支持FieldSet展开或者关闭分组的显示的配置属性为（checkboxToggle、checkboxName、
collapsible） 
 A．checkboxToggle 
 
B．checkboxName  
C．baseCls  
D．collapsible 
 
28．  在formPanel中定义一个隐藏域必须要指定（xtype）
A．xtype  B．name  C．fieldLabel  D．Layout
29．  当在formpanel中需要提交一个表单，执行表单的submit方法时，配置参数必须包含。（B） 
 A．method  B．url  C．success  D．failure  
30． 
以下能把一个对象中的属性应用于另外一个对象中即属性拷贝。（apply、applyIf） 
A．apply() 
B．call()  
C．applyIf()  
D．Prototype
1. 请写出Ext组件的超类（基类）？  
Ext.component
2.  Ext的布局组件中有哪两个重要参数？ 
Layout, items 
3. Ext.id()函数的作用是什么？
生成唯一的id标示  
4. 你常用哪种字符编码进行Ext项目开发？  
Utf-8
5.  Ext.grid.RowNumber()是有什么作用？ 
生成自动计数列 
6. 在Grid中有哪种预设的selectionModel?  
rowSelectionModel， cellSelectionModel
7. store中哪两个参数用于分页设置的？  
Start ，limit
8. 在Grid的beforeedit事件中怎样取消编辑操作返回？  
Return false
9. form.submit提交和使用Ajax方法提交数据时，两者的success和failure函数有何异同？ 
Form中带有业务逻辑，ajax没有，只是关联网络连接状态 
10. 写出Ext基本的布局layout？  
Form， column，boeder， card，absolute，accordion，fit，table，anchor
11. 表单中设置reader有何作用？  
设置读写数据适配器，定义读写数据结构
12. Ext中的Form支持哪三种形式的提交？  
Html的form提交，两种Ajax形式提交
13. 在form中有一个name : ‟myName‟的textfield组件，请问怎样利用当前form得到该
myName对象  
Form.getForm（）.findField（“myName”）
14. 以下代码中有问题吗？请全部指出，并建议如何修改    
 new Ext.FormPanel({     
    labelAlign: 'top',   
      frame:true, 
         title: 'hello world', 
          bodyStyle:'padding:5px 5px 0',   
       defaultType: „textfield‟,     
     width: 600,    
     items: [{ 
             layout:'column',      
       items:[{ 
                 columnWidth:.5,       
          layout: 'form',         
        items: [{ 
                     fieldLabel: 'First Name',       
              name: 'first',          
           anchor:'95%' 
}
         ………………. 
不能设置defaultType: „textfield‟，应该在items组件中用xtype指定类型
15. 请简述Ext.util.Observable在Ext中的作用？ 
封装并提供了高层的事件驱动模型
16. 现定义了一person类，请为其实现“walk, eat, sleep”三个事件，并实现如何拦截和处理
事件 
Person类： 
      Person = function(name){    this.name = name; 
} 
///
person = function(name){ 
 this.name = name;
  this.addEvents(“walk”, “eat”, “sleep”);  
 }     
Ext.extend(person, Ext.util.Observable){ 
  重要
  into: function(event){ 
  return this.name + „is‟ + event + „ing.‟;  
}
 }  
处理： 
Person.on(„walk‟, function(){ 
}); …
17. 请说明Ext.reg()有什么作用，并指明如何使用。  
 作用是注册Ext组件，两种使用方法：new和xtype
18. Ext中合用哪种方式实现类的继承？  
  extend