ExtJS框架学习(二) 布局

    数据是读出来了，可是我们怎么才能把他们更好的展现在页面中呢?让我们看看更酷的，页面的body中不写任何html,一切自动生成.
    首先我们定义一个ViewPort:

function loadregionborder()
{ 
     var form= loadForm();
     var one1 = loadone();
    var port=new Ext.Viewport({layout:"border",
                      items:[one1,
                               {region:"south",id:"bottom",height:50,title:"底部面板"},
                               form,
                               {region:"west",id:"west",width:100,title:"左边面板"},
                               {region:"east",id:"east",width:100,title:"右边面板"}]}); 
                              
}

    在loadregionborder()方法中，我们首先定义了两个变量,一个是form,一个是one1,它们分别代表两个区域,然后又在ViewPort里定义了三个区域,分别是底部,左边,和右边.这五个面版构成了整个页面.
loadForm()和loadone()代码分别如下:

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

    return  one;
}

function loadForm()
 {
        var  formpanel = new Ext.form.FormPanel({
            title:"容器组件",
            width:300, 
            labelAlign:"left",
            height:120,
            region:"center",
            defaultType: 'textfield',
            items:[{fieldLabel:"请输入姓名",name:"name"},
                {fieldLabel:"请输入地址",name:"address"},
                {fieldLabel:"请输入电话",name:"tel"}]});
 return formpanel;
 }    

大家注意,不管是两个区域还是viewport上定义的三个区域,都包含region属性,分别代表上下左右中.
看看它们的类结构:

Class:	Panel
Subclasses:	TabPanel, Tip, Window, FieldSet, FormPanel, GridPanel, TreePanel

    我们的formPanel继承自panel,而ViewPort继承自Container.ViewPort中可以包含panel以及它的子类型,就是任何一种panel.ViewPort的Items就是一个panel的集合.而每个panel下面也有Items,以此类推,可能是控件,也可能是其它的panel.
因为panel并没有指定特定的布局，所以要通过layout属性指定布局，并在items中定义的面板对象定义中加入该布局的定义。Layout属性可选的范围值为container、anchor、form、border、column、fit、accordion、card和table。
这个代码很简单！Viewport接口中带的属性参数有很多，但是作为布局使用的时候常用到两个参数，其中一个是‘layout’另一个是items
    到现在,页面的基本轮廓就完成了。看看效果吧?