理解了layout之后,再看看FormPanel源码,发现它指定了layout:'form',而FormPanel又是Container的子孙类,所以,它就是用了FormLayout布局。只是通过FormPanel,将FormLayout所需要的配置都做了些初始化提取出来了,便于开发者使用和理解。所以,在FormPanel渲染后就会用FormLayout来进行doLayout功能。
所以写成下面两种方式的代码,效果是一样的:
一、用FormPanel
- 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'
- }]
- });
- });
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'
- Ext.onReady(function(){
- var panel = new Ext.Panel({
- renderTo:'hello',
- title:'容器组件',
- width:300,
- layout:'form',
- hideLabels:false,
- labelAlign:'right',
- height:120,
- defaultType:'textfield',
- items:[{
- fieldLabel:'请输入姓名',
- name:'name'
- },{
- fieldLabel:'请输入地址',
- name:'address'
- },{
- fieldLabel:'请输入电话',
- name:'tel'
- }]
- });
- });
分享到:
相关推荐
extjs 源码,有兴趣的可以学习下
在“Extjs源码之--Ext事件机制/继承关系”中,我们将深入探讨EXTJS如何处理事件以及其类层次结构。EXTJS的事件处理主要由EventManager.js这个文件负责,它是EXTJS事件系统的基础。 首先,EXTJS的事件机制基于观察者...
ExtJS3.0 源码分析与开发实例宝典
EXTJS 3.0是其历史版本之一,提供了一套完整的组件模型、数据绑定、布局管理以及丰富的用户界面控件。这个源码包不仅包含了EXTJS 3.0的核心库,还提供了相关的文档和代码示例,这对于开发者深入理解EXTJS的工作原理...
资源名称:Ext JS源码分析与开发实例宝典内容简介:本书全面系统地剖析了ExtJS 3.0的架构设计原理。通过对源码的“抽丝剥茧”,读者可以掌握Ext JS架构的精妙,从原理层面用活Ext JS。此外,本书还提出了大量的解决...
这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...
这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...
这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...
这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...
FormPanel 是 ExtJS 中的一个核心组件,用于创建和处理表单元素,包括输入字段、按钮、选择框等。它提供了丰富的功能,如数据验证、远程提交、异步加载等,是构建用户交互界面的关键部分。 在ExtJS中,FormPanel是...
extJS myeclipse源码示例
ExtJS源码分析与开发实例宝典完整版 1、JS画图部分代码在IE8上看不到效果,因为IE8不支持VML。 2、扩展的组件为作者独立完成,仅供学习之用,一些组件并没有经过严格的测试。 如果需要用到项目之中,请自行测试。 ...
extjs下载 extjs源码 extjsApi,全部包括在这里面
标题"EXTJS源码分析与开发实例宝典-开发的效果图.rar"暗示了书中的内容可能包含了EXTJS的源码解析和实际开发案例,同时还有开发过程中的视觉效果展示,帮助读者更好地理解EXTJS在实际项目中的应用。 描述中的"还...
`Table Layout`是EXTJS中的布局类型之一,它将容器内的控件按照表格的形式排列。在使用Table Layout时,你需要指定列的数量,并且每个控件会被分配到一个单元格中。以下是一些关于Table Layout的关键点: 1. **...
一个extjs的源码包.其中包括extjs的例子和文档.
《ExtJS源码分析与开发实例宝典》是一本不错的关于ExtJS开发实践的教程,特附上源码,与各位共享,谢谢。
《深入浅出ExtJS源码》是一本专为IT专业人士准备的深度解析ExtJS框架源码的书籍。作者徐会生、何启伟和康爱媛以其丰富的编程经验和深入的理解,将复杂的ExtJS源码剖析得清晰易懂,旨在帮助读者深入理解这个强大的...
在提供的实例源码中,我们看到的是如何在 EXTJS 中修改颜色的示例,具体涉及到 EXTJS 的 FormPanel 和 ComboBox 组件,以及自定义事件处理。 1. **FormPanel**: - `Ext.form.FormPanel` 是 EXTJS 中用于创建表单...
extjs源码3.4 里面有其他JS,直接调用就行