ExtJS2.0实用简明教程 - Form布局
2024-10-09 02:14:23
Form布局由类Ext.layout.FormLayout定义,名称为form,是一种专门用于管理表单中输入字段的布局,这种布局主要用于在程序中创建表单字段或表单元素等使用。
看下面的代码:
Ext.onReady(function(){ 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"} ] } ); });
上面的代码创建了一个面板,面板使用Form布局,面板中包含三个子元素,这些子元素都是文本框字段,在父容器中还通过hideLabels、labelAlign等配置属性来定义了是否隐藏标签、标签对齐方式等。上面代码的输出结果如下图所示:
可以在容器组件中把hideLabels设置为true,这样将不会显示容器中字段的标签了,如下图所示:
在实际应用中,Ext.form.FormPanel这个类默认布局使用的是Form布局,而且FormPanel还会创建与 <form> 标签相关的组件,因此一般情况下我们直接使用FormPanel即可。上面的例子可改写成如下的形式:
Ext.onReady(function(){ new Ext.form.FormPanel({ renderTo:"hello", title:"容器组件", width:300, labelAlign:"right", height:120, defaultType: 'textfield', items:[ {fieldLabel:"请输入姓名",name:"name"}, {fieldLabel:"请输入地址",name:"address"}, {fieldLabel:"请输入电话",name:"tel"} ] } ); });
程序结果与前面使用Ext.Panel并指定form布局的一样,如下图所示:
最新文章
- MVC中的BASE.ONACTIONEXECUTING(FILTERCONTEXT) 的作用
- java 读写properties
- C++ Primer中文版(第5版)(顶级畅销书重磅升级全面采用最新 C++ 11标准)
- 通过url链接登录其他系统
- php-- memcache 与 memcached支架的区别与共同点 个人整理
- C++实现的屏幕截图软件 v1.0
- C# WinForm程序添加引用后调用静态方法时报“Interfaces_Helper.Global”的类型初始值设定项引发异常。--->; System.NullReferenceException: 未将对象引用设置到对象的实例。
- Python实现nb(朴素贝叶斯)
- 海量WEB日志分析
- 高级I/O之readv和writev函数
- jquery1.7.2的源码分析(五)$.support
- contiki etimer部分
- sdio/sd/mmc architecture
- Android应用性能优化方案
- BZOJ_1391_[Ceoi2008]order_最大权闭合子图
- [tkinter]隐藏/销毁控件
- border重叠的问题
- 三种方式控制GPIO
- django rest framwork教程之 viewsets和routers
- 机器学习—SVM