ExtJS3.0之布局二

4、Form 布局

   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 等配置属性来定义了是否隐藏标签、标签对齐方式等。上面代码的输出结果如下图所示：

   在实际应用中，Ext.form.FormPanel 这个类默认布局使用的是Form 布局，而且FormPanel还会创建与

标签相关的组件，因此一般情况下我们直接使用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 布局的一样，如下图所示：

Form布局值得注意的地方是，在IE和FF中的兼容性好像不是太好。两者显示效果不一样。在IE中文本域显示不出下边框。（IE6.0）

 

5、Accordion 布局

   Accordion 布局由类Ext.layout.Accordion 定义，名称为accordion，表示可折叠的布局，也就是说使用该布局的容器组件中的子元素是可折叠的形式。来看下面的代码:

 Ext.onReady(function(){
    new Ext.Panel({
        renderTo:"hello",
        title:"容器组件",
        width:500,
        height:200,
        layout:"accordion",
        layoutConfig: {
        animate: true
        },
        items:[{title:"子元素1",html:"这是子元素1中的内容"},
            {title:"子元素2",html:"这是子元素2中的内容"},
            {title:"子元素3",html:"这是子元素3中的内容"}
            ] 
    });
});
 

    上面的代码定义了一个容器组件，指定使用Accordion 布局，该容器组件中包含三个子元素，在layoutConfig 中指定布局配置参数animate 为true，表示在执行展开折叠时是否应用动画效果。执行结果将生成如下图所示的界面：

6、Table 布局及其它布局

    Table 布局由类Ext.layout.TableLayout 定义，名称为table，该布局负责把容器中的子元素按照类似普通html 标签。来看下面的代码:

 Ext.onReady(function(){
    var panel=new Ext.Panel({
        renderTo:"hello",
        title:"容器组件",
        width:500,
        height:200,
        layout:"table",
        layoutConfig: {
        columns: 3
        },
        items:[{title:"子元素1",html:"这是子元素1中的内容",rowspan:2,height:100},
            {title:"子元素2",html:"这是子元素2中的内容",colspan:2},
            {title:"子元素3",html:"这是子元素3中的内容"},
            {title:"子元素4",html:"这是子元素4中的内容"}
            ] 
    });
});
 

    上面的代码创建了一个父容器组件，指定使用Table 布局，layoutConfig 使用columns指定父容器分成3 列，子元素中使用rowspan 或colspan 来指定子元素所横跨的单元格数。程序的运行效果如下图所示：

    除了前面介绍的几种布局以外， Ext2.0 中还包含其它的Ext.layout.AbsoluteLayout、Ext.layout.AnchorLayout 等布局类，这些布局主要作为其它布局的基类使用，一般情况下我们不会在应用中直接使用。另外，我们也可以继承10 种布局类的一种，来实现自定义的布局。