Extjs 如何将中的数据与视图端口对齐。现在卡住了一段时间

团队

如何将中的数据与视图端口对齐。我有两个面板，无法达到预期效果。我正在使用extjs3.4

我面临以下问题：

边界重叠，而且越来越厚。无法从顶部和左侧留出空间

无法设置高度，它正在扩展到整个页面

网格和面板宽度应该减少我只有三列

代码

标题
.add24{
背景图片：url（images/fiber_-Cable.jpg）！重要；
}
Ext.onReady（函数（）{
var baseParamsv={
“寻呼机”：”
};
Ext.QuickTips.init（）；
var searchFormPanel=新的Ext.FormPanel({
id:“搜索表单”
，地区：'north'
，标题：'Heading'
，布局：'table'
，车身样式：'padding:10px；'
，身高：100
，宽：200
，填充：“5”
，layoutConfig:{columns:2}
，默认值：{ctCls:'padding3'}
});
添加（{xtype:'label'，text:'Search User:'}）；
添加（{xtype:'label'，文本：'}）；
添加（{xtype:'textfield'，id:'search1'，name:'search1'，value:''，enableKeyEvents:true}）；
添加（{xtype:'button'，id:'go'，cls:'spacing3'，text:'go！'，handler:function（）{}}）；
var gridColumnModel=新的Ext.grid.ColumnModel([
{header:“checked”，sortable:true，menuDisabled:true，dataIndex:“checked”，width:20，renderer:checkBoxRenderer}，
{标题：“用户名”，可排序：true，menuDisabled:true，数据索引：'username'，宽度：40，呈现器：UserNameRenderer}，
{标题：“emailid”，可排序：true，菜单禁用：true，数据索引：'emailid'，宽度：30，呈现器：emailidRenderer}
]);     
var store=new Ext.data.JsonStore（{
baseParams:baseParamsv，
字段：[
{name:'checked'}，
{name:'username'}，
{名称：'emailid'}
],
根：'data'，
totalProperty:'total'，
url:'data.json'，
id:'offlineDataStoreId'
});
var dataGrid=new Ext.grid.GridPanel({
colModel:gridColumnModel
，地区：'中心'
，商店：商店
，stripeRows:true
，viewConfig:{autoFill:true，emptyText:'找不到要显示的数据'，forceFit:true，scrollOffset:2}
，布局：'fit'
，听众：{
render:function（）{
var initParams=Ext.apply（{}，baseParamsv）；
Ext.apply（initParams{
起点：0，
限额：10
});
this.store.load（{params:initParams}）；
}
}
});
函数checkBoxRenderer（val、meta、record、rowIndex、colIndex、offlineStore）{
返回“”；
}
函数UserNameRenderer（val、meta、record、rowIndex、colIndex、offlineStore）{
返回val；
}
函数emailidRenderer（val、meta、record、rowIndex、colIndex、offlineStore）{
返回val；
}
var innerPanel={
xtype:'面板'，
id:'内部面板'，
布局：“边框”，
地区：'中心'，
标题:"标题",，
宽度：200，
车身样式：'padding:10px；'，
填充：“5”，
项目：[数据网格]
};
var viewPort=新的外部视口({
布局：“边框”，
标题：“外部布局浏览器”，
项目：[searchFormPanel，innerPanel]，
车身样式：“衬垫：10px；页边顶部：10px”，
renderTo:Ext.getBody（）
});
viewPort.doLayout（）；
});

如果您不想使用整个页面，只需使用面板而不是Viewoprt：

var viewPort = new Ext.Panel({
    layout: 'border',
    width: 400,
    height: 300,
    title: 'Ext Layout Browser',
    items:[searchFormPanel,innerPanel],
    bodyStyle:'padding:10px;margin-top:10px',
    renderTo:Ext.getBody()
});

---

在这里您可以看到结果：

非常感谢Darin。如何从底部和顶部留出空间，布罗德斯很厚，我正在努力克服这一点。

var viewPort = new Ext.Panel({
    layout: 'border',
    width: 400,
    height: 300,
    title: 'Ext Layout Browser',
    items:[searchFormPanel,innerPanel],
    bodyStyle:'padding:10px;margin-top:10px',
    renderTo:Ext.getBody()
});