ExtJS 技术笔试试题（含详细答案）

ExtJS技术笔试试题（含详细答案）适用场景：前端开发面试、内部技术考核、ExtJS框架基础进阶测评题型分值：选择题（30分）、填空题（20分）、简答题（30分）、代码实操题（20分），总分100分考试时长：60分钟一、单项选择题（共10题，每题3分，共30分）1.ExtJS中所有组件的顶级父类是以下哪一个？（）A.Ext.PanelB.Ext.ComponentC.Ext.BaseD.Ext.View2.以下哪种布局适合实现容器内组件自适应铺满整个容器的效果？（）A.border布局B.fit布局C.hbox布局D.vbox布局3.Ext.data.Store的核心作用是？（）A.页面组件渲染B.数据缓存、加载与管理C.页面路由跳转D.样式统一管理4.Grid表格中，实现单元格编辑功能必须配置的属性是？（）A.editable:trueB.cellEditor:trueC.plugins:[cellediting]D.edit:true5.ExtJS中监听组件点击事件，最规范的配置方式是？（）A.onclickB.listenersC.clickEventD.event6.以下不属于ExtJS常用Ajax请求方法的是？（）A.Ext.Ajax.requestB.Ext.getC.Ext.postD.Ext.loadData7.border布局中，必须存在的区域是？（）A.northB.centerC.southD.west8.Ext.form.field.Text组件中，限制输入最大字符数的属性是？（）A.maxLengthB.maxSizeC.limitLengthD.lengthMax9.Store中异步加载后台数据的核心方法是？（）A.loadData()B.reload()C.load()D.refresh()10.ExtJS中获取页面DOM元素的常用方法是？（）A.Ext.dom()B.Ext.get()C.Ext.find()D.Ext.query()二、填空题（共5题，每题4分，共20分）1.ExtJS组件创建的两种核心方式：_________和_________。2.hbox布局用于_________排列组件，vbox布局用于_________排列组件。3.Ext.data.Model的核心作用是定义数据的_________、字段类型及校验规则。4.Grid表格中，_________属性可以开启表格行双击事件监听。5.Ext.form.Panel表单提交数据的核心方法是_________。三、简答题（共3题，每题10分，共30分）1.简述ExtJS中Store、Model、Grid三者的关系。2.对比fit布局和border布局的适用场景，说明核心区别。3.简述ExtJS表单提交中submit()和getForm().submit()的区别。四、代码实操题（共1题，20分）请编写一段完整可运行的ExtJS代码，实现以下功能：1.创建一个窗口（Window），宽800px、高500px，可拖拽、可关闭；2.窗口内使用border布局，分为顶部标题栏、中间表格区域、底部按钮区域；3.中间区域创建简单Grid表格，包含姓名、年龄、性别三列，绑定本地模拟数据；4.底部放置【刷新数据】【关闭窗口】两个功能按钮。参考答案（详细解析）一、单项选择题答案及解析1.答案：C解析：Ext.Base是ExtJS所有类的顶层基类，所有组件、工具类都继承自该类；Ext.Component是所有可视化组件的父类，并非全局顶级父类。2.答案：B解析：fit布局唯一作用就是让子组件完全铺满父容器，且父容器只能有一个直接子组件；border为分区布局，hbox/vbox为流式排列布局。3.答案：B解析：Store是ExtJS的数据仓库，专门负责数据的请求、缓存、分页、筛选、绑定组件渲染，不负责页面渲染和样式处理。4.答案：C解析：Grid单元格编辑需要依赖cellediting插件，必须在plugins中注册插件才能生效，单纯配置editable属性无法实现编辑功能。5.答案：B解析：ExtJS所有组件的事件监听统一通过listeners配置项实现，onclick是原生DOM事件，不符合ExtJS规范写法。6.答案：D解析：Ext.Ajax.request、Ext.get、Ext.post均为框架原生请求方法，Ext.loadData是Store加载本地数据的方法，并非Ajax请求方法。7.答案：B解析：border布局必须包含center区域，center区域为核心显示区域，north、south、east、west均为可选区域。8.答案：A解析：文本框组件通过maxLength限制最大输入字符数，是ExtJS表单组件标准属性，无其他三个配置项。9.答案：C解析：store.load()用于异步请求后台接口加载数据；loadData()加载本地静态数据；reload()重新加载当前页码数据。10.答案：B解析：Ext.get()用于根据ID获取单个DOM元素；Ext.query()用于批量查询DOM节点，是最常用的单个元素获取方法。二、填空题答案1.Ext.create()、new组件名()2.水平、垂直3.字段结构4.itemdblclick5.submit()三、简答题详细答案1.Store、Model、Grid三者关系三者是数据定义-数据管理-数据展示的闭环关系：（1）Model是数据模型，负责定义数据字段名称、数据类型、默认值、校验规则，是数据的模板；（2）Store依赖Model创建，是数据容器，负责通过Ajax请求后台数据、缓存数据、分页、筛选排序，统一管理所有表格数据；（3）Grid是可视化展示组件，绑定Store数据源，将Store中缓存的数据以表格形式渲染到页面，所有表格数据更新、刷新都依赖Store。2.fit布局与border布局核心区别及适用场景核心区别：（1）fit布局：父容器仅支持一个直接子组件，子组件自适应铺满父容器，无分区概念；（2）border布局：支持多区域分区展示，分为north、south、east、west、center五个区域，每个区域可放置独立组件，区域大小可固定或自适应。适用场景：fit布局：弹窗内嵌单一表格、表单全屏展示等需要铺满效果的场景；border布局：后台管理主页面、分区展示页面（顶部导航、左侧菜单、中间内容、底部状态栏）。3.submit()和getForm().submit()区别（1）getForm().submit()：获取表单的BasicForm对象后提交，会自动触发表单校验（非空、格式校验等），校验不通过则不提交；会自动收集表单所有字段数据，是标准的表单提交方式；（2）组件.submit()：直接调用表单面板的提交方法，不会执行完整的表单校验，部分表单配置失效，数据收集不完整，属于不规范写法；日常开发中统一使用getForm().submit()提交表单。四、代码实操题参考答案（可直接运行）javascript

//初始化ExtJS页面

Ext.onReady(function(){

//定义模拟数据

varuserData=[

{name:"张三",age:25,gender:"男"},

{name:"李四",age:28,gender:"女"},

{name:"王五",age:30,gender:"男"}

];

//创建数据仓库

varuserStore=Ext.create('Ext.data.Store',{

fields:['name','age','gender'],

data:userData

});

//创建窗口

Ext.create('Ext.window.Window',{

title:'ExtJS表格实操窗口',

width:800,

height:500,

layout:'border',//边框布局

draggable:true,//可拖拽

closable:true,//可关闭

resizable:false,

//窗口子组件

items:[

//顶部标题区域

{

region:'north',

height:40,

html:'<divstyle="text-align:center;line-height:40px;font-size:16px;font-weight:bold">用户信息表格展示</div>'

},

//中间表格区域

{

region:'center',

xtype:'grid',

store:userStore,

columns:[

{text:'姓名',dataIndex:'name',flex:1},

{text:'年龄',dataIndex:'age',flex:1},

{text:'性别',dataIndex:'gender',flex:1}

]

}

],

//底部按钮工具栏

bbar:[

'->',//右对齐占位符

{

text:'刷新数据',

handler:function(btn){

//重新加载本地模拟数据

userStore.loadData(userData);

Ext.Msg.alert('提示','数据刷新成功！');

}

},

{

text:'关闭窗口',

handler:function(btn){

btn.up(