ext面试会问什么

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Sukla/article/details/80371733

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、待续。。。





展开阅读全文

没有更多推荐了,返回首页