1 说明Html DOM、Ext Element及Component三者的关系;
A:每一个html页面都有一个层次分明的dom树模型,浏览器中所有内容都有相应的dom对象,动态改变页面的内容,就是通过脚本语言来改变dom对象实现的(通过getElementById或则Ext.getDom获取)【
每个html页面就是一个dom树,浏览器中显示的所有内容都是通过对应的dom对象来显示的。要想动态改变页面的内容,就是通过js动态改变对应的dom】
B:但是仅仅有dom还是不够的,比如要把页面中的某个节点移到其它位置,或者给某个节点添加阴影,我们都需要通过几句javascript才能完成。
因此Ext在dom的基础上,创建了Ext Element,使用 Element来包装包装任何dom。 因为在Element中添加了一系列快捷,简便的使用方法(通常用Ext.get获得Element对象);【
要想动态修改A中的步奏,就要通过javascript才行,在extjs中则是使用Ext Element,因为他是来包装dom 的,因为包装以后提供了一系列的快捷,简便的方法,如Ext.get就可获得要修改的dom对象】
C: 对于终端用户来说,有了Element还是不够的,比如用户小显示一个表格,一棵树,弹出一个窗口等。因此,除了Element外,Ext又建立了一系列客户端界面组件Component,
我们在使用时,只要调用这些组件Component就可实现数据展示以及交互等。
Component是较高层次的抽象,每一个组件在渲染render的时候,都会一次通过Element,dom来生成最终的页面效果。(通常用Ext.getCmp获得Componet对象)【
Component虽然是根据需求建立的系列组件,但是在渲染(render)的时候仍需要通过最基础的方式element,dom来实现】
2.阐述这几个方法各自的作用get()、getCmp()、getDom()、getBody()、getDoc()。
1、get方法
get方法用来得到一个Ext元素,也就是类型为 Ext.Element的对象,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元素。
2、getCmp方法-获得Ext组件。
getCmp方法用来获得一个Ext组件,也就是一个已经在页面中初始化了的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方法来设置该面板的标题。
3、getDom方法-获得DOM节点
getDom方法能够得到文档中的DOM节点,该方法中包含一个参数,该参数可以是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节点对象。
4、getBody方法-得到文档的body节点元素(Element)。
该方法直接得到文档中与document.body这个DOM节点对应的ExtJS元素(Element),
实质就是把document.body对象封装成ExtJS元素对象返回,该方法不带任何参数。比如下面的代码把面板h直接渲染到文档的body元素中。
Ext.onReady(function(){
var h=new Ext.Panel({title:"测试",width:300,height:200});
h.render(Ext.getBody());
});
5、getDoc方法-获得与document对应的Ext元素(Element)
getDoc方法实质上就是把当前html文档对象,也就是把document对象封装成ExtJS的Element对象返回,该方法不带任何参数。
3.构建一个符合以下条件的ExtJS UI。
条件说明:显示一个宽600、高300的window, window为模式窗口,并且不能改变其大 小及不能移出viewport外。在window下为3个选项面板,默认打开第2个面板,每个选项 面板中放若干个field,要求自少有一个面板中的field放在fieldset中。
[img][/img]
[img][/img]
[img][/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
- 大小: 57.7 KB
- 大小: 8.6 KB
- 大小: 2.5 KB
分享到:
相关推荐
以下是对"Vue面试常问30问30答"中可能涉及的知识点的详细解释: 1. **Vue的安装与初始化** - Vue可以通过CDN链接、本地文件引入或使用npm安装。 - 初始化Vue实例时,可以设置el(挂载元素)、data(数据对象)、...
在这个"我写的几个DOM4J的入门例子"中,我们可以看到一系列的示例,涵盖了XML文件的读取和写入等基本操作。 1. **XML读取**: - `books.xml`、`sql.xml`、`data.xml`、`xml002.xml`和`xml003.xml`这些文件很可能是...
Vue.js 是一个流行的前端JavaScript框架,用于构建用户界面。Vue2.x 和 Vue3.x 都提供了组件化开发、数据绑定和指令系统等特性,但在设计和实现上有所不同。以下是Vue2.x和Vue3.x面试中可能遇到的一些常见知识点: ...
在这个过程中,它会构建一个JavaScript对象,这个对象代表了真实的DOM元素,但不会立即与实际DOM交互,我们称之为虚拟DOM。 - 如果`config`包含`__self`和`__source`,它们会被移除,因为它们在生产环境中不被使用...
删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点...
在前端开发领域,Real DOM(真实DOM)和Virtual DOM(虚拟DOM)是两个重要的概念,尤其是在React等现代JavaScript库中广泛使用。理解这两者之间的差异和优缺点对于优化前端性能至关重要。 一、什么是Real DOM和...
在实际开发中,DOM4J常用于XML配置文件的读取、XML数据的交换、XML文件的生成等场景。例如,在Web服务开发中,它可以用来解析WSDL文件;在Spring框架中,用于读取和处理配置文件;在数据持久化领域,如Hibernate,它...
"前端大厂最新面试题-Dom" DOM(Document Object Model)是 HTML 和 XML 文档的编程接口,它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构、样式和内容。任何 ...
DOM 首页 DOM 简介 DOM 节点 DOM 节点树 DOM 节点访问 DOM 节点信息 DOM How To DOM 参考 DOM 总结 DOM 实例 DOM 实例 DOM 对象 DOM Window DOM Navigator DOM Screen DOM History DOM Location DOM ...
如何获取dom?为什么使用key?v-if和v-for的优先级?
8. **与Spring框架集成**:在Spring框架中,DOM4J常用于配置文件的解析,例如Spring的bean定义XML文件。 DOM4J的版本迭代带来了许多改进和新特性,例如从1.6.1到2.1.1的过程中,可能包含了性能优化、API调整、错误...
DOM Inspector是Mozilla Firefox的一个扩充套件,官方中文版上称之为DOM观察器,在安装Mozilla Firefox时,可以在自订安装中选择是否安装DOM Inspector,如果在安装Mozilla Firefox时没有选择自订安装以安装DOM ...
在实际开发中,DOM4J常用于读取配置文件、解析XML格式的数据交换,或者与Web服务交互。由于其优秀的性能和丰富的功能,DOM4J 1.6.1版本至今仍被许多开发者所采用,特别是在那些需要高效处理XML的项目中。 总之,DOM...
在选择DOM、SAX、JDOM或DOM4J时,主要考虑以下几个因素:1) 对性能的需求,大型文档可能更适合SAX或DOM4J的流处理模式;2) 对编程简便性的要求,DOM和JDOM通常更容易上手,而SAX需要编写更多的事件处理代码;3) 是否...
"WEB中截屏某一个DOM"的技术就是实现这一功能的方法。它允许我们捕获页面上指定ID或具有特定属性的DOM元素,并将其转化为图像。这种技术广泛应用于用户交互、页面分享、自动化测试等多个场景。 首先,我们要理解DOM...
DOM将整个文档视为一个由节点组成的树形结构,其中每个节点代表文档的一部分,如元素、属性、文本等。通过DOM,我们可以方便地对文档进行读取、修改和操作。 在DOM中,每个节点都有其特定的类型,例如元素节点、...
1. **元素节点**:每个HTML或XML标签都对应一个DOM节点,可以被JavaScript引用和操作。 2. **属性节点**:节点可以有自己的属性,比如HTML元素的`id`、`class`等,可以通过DOM获取和修改。 3. **事件处理**:DOM支持...
为了进一步优化这个DOM树的实现,可以考虑以下几点: 1. 使用更高效的解析器:例如,使用词法分析和语法分析技术,如LL(1)或LR(1)解析,或者采用现有的开源解析库,如pugixml或 RapidXML。 2. 错误处理:增强对不...