EXT--当defaultType与items的子组件默认xtype冲突时items的子组件的xtype为panel
示例图

直接看下面示例代码:
/**
* 获取导入表单
* @returns {Ext.FormPanel}
*/
function getImportForm() {
return new Ext.FormPanel({
//...
defaults : {
labelWidth : 70,
labelAlign : 'right',
defaultType : 'textfield'//子组件的默认类型
},
items : [{//xtype为panel(默认)
columnWidth : 1,
layout : 'form',
border : true,
bodyBorder : true,
bodyStyle : 'border:1px solid red', items : [{
xtype : 'label',
text : '注意:导入模板中的域名必须为二级域名并在域名库中存在,否则将忽略不记'
}, {//xtype为textfield
fieldLabel : '选择文件',
inputType : 'file',//input字段的type属性,诸如 radio、text、password、file等的元素都有type属性。
name : 'files',
size : '1'
}]
}]
});
}
上面的代码是一个返回Ext.FormPanel的函数,其中在Ext.FormPanel中定义了defaults,里面有一个defayltType : 'textfield' ,它定义了子组件的默认的xtype,但接下来在配置items时,items的子组件的xtype默认的是panel(参加官方API http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.form.FormPanel),那么items的子组件的xtype到底是defaultType定义的'textfield'还是items默认指定的'panel'?下面在debug中我们来看一下:

上面的信息明确显示了items这个唯一的子组件的defaultType是'textfield'--是不是说它的xtype就是'textfield'呢?接下来我们调用其getXType()的方法却发现不是这样:

这个方法返回的信息应该是准确的,现在我们可以测试一下:将它的xtype指定为textfield
/**
* 获取导入表单
* @returns {Ext.FormPanel}
*/
function getImportForm() {
return new Ext.FormPanel({
//..
items : [{//xtype为panel(默认)
xtype : 'textfield',//test
//...
}]
});
}
测试结果:失败

现在我们在换回默认的指定:panel
/**
* 获取导入表单
* @returns {Ext.FormPanel}
*/
function getImportForm() {
return new Ext.FormPanel({
//..
items : [{//xtype为panel(默认)
xtype : 'panle',//test
//...
}]
});
}
测试结果:正常

这说明items的子组件的xtype是panel。其实想想也对,这个formPanel的items的子组件下面还嵌套2个子组件呢--怎么可能是textfield呢?
结论:当defaultType与items的子组件默认xtype冲突时items的子组件的xtype为panel(当然,这是在items的子组件的xtype未指定的情况下)。
EXT--当defaultType与items的子组件默认xtype冲突时items的子组件的xtype为panel的更多相关文章
- vue组件之间的通信以及如何在父组件中调用子组件的方法和属性
在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> < ...
- Vue父组件向子组件传递一个动态的值,子组件如何保持实时更新实时更新?
原文:https://blog.csdn.net/zhouweixue_vivi/article/details/78550738 2017年11月16日 14:22:50 zhouweixue_vi ...
- Vue父组件传递异步获取的数据给子组件
问题场景: 当父组件传给子组件的数据是在父组件中异步获取的时候,如何让子组件获取期望的值? 在父组件中: 首先在data()中定义data_detail为空: data(){ data_detail: ...
- uni-app 父组件引用子组件时怎么调用子组件的方法
1.写一个简单的子组件main/index.vue: <template> <view> </view> </template> <script& ...
- 安卓开发笔记——Menu菜单组件(选项菜单,上下文菜单,子菜单)
菜单是用户界面中最常见的元素之一,使用非常频繁,在Android中,菜单被分为如下三种,选项菜单(OptionsMenu).上下文菜单(ContextMenu)和子菜单(SubMenu). 菜单的实现 ...
- 042——VUE中组件之子组件使用$on与$emit事件触发父组件实现购物车功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 父组件向子组件传值,传方法,传父组件整体
父子组件传值 1.父组件调用子组件时绑定属性,例如-> :title="title" 2.子组件中在props中声明title:props:['title','msg'] 3 ...
- vue.js组件之j间的通讯一 子组件接受父祖件数据
Vue2.0的三种常用传值方式.父传子.子传父.非父子组件传值 在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来.这时必然会产生一些疑问和需求?比如一个组件 ...
- 42.VUE学习之--组件之子组件使用$on与$emit事件触发父组件实现购物车功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- CSS之拖拽1
PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化. clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动 到的 ...
- Linux 文件及文件夹权限
普及 linux 基础知识,Linux 文件及文件夹权限,不要动不动就 777 权限.网上教程过于复杂啰嗦,简单总结如下...一.查看 Linux 文件权限 ls -l (通用)ll (Ubuntu适 ...
- JavaScript学习笔记 - 进阶篇(2)- 数组
什么是数组 我们知道变量用来存储数据,一个变量只能存储一个内容.假设你想存储10个人的姓名或者存储20个人的数学成绩,就需要10个或20个变量来存储,如果需要存储更多数据,那就会变的更麻烦.我们用数组 ...
- jquery的clone方法 于textarea和select的bug修复
在使用jquery的clone方法时,textarea和select的值clone的时候会丢掉,这可能是这个方法的一个BUG.解决办法就是在clone的时候将val再重新赋值一下. 引入到你要用的cl ...
- 20141104--SQL,查询习题,约束
--创建学生信息表:学号,姓名,班级,性别,语文教师,数学教师,英语教师 --创建一个教师表:编号,姓名,课程,性别,出生日期 --创建一个分数表:语文,数学,外语,学号 --查询 语文成绩最高的学生 ...
- 精美jQuery插件及源码 前端开发福利
jQuery是一个非常不错的javascript框架,很多前端开发者喜欢的原因不仅是因为jQuery使用起来方便,更重要的是因为它的插件很多,我们可以将这些插件应用到自己的项目中去.下面这些精美的jQ ...
- THREE.js代码备份——线框cube、按键、鼠标控制
<!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - g ...
- 14.Apache配置
环境: ↗ atl.example.com (192.168.1.101) ↗ www.e ...
- 《shell下sort排序命令的使用》
首先建立一个文件,很乱,没有规律: 正排序: 倒排序: Uniq 删除文件中的重复行:用此命令要先对文件进行排序. 对文件冗余,只要文件所有重复的字符显示一次: 显示1-7,不重复的行: 只显示1-7 ...
- 在 linux x86-32 模式下分析内存映射流程
前言 虚拟内存机制已经成为了现代操作系统所不可缺少的一部分, 不仅可以为每个程序提供独立的地址空间保证安全性,更可以通过和磁盘的内存交换来提高内存的使用效率.虚拟内存管理作为linux 上的重要组成部 ...