数据是读出来了,可是我们怎么才能把他们更好的展现在页面中呢?让我们看看更酷的,页面的body中不写任何html,一切自动生成.
首先我们定义一个ViewPort:
function loadregionborder()
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
var form= loadForm();
var one1 = loadone();
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var port=new Ext.Viewport(
{layout:"border",
items:[one1,
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{region:"south",id:"bottom",height:50,title:"底部面板"},
form,
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{region:"west",id:"west",width:100,title:"左边面板"},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{region:"east",id:"east",width:100,title:"右边面板"}]});
}
在loadregionborder()方法中,我们首先定义了两个变量,一个是form,一个是one1,它们分别代表两个区域,然后又在ViewPort里定义了三个区域,分别是底部,左边,和右边.这五个面版构成了整个页面.
loadForm()和loadone()代码分别如下:
function loadone()
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var one = new Ext.Panel(
{
title:"容器组件",
width:500,
region:"north",
height:200,
layout:"accordion",
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
layoutConfig:
{animate: true },
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
items:[
{title:"子元素1",html:"这是子元素1中的内容"},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{title:"子元素2",html:"这是子元素2中的内容"},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{title:"子元素3",html:"这是子元素3中的内容"}]});
![](/Images/OutliningIndicators/InBlock.gif)
return one;
}
function loadForm()
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var formpanel = new Ext.form.FormPanel(
{
title:"容器组件",
width:300,
labelAlign:"left",
height:120,
region:"center",
defaultType: 'textfield',
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
items:[
{fieldLabel:"请输入姓名",name:"name"},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{fieldLabel:"请输入地址",name:"address"},
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{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
到现在,页面的基本轮廓就完成了。看看效果吧?
![](/images/cnblogs_com/godspeed/aaa.gif)