ext面试会问什么

1、说一下你对ext的了解

（：ext是一个用开开发前端页面的框架，包括移动端和PC端，桌面应用等，我主要用来开发PC端

（：使用的是组件化开发，现在的EXT已经有了一个比较成熟的SDK，里面有各种风格的主题包、组件包、工具包

（：开发的时候是使用的SenchaCmd来配合开发、调试、打包等

（：首先使用sencha genrate SDK_PATH app --classic YOUR_APP_NAME YOUR_PROJECT_PATH快速生成一个classic的项目

（：我使用tree做左侧导航，tabpanel做右侧展示，toolbar做页面头部放一些logo和按钮

（：我使用:id来切换路由，将tree的node节点数据设置自定义sid和routestr，sid是唯一的和页面组件的别名alias一一对应

（：当树节点被点击的时候、执行tree的selectchange事件、拿到被selected的节点、然后获取它的sid

（：以拿到的sid作为参数调用路由事件

（：在路由事件的before周期根据传过来的sid去查找tree里面拥有该sid的树节点,取到节点对象，获取对象的自定义routerstr

（：进入路由事件的执行周期，先获取到用来展示内容的tabpanel，然后我是将树的节点的text文本来做tab的标签的文本

（：可以将当前传过来的树节点的text文本去匹配tabpanel已经有的tab标签，如果有的话就将起激活

（：没有的话就在tabpanel生成一个items,配置它的tab为树节点的text文本，配置他的内容页面的xtype为routerstr

（：routerstr就是我们自己约定好的sid对应的组件的类的别名，我们需要根据sid实例化一个sid对应的该类型的组件，把这个组件放到tabpanel中去，并让它激活

（：整个架子就搭起来了，可以按部就班的根据业务来实现代码了

2、你现在用的是什么版本？

（：我用的6.5.3

3、常用的布局是那些

（：我使用最多的是border、hbox、vbox、fit

（：layout:border，上面通栏是region:north,中间是region:west,region:center,region:east,底部通栏是region:sourth

（：region:center不能省略，其它的四个区域可以省略，region:north和region:sourth可以设置height属性

（：region:west和region:east可以设置width

（：layout:hbox,子元素从左往右排列

（：layout:vbox,子元素从上到下排列

（：layout:fit,只显示第一个子元素，不显示其它子元素

（：我在主页面就用的border布局，头部组件放到了region:north里面，tree导航放在了region:west里面，tabpanel放到了region:center里面，没有使用region:east和region:sourth

4、怎么开发组件呢

（：首先看一下要实现的是什么功能，比如说tree导航

（：定义一个类：Ext.define('MyApp.view.TreeNav',{...配置})

（：做一些配置

 {

            extend:'Ext.tree.Panel',//继承EXT的treePanel类，然后在这个基础上做些修改

            alias:'widget.treenav',//我的这个tree的子类的别名，使用的时候直接用即可

            store:'',//一个tree结构的store

            controller:'',//控制器，在里面写钩子对应的方法体,不写的话，可以把方法写到最外层的那个controller里面去

            listeners:{钩子：'触发钩子时的函数名'}，//函数名对应的函数体在controller里面去写

        }

（：然后在对应的位置之前先引入这个类，然后使用这个组件

requires:['MyApp.view.TreeNav'],

{

region:west,//位置

xtype:'treenav',//使用组件实例化一个对象

reference:'first-treenav'//对象的索引，类似id，用于查找这个实例

}

（：在父级controller中可以通过查找这个组件,在组件自生绑定的controller中，this.view就是当前组件自己

var firstTree=this.lookupreference('first-treenav')
//然后可以做一些动作
var store=firstTree.getStore()
store.reload()

5、可以给组件加ui,在{..配置}中加上ui:'tree-ui-xxx'就行,'tree-ui-xxx'是我根据文档中的tree组件的theme重新做的主题

6、可以给组件加上viewModel:{data:{data1:123}},用来管理一些状态,可以在子元素上通过bind:{key:{'data1'}}来双向绑定

{

extend:...,

alias:...,

store:...,

viewModel:{

data:{//放单个数据

data1:123,

data2:456,

...

},

stores:{//放复杂数据

...

}

}

defaults:{//items的公用属性可以抽出来放这里

xtype:'textfield',//文本框

fieldLabel:'label标签'

},

items:[

{

bind:{

value:{'data1'}

}

}

]

}

（：结果应该这个样子 -->label标签:123

7、待续。。。