ExtJS 面试题及详细答案（实战完整版）

ExtJS面试题及详细答案（实战完整版）一、基础概念类1、简单说说你对ExtJS的理解，它的核心特点是什么？参考答案：ExtJS是一套基于JavaScript的前端富客户端UI框架，主打企业级后台管理系统开发，配套完整的组件库、数据模型、布局系统和异步交互能力，不用自己从零写DOM和样式。核心特点主要有这几点：组件化开发：页面全部由各类组件构成，按钮、表格、表单、弹窗等都是封装好的组件，可直接复用、继承、扩展。完整布局系统：自带border、fit、hbox、vbox、anchor等多种布局，适配后台页面分栏、嵌套布局需求。数据驱动视图：通过Store、Model管理数据，视图和数据绑定，数据变更后视图自动更新，不用手动操作DOM。跨浏览器兼容：框架内部做了浏览器兼容处理，早期IE系列也能正常运行，适合老旧企业项目。面向对象编程：基于JS面向对象思想，支持类定义、继承、重写、混入，代码结构规整，适合大型项目维护。2、ExtJS中Ext.define和Ext.create的区别？参考答案：Ext.define：用于定义类，相当于声明一个自定义组件/工具类，可以继承原有组件、自定义属性和方法，只会执行一次，是类的声明过程。Ext.create：用于实例化类，根据已经定义好的类创建具体对象、渲染到页面，每次执行都会生成一个新实例。简单总结：先define定义类，再create生成实例。日常开发自定义组件用define，页面使用组件用create。3、ExtJS中xtype的作用是什么？参考答案：xtype是ExtJS给所有内置组件和自定义组件设置的组件别名，核心作用是简化代码、延迟渲染、提升性能。使用xtype不需要写Ext.create，直接配置字符串即可，框架会自动根据别名实例化组件。同时xtype是懒加载模式，只有组件需要渲染时才会创建实例，减少页面初始化开销。示例：PlainText

