EXT 面试题及详细答案（实战口语版）

EXT面试题及详细答案（实战口语版）一、EXT基础核心题1、简单说说你对EXT的整体理解，它的核心优势是什么？参考答案：EXT是一套基于JS的富客户端UI框架，主打企业级后台管理系统开发，封装了大量成熟的表格、表单、弹窗、树、布局等组件。核心优势主要有四点：1、组件齐全，开箱即用，后台常用功能基本都有封装，不用重复造轮子；2、UI统一规整，兼容性好，适配IE等老旧浏览器，适配传统政企项目场景；3、面向组件化、面向对象编程，代码结构清晰，复用性高；4、自带完整的布局系统、数据绑定、表单校验、异步请求封装，开发后台系统效率很高。2、EXT中Ext.onReady的作用是什么？参考答案：它是EXT页面的入口方法，作用是等待页面DOM加载完成、EXT框架资源初始化完毕后，再执行内部代码。如果不写这个方法，直接执行EXT代码，很可能出现DOM未加载、组件未初始化的报错，比如找不到节点、组件渲染失败。所有页面初始化的组件创建、页面渲染逻辑，基本都写在这个方法内部。3、EXT中define和require的区别是什么？参考答案：1、Ext.define：用来定义组件/自定义类，是创建类的语法，可以继承原有组件、扩展自定义方法和属性，属于定义模块；2、Ext.require：用来引入依赖模块，只负责加载需要的组件、类库，不创建新类，属于引用模块。简单说：define是造轮子，require是用轮子。项目中自定义公共组件用define，页面使用组件时用require引入依赖。二、EXT组件与布局专题4、EXT常用的布局方式有哪些？各自适用场景？参考答案：我日常开发中最常用的五种布局：1、border边界布局：最常用的后台布局，分为北、南、西、东、中五个区域，适合整体页面框架，比如顶部导航、左侧菜单、中间主内容区；2、fit自适应布局：子组件铺满父容器，父容器大小变化，子组件自动适配，适合弹窗、卡片、单独表格页面；3、hbox水平布局：子组件横向排列，适合一行多个按钮、输入框、表单行布局；4、vbox垂直布局：子组件纵向排列，适合多行表单、列表垂直排布场景；5、column列布局：按列宽度百分比布局，适合多列表单、多列数据展示页面。5、EXT组件的render渲染过程简单说一下？参考答案：首先初始化组件的配置参数、默认属性，然后创建组件对应的DOM结构，接着绑定组件的事件、样式、数据，最后挂载到指定的页面容器中，完成渲染。需要注意的是：组件没渲染完成时，不能操作DOM和部分组件方法，所以很多操作要写在afterrender事件里，保证组件渲染完毕再执行逻辑。6、EXT如何实现组件显示和隐藏？两种方式区别？参考答案：常用两个方法：show()/hide()和setVisible()，效果基本一致，都是控制组件显隐。细微区别：show、hide是简写方法，内部本质还是调用setVisible；setVisible可以传布尔值，适合动态判断显隐的场景，代码更灵活。另外隐藏分两种：一种是占位隐藏（组件位置保留），一种是不占位，通过配置hidden属性实现，项目中默认都是占位隐藏。三、EXT表单与校验7、EXTForm表单常用核心配置和方法有哪些？参考答案：常用配置：labelAlign标签对齐、labelWidth标签宽度、allowBlank是否为空、maxLength最大长度、regex正则校验。常用方法：1、getForm().loadRecord()：加载数据到表单，回填详情数据；2、getForm().submit()：表单提交，自带异步请求、参数封装；3、getForm().isValid()：校验表单是否全部通过规则；4、getForm().reset()：重置表单，清空输入、清除校验提示。8、EXT自定义表单校验怎么实现？参考答案：两种常用方式：1、正则校验：通过regex配置正则表达式，搭配invalidText配置错误提示，适合手机号、身份证、邮箱、数字等常规校验；2、自定义校验函数：通过validator配置回调函数，自定义校验逻辑，比如两次密码一致、字段长度特殊规则、动态校验等复杂场景，返回true校验通过，返回字符串就是错误提示。四、EXTGrid表格高频考点9、EXTGrid的核心组成部分有哪些？参考答案：主要由四部分组成：1、store数据集：表格的数据源，负责请求后台、存储数据、分页、筛选，是表格的核心；2、column列配置：定义每一列的字段名、标题、宽度、渲染格式、编辑状态；3、model数据模型：定义数据字段类型、默认值、映射关系；4、view视图：控制表格渲染样式、行样式、空数据展示等。10、Grid表格刷新数据有哪几种方式？区别是什么？参考答案：1、store.reload()：重新请求后台接口，刷新最新数据，保留当前页码、筛选条件，日常查询、刷新按钮首选；2、store.load()：重新加载数据，会重置页码为第一页，适合条件查询、重置筛选场景；3、grid.getView().refresh()：只刷新前端视图，不会请求后台，只修改前端本地数据展示，性能最快。11、Grid单元格自定义渲染renderer怎么用？常用场景？参考答案：renderer是列的渲染回调函数，可以对单元格数据进行二次处理。常用场景：1、状态转换：比如0/1转换成禁用/启用、是/否；2、样式美化：根据状态展示不同颜色字体、标签样式；3、拼接内容：拼接操作按钮、拼接文本提示；4、空值处理：数据为空时展示“无”“暂无数据”。12、EXTGrid分页功能如何实现？参考答案：1、store中配置pageSize每页条数；2、后台接口接收page、limit参数，返回总条数total、当前页数据列表；3、表格底部绑定PagingToolbar分页工具栏，绑定对应的store；4、分页工具栏会自动携带分页参数请求数据，自动渲染页码、总条数、跳转功能。五、EXT事件与交互13、EXT绑定事件的方式有几种？参考答案：三种常用方式：1、组件配置中直接写listeners事件配置，适合组件初始化时绑定事件；2、组件创建后用on()方法动态绑定事件，适合后续动态添加事件逻辑；3、自定义事件，通过fireEvent触发、on监听，适合组件之间传值、交互。14、EXT事件冒泡怎么处理？如何阻止默认事件？参考答案：在事件回调函数中，通过事件参数调用stopEvent()方法，既可以阻止事件冒泡，也可以阻止浏览器默认行为，日常开发直接用这个方法即可，简单高效。六、EXT异步请求与数据处理15、EXT.Ajax常用请求方式和核心参数？参考答案：常用Ext.Ajax.request统一请求，支持get、post方式。核心参数：1、url：请求接口地址；2、method：请求方式GET/POST；3、params：请求参数；4、success：请求成功回调；5、failure：请求失败、超时、报错回调；6、async：是否异步，默认true。16、store加载数据load和loadData的区别？参考答案：1、store.load()：主动请求后台接口，从服务端获取数据，是异步请求，常用于表格查询、分页刷新；2、store.loadData()：加载本地前端数据，不会请求后台，直接把前端定义好的数组数据渲染到表格，适合静态数据、模拟数据、前端处理后的数据回填。七、EXT项目实战与性能优化17、EXT页面卡顿、加载慢的常见原因和优化方案？参考答案：常见原因：表格一次性渲染数据过多、组件重复创建、未销毁闲置组件、重复请求接口、递归渲染冗余DOM。优化方案：1、表格必须做分页，禁止一次性加载全部数据；2、页面关闭、弹窗关闭时销毁组件，避免内存堆积；3、接口做防抖、节流，避免重复点击重复请求；4、复用公共组件，避免重复创建相同组件实例；5、精简列渲染逻辑，renderer中不写复杂循环和耗时操作。18、EXT如何避免组件重复渲染、重复创建？参考答案：1、页面初始化做组件判断，如果组件已存在，直接显示，不重新new创建；2、弹窗、子页面关闭时只隐藏不销毁，下次直接复用实例；3、使用card卡片布局切换页面，只切换显示隐藏，不重复渲染DOM；4、封装公共组件，全局复用，减少重复实例化。八、EXT高频面试场景题19、表格选中多行数据，批量删除如何实现？参考答案：1、通过grid.getSelectionModel().getSelection()获取所有选中行数据；2、循环遍历选中数据，拿到每条数据的主键ID；3、把ID数组传给后