`

透析Extjs源码之layout(二)FormPanel与FormLayout的关系

EXT 
阅读更多

理解了layout之后,再看看FormPanel源码,发现它指定了layout:'form',而FormPanel又是Container的子孙类,所以,它就是用了FormLayout布局。只是通过FormPanel,将FormLayout所需要的配置都做了些初始化提取出来了,便于开发者使用和理解。所以,在FormPanel渲染后就会用FormLayout来进行doLayout功能。
所以写成下面两种方式的代码,效果是一样的:
一、用FormPanel

Js代码 复制代码
  1. Ext.onReady(function(){   
  2.     var panel = new Ext.FormPanel({   
  3.         renderTo:'hello',   
  4.         title:'容器组件',   
  5.         width:300,   
  6.         hideLabels:false,   
  7.         labelAlign:'right',   
  8.         height:120,   
  9.         defaultType:'textfield',   
  10.         items:[{   
  11.             fieldLabel:'请输入姓名',   
  12.             name:'name'  
  13.         },{   
  14.             fieldLabel:'请输入地址',   
  15.             name:'address'  
  16.         },{   
  17.             fieldLabel:'请输入电话',   
  18.             name:'tel'  
  19.         }]   
  20.     });   
  21. });  
Ext.onReady(function(){
	var panel = new Ext.FormPanel({
		renderTo:'hello',
		title:'容器组件',
		width:300,
		hideLabels:false,
		labelAlign:'right',
		height:120,
		defaultType:'textfield',
		items:[{
			fieldLabel:'请输入姓名',
			name:'name'
		},{
			fieldLabel:'请输入地址',
			name:'address'
		},{
			fieldLabel:'请输入电话',
			name:'tel'
		}]
	});
});



二、只指定layout:'form'

Js代码 复制代码
  1. Ext.onReady(function(){   
  2.     var panel = new Ext.Panel({   
  3.         renderTo:'hello',   
  4.         title:'容器组件',   
  5.         width:300,   
  6.         layout:'form',   
  7.         hideLabels:false,   
  8.         labelAlign:'right',   
  9.         height:120,   
  10.         defaultType:'textfield',   
  11.         items:[{   
  12.             fieldLabel:'请输入姓名',   
  13.             name:'name'  
  14.         },{   
  15.             fieldLabel:'请输入地址',   
  16.             name:'address'  
  17.         },{   
  18.             fieldLabel:'请输入电话',   
  19.             name:'tel'  
  20.         }]   
  21.     });   
  22. });  
分享到:
评论

相关推荐

    ExtJs源码

    extjs 源码,有兴趣的可以学习下

    ExtJS3.0 源码分析与开发实例宝典

    ExtJS3.0 源码分析与开发实例宝典

    ExtJS源码分析与开发实例宝典

    资源名称:Ext JS源码分析与开发实例宝典内容简介:本书全面系统地剖析了ExtJS 3.0的架构设计原理。通过对源码的“抽丝剥茧”,读者可以掌握Ext JS架构的精妙,从原理层面用活Ext JS。此外,本书还提出了大量的解决...

    ExtJS源码分析与开发实例宝典4.pdf

    这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...

    ExtJS源码分析与开发实例宝典2.pdf

    这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...

    ExtJS源码分析与开发实例宝典0.pdf

    这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...

    extjs 源码

    extjs 3 源码,包含文档,代码示例

    ExtJS源码分析与开发实例宝典1.pdf

    这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...

    extJS myeclipse源码示例

    extJS myeclipse源码示例

    ExtJS源码分析与开发实例宝典完整版

    ExtJS源码分析与开发实例宝典完整版 1、JS画图部分代码在IE8上看不到效果,因为IE8不支持VML。 2、扩展的组件为作者独立完成,仅供学习之用,一些组件并没有经过严格的测试。 如果需要用到项目之中,请自行测试。 ...

    Extjs源码之--Ext事件机制/继承关系

    NULL 博文链接:https://lovebeyond.iteye.com/blog/1197784

    extjs源码及API

    extjs下载 extjs源码 extjsApi,全部包括在这里面

    extjs 的 源码包

    一个extjs的源码包.其中包括extjs的例子和文档.

    ExtJS源码分析与开发实例宝典光盘源码.zip

    《ExtJS源码分析与开发实例宝典》是一本不错的关于ExtJS开发实践的教程,特附上源码,与各位共享,谢谢。

    EXTJS 源码3.4

    extjs源码3.4 里面有其他JS,直接调用就行

    ExtJS源码分析与开发实例宝典第二部分

    ExtJS源码分析与开发实例宝典第二部分

    Extjs教程源码

    Extjs教程源码 介: ***************第一部分基础知识**************** 第一讲: EXTJS4.0概述和HelloWorld程序 第二讲: EXTJS4.0的新特性 第三讲: EXTJS4.0数据模型——Model 第四讲: EXTJS4.0的数据代理——Proxy ...

    ExtJS源码分析与开发实例宝典.part07(带书签)

    Ext+JS源码分析与开发实例宝典 是extjs3.0的学习书 书得内容很不错。深入解析extjs 资源是pdf文档. 本人自己还做了pdf的完整书签目录,便于方便和阅读. 文档比较大,一共压缩成12卷.需12卷全部下载完。 就第一个...

    ExtJs源码分析与学习—ExtJs核心代码(一)

    NULL 博文链接:https://linder0209.iteye.com/blog/865372

    Extjs4 layout 布局

    用extjs4搭的一个简单布局框架

Global site tag (gtag.js) - Google Analytics