数据是读出来了，可是我们怎么才能把他们更好的展现在页面中呢?让我们看看更酷的，页面的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属性,分别代表上下左右中.
看看它们的类结构:
我们的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
到现在,页面的基本轮廓就完成了。看看效果吧?