{

xtype:'textfield',

fieldLabel:'用户名'

}二、布局系统类（高频面试）4、说说ExtJS常用的布局及适用场景？参考答案：fit布局：自适应填充布局，父容器只会放一个子组件，子组件自动铺满父容器，常用于卡片面板、全屏表格。border布局：经典后台布局，分为north、south、west、east、center五个区域，center区域自动占剩余空间，绝大多数后台首页、主界面都用这个布局。hbox水平布局：子组件水平排列，可设置flex比例分配宽度，适合一行多按钮、多输入框的场景。vbox垂直布局：子组件垂直排列，通过flex分配高度，适合表单纵向排布、列表垂直布局。anchor锚点布局：子组件相对于父容器按比例自适应，适配窗口缩放，常用在简单表单页面。card卡片布局：多个组件同一位置切换展示，一次只显示一个，适合步骤表单、标签切换页面。5、border布局中center区域必须设置吗？有什么特点？参考答案：必须设置。border布局的核心就是center区域，north、south、west、east都是辅助区域，center会自动填充页面剩余空白空间，且center区域不能设置宽高，宽高由父容器和其他区域自动计算。三、数据层Store/Model核心6、ExtJS中Model、Store、Proxy的关系是什么？参考答案：三者是层层依赖的关系，构成ExtJS完整的数据请求和管理体系：Model（数据模型）：定义数据结构，包含字段名、字段类型、默认值、校验规则、映射关系，相当于后端实体类。Store（数据仓库）：数据的容器，负责承载多条Model数据，提供增删改查、排序、分页、筛选功能，表格、下拉框等组件的数据都来源于Store。Proxy（代理）：数据请求的媒介，分为内存代理、ajax代理、本地存储代理，负责和后端接口交互，完成数据加载和提交。执行流程：Proxy请求后端数据->Store接收数据->自动映射为Model实例->视图组件渲染数据。7、Store中load和reload的区别？参考答案：load()：重新加载数据，会重置当前页码为第一页，常用于条件查询、首次加载页面数据。reload()：刷新当前页数据，保留当前页码、分页参数，常用于新增、编辑、删除后刷新页面，不改变当前分页位置。8、Store分页需要配置哪些核心参数？参考答案：需要在Store中开启分页配置，核心参数：pageSize：每页条数proxy中配置pageParam、limitParam、startParam（默认page、limit、start）后端接口需要接收分页参数并返回总条数total前端表格搭配PagingToolbar分页工具栏即可实现分页功能。四、Grid表格高频问题9、ExtGrid中renderer函数的作用？常用场景有哪些？参考答案：renderer是表格列的渲染函数，用于自定义单元格显示内容，可以对原始数据进行加工、格式化、拼接HTML。常用场景：状态转换：0/1转换为禁用/启用、否/是时间格式化：时间戳转为标准年月日时分秒拼接操作按钮：列表行内编辑、删除、详情按钮数据颜色高亮：异常数据标红、正常数据标绿10、Grid行编辑、单元格编辑的实现方式？参考答案：通过插件形式实现，ExtJS自带编辑插件：单元格编辑：引入CellEditing插件，点击单个单元格即可编辑，适合少量字段快速修改。行编辑：引入RowEditing插件，点击整行触发编辑，弹窗式行内编辑，适合多字段批量修改。核心要点：表格列配置editor编辑组件，开启插件后才能编辑，编辑完成后调用store.sync()提交数据到后端。11、Grid数据刷新后滚动条回到顶部怎么解决？参考答案：这是项目中常见的问题，Storereload后表格会重置滚动位置。解决方案是刷新前记录滚动位置，刷新完成后还原：监听storeload事件，加载完成后获取表格滚动视图，设置scrollTo还原滚动位置；也可以通过配置viewConfig的preserveScrollOnRefresh为true保留滚动位置。五、Form表单相关12、Ext表单getValues()和getFieldValues()的区别？参考答案：getValues()：获取表单所有字段值，包含隐藏字段、禁用字段，返回纯文本数据，适合表单整体提交。getFieldValues()：只获取启用、可见、有效的字段值，过滤掉禁用、隐藏、未校验通过的字段，适合局部数据获取。13、表单提交loadRecord和setValues的区别？参考答案：setValues：单纯赋值，只修改表单显示值，不绑定数据模型，不会记录原始数据，提交时直接取当前值。loadRecord：加载Model数据到表单，表单和数据模型双向绑定，会记录原始数据，支持dirty脏值检测，能判断表单是否修改过，适合编辑回显场景。14、Ext表单自定义校验规则怎么实现？参考答案：两种常用方式：字段配置validator自定义校验函数，返回true校验通过，返回字符串则作为错误提示。通过Ext.VTypes全局自定义校验类型，封装正则和提示语，全局复用，适合手机号、邮箱、身份证通用校验。六、事件与组件生命周期15、ExtJS组件的核心生命周期有哪些？参考答案：常用关键生命周期顺序：initComponent：组件初始化，定义内部组件、绑定事件，最常用beforeRender：渲染前触发render：组件渲染完成afterRender：渲染后执行DOM操作show：组件显示destroy：组件销毁日常自定义组件，基本都在initComponent中扩展配置。16、ExtJS事件监听方式有几种？区别是什么？参考答案：三种常用方式：组件配置listeners：声明式绑定，写在组件配置里，结构清晰，适合固定事件。on()绑定事件：动态绑定，页面运行中可随时绑定、解绑，灵活性高。control/listen全局监听：通过组件选择器批量监听，适合页面组件多、统一管理事件的场景。七、异步请求与交互17、Ext.Ajax.request常用核心配置？参考答案：核心配置：url请求地址、method请求方式、params请求参数、success成功回调、failure失败回调、async异步同步、timeout超时时间。日常开发中，查询多用get，提交、新增、编辑多用post，统一在回调中处理弹窗提示、数据刷新。18、如何统一处理ExtJS全局请求异常、登录过期？参考答案：重写Ext.Ajax的onRequestException全局异常拦截，统一捕获接口报错、超时、状态码异常。后端返回登录过期状态码时，前端统一跳转登录页，不用每个接口单独判断，统一项目交互规范。八、性能优化与实战问题（进阶面试）19、ExtJS项目常见的性能优化方式？参考答案：按需渲染、懒加载：使用xtype懒加载，避免页面一次性创建所有组件。分页加载数据：大数据表格禁止一次性加载全部数据，必须分页，减少DOM渲染压力。组件复用、避免频繁销毁重建：弹窗、查询区域组件缓存复用，不要每次打开都重新create。关闭不必要的监听：组件销毁前移除事件监听，防止内存泄漏。精简渲染内容：Grid列减少复杂renderer逻辑，避免循环拼接大量HTML。使用延迟加载：tab页面切换时再加载对应模块数据，初始化只加载当前页面。20、ExtJS内存泄漏常见原因及解决办法？参考答案：常见原因：组件销毁后，事件监听未移除全局变量过多，组件实例未释放定时器、异步请求未销毁解决方式：重写组件destroy方法，清除定时器、解绑自定义事件、清空全局实例引用，使用框架自带的destroy销毁组件，不手动清空DOM。21、自定义组件的步骤是什么？参考答案：通过Ext.define定义自定义类，继承框架原生组件（panel、grid、form等）。配置自定义属性、自定义方法、内部组件结构。重写initComponent初始化生命周期，扩展业务逻辑。配置alias别名（xtype），方便全局调用。页面通过xtype或Ext.create实例化使用。九、面试压轴题22、你项目中ExtJS遇到的最难的问题是什么？怎么解决的？参考答案（面试通用口述版）：项目中主要遇到过大数据量表格卡顿、弹窗多次打开报错、页面刷新滚动条置顶三个典型问题。第一，大数据表格渲染卡顿，最开始是一次性加载全部数据，DOM节点过多导致页面卡顿，后面改成后端分页+前端虚拟滚动，同时