zoukankan      html  css  js  c++  java
  • ExtJS2.0实用简明教程


            Form布局由类Ext.layout.FormLayout定义,名称为form,是一种专门用于管理表单中输入字段的布局,这种布局主要用于在程序中创建表单字段或表单元素等使用。

       看下面的代码:
    Ext.onReady(function(){ 
    
    new Ext.Panel({
    
    renderTo:"hello",
    
    title:"容器组件",
    
    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:"容器组件",
    
    300, 
    
    labelAlign:"right",
    
    height:120,
    
    defaultType: 'textfield',
    
    items:[
    
    {fieldLabel:"请输入姓名",name:"name"},
    
    {fieldLabel:"请输入地址",name:"address"},
    
    {fieldLabel:"请输入电话",name:"tel"}
    
    ]
    
    }
    
    );
    
    });

             程序结果与前面使用Ext.Panel并指定form布局的一样,如下图所示:

  • 相关阅读:
    JSON的基本认识
    Linux基础 7-10 Bash编程练习4--for循环
    Linux基础7-9 Bash编程--for循环语句
    linux基础 7-3-条件判断语句案例
    Linux基础 7-8 sed命令使用练习
    Linux基础 7-7 set命令的使用
    Linux基础 7-6 Bash脚本编程练习3
    Linux基础7-5 Bash脚本编程--算术运算
    Linux基础7-4 Bash脚本编程练习2
    Linux基础 7-3 Bash脚本编程--条件判断
  • 原文地址:https://www.cnblogs.com/twodog/p/12135329.html
Copyright © 2011-2022 走看看