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 ...
随机推荐
- jQuery中的事件与动画<思维导图>
Javascript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件.例如当浏览器装载完一个文档后,会生成事件. ...
- sql 批量操作(存在的更新,不存在的插入)
标签: sql 2012-09-06 18:13 2408人阅读 评论(0) 收藏 举报 分类: Sql Server(123) 版权声明:本文为博主原创文章,未经博主允许不得转载. update A ...
- PropertyGrid排序
解决PropertyGrid对自定义属性排序的问题. 参考了:http://www.cnblogs.com/greatverve/archive/2012/02/08/propergrid-order ...
- 分享9款用HTML5/CSS3制作的动物人物动画
1.纯CSS3绘制可爱的蚱蜢 还有眨眼动画 今天我们要分享一个利用纯CSS3绘制的蚱蜢动画,非常可爱. 在线演示 源码下载 2.HTML5 Canvas头发飘逸动画 很酷的HTML5动画 HTML5 ...
- Flex设置外部浏览器
Flex Builder默认的外围浏览器是微软 Internet Explorer. 如果想改成Firefox,步骤如下: Window>Preferences>General>We ...
- ZigBee profile
每个ZigBee设备都与一个特定模板相关联,可能是公共模板或私有模板.这些模板定义了设备的应用环境.设备类型以及用于设备间通信的簇.采用公共模板,可以确保不同供应商的设备在相同应用领域的互操作 ...
- if语句代码优化
if($sum==7){ $sz+=135; }elseif($sum==5){ $sz+=80; }elseif($sum==6){ $sz+=97; }elseif($sum==4){ $sz+= ...
- Materialized Views 物化视图 -基础篇
Materialized Views 物化视图 -基础篇 http://blog.csdn.net/elimago/article/details/5404019
- WCF 配置文件(三)
配置文件概述 WCF服务配置是WCF服务编程的主要部分.WCF作为分布式开发的基础框架,在定义服务以及定义消费服务的客户端时,都使用了配置文件的方法.虽然WCF也提供硬编程的方式,通过在代码中直接设置 ...
- linux下配置tomcat7 + solr4.9
一.安装准备 操作系统:CentOS 6.5 tomcat版本:apache-tomcat-7.0.54.tar.gz solr版本:solr-4.9.0.tgz 二.部署实施 安装tomcat:将t ...