`

透析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 源码,有兴趣的可以学习下

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

    在“Extjs源码之--Ext事件机制/继承关系”中,我们将深入探讨EXTJS如何处理事件以及其类层次结构。EXTJS的事件处理主要由EventManager.js这个文件负责,它是EXTJS事件系统的基础。 首先,EXTJS的事件机制基于观察者...

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

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

    extjs 源码

    EXTJS 3.0是其历史版本之一,提供了一套完整的组件模型、数据绑定、布局管理以及丰富的用户界面控件。这个源码包不仅包含了EXTJS 3.0的核心库,还提供了相关的文档和代码示例,这对于开发者深入理解EXTJS的工作原理...

    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源码分析与开发实例宝典1.pdf

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

    extjs中的formPanel以及表单的应用

    FormPanel 是 ExtJS 中的一个核心组件,用于创建和处理表单元素,包括输入字段、按钮、选择框等。它提供了丰富的功能,如数据验证、远程提交、异步加载等,是构建用户交互界面的关键部分。 在ExtJS中,FormPanel是...

    extJS myeclipse源码示例

    extJS myeclipse源码示例

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

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

    extjs源码及API

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

    EXTJS源码分析与开发实例宝典-开发的效果图.rar

    标题"EXTJS源码分析与开发实例宝典-开发的效果图.rar"暗示了书中的内容可能包含了EXTJS的源码解析和实际开发案例,同时还有开发过程中的视觉效果展示,帮助读者更好地理解EXTJS在实际项目中的应用。 描述中的"还...

    extjs 常用控件的使用 table layout

    `Table Layout`是EXTJS中的布局类型之一,它将容器内的控件按照表格的形式排列。在使用Table Layout时,你需要指定列的数量,并且每个控件会被分配到一个单元格中。以下是一些关于Table Layout的关键点: 1. **...

    extjs 的 源码包

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

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

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

    深入浅出extjs 源码

    《深入浅出ExtJS源码》是一本专为IT专业人士准备的深度解析ExtJS框架源码的书籍。作者徐会生、何启伟和康爱媛以其丰富的编程经验和深入的理解,将复杂的ExtJS源码剖析得清晰易懂,旨在帮助读者深入理解这个强大的...

    EXTJS修改颜色实例源码

    在提供的实例源码中,我们看到的是如何在 EXTJS 中修改颜色的示例,具体涉及到 EXTJS 的 FormPanel 和 ComboBox 组件,以及自定义事件处理。 1. **FormPanel**: - `Ext.form.FormPanel` 是 EXTJS 中用于创建表单...

    EXTJS 源码3.4

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

Global site tag (gtag.js) - Google Analytics