如何将数据对齐到视口。现在卡了一段时间
Posted
技术标签:
【中文标题】如何将数据对齐到视口。现在卡了一段时间【英文标题】：How to align data in to view port. Stuck for a while now 【发布时间】：2012-12-26 14:56:45 【问题描述】：团队，
如何将数据对齐到视口。我有两个面板，无法达到预期的效果。我正在使用 extjs 3.4
我面临以下问题：
-
边框重叠，变得很厚。无法从顶部和左侧留出空间。
无法设置高度，它正在扩展到整个页面。
应该减少网格和面板宽度我只有三列
代码。
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="ext-3.4.0/resources/css/ext-all.css" />
<style type="text/css">
.add24
background-image: url(images/fiber_Cable.jpg) !important;
</style>
<script type="text/javascript" src="ext-3.4.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.4.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function()
var baseParamsv =
"pager":""
;
Ext.QuickTips.init();
var searchFormPanel = new Ext.FormPanel(
id: 'searchForm'
,region:'north'
,title:'Heading'
,layout:'table'
,bodyStyle:'padding:10px;'
,height:100
,width:200
,padding: '5 5 5 5'
,layoutConfig: columns: 2
,defaults: ctCls:'padding3'
);
searchFormPanel.add(xtype: 'label', text:'Search User:');
searchFormPanel.add(xtype: 'label', text: '');
searchFormPanel.add(xtype: 'textfield', id: 'search1', name: 'search1', value: '',enableKeyEvents: true);
searchFormPanel.add(xtype: 'button', id: 'go', cls: 'spacing3', text: 'Go!', handler:function() );
var gridColumnModel = new Ext.grid.ColumnModel([
header: "checked",sortable:true, menuDisabled:true, dataIndex:'checked',width:20,renderer:checkBoxRenderer,
header: "username",sortable:true, menuDisabled:true, dataIndex:'username',width:40,renderer:UserNameRenderer,
header: "emailid",sortable:true, menuDisabled:true, dataIndex:'emailid',width:30, renderer:emailidRenderer
]);
var store = new Ext.data.JsonStore(
baseParams:baseParamsv,
fields: [
name:'checked',
name:'username',
name:'emailid'
],
root:'data',
totalProperty: 'total',
url:'data.json',
id:'offlineDataStoreId'
);
var dataGrid = new Ext.grid.GridPanel(
colModel:gridColumnModel
,region:'center'
,store:store
,stripeRows:true
,viewConfig: autoFill:true, emptyText : 'No data found to display', forceFit: true, scrollOffset: 2
,layout:'fit'
,listeners:
render: function()
var initParams = Ext.apply(,baseParamsv);
Ext.apply(initParams,
start:0,
limit:10
);
this.store.load(params:initParams);
);
function checkBoxRenderer(val, meta, record, rowIndex, colIndex, offlineStore)
return '<input type=checkbox name="check_box" value="'+record.get('emailid')+'">';
function UserNameRenderer(val, meta, record, rowIndex, colIndex, offlineStore)
return val;
function emailidRenderer(val, meta, record, rowIndex, colIndex, offlineStore)
return val;
var innerPanel =
xtype: 'panel',
id: 'inner-panel',
layout: 'border',
region: 'center',
title:'Heading',
width:200,
bodyStyle:'padding:10px;',
padding: '5 5 5 5' ,
items :[dataGrid]
;
var viewPort = new Ext.Viewport(
layout: 'border',
title: 'Ext Layout Browser',
items:[searchFormPanel,innerPanel],
bodyStyle:'padding:10px;margin-top:10px',
renderTo:Ext.getBody()
);
viewPort.doLayout();
);
</script>
</body>
</html>
【问题讨论】：
【参考方案1】：如果您不想使用整个页面，只需使用面板而不是 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()
);
在这里你可以看到结果：http://jsfiddle.net/3CabN/6/
【讨论】：
非常感谢达林。如何从底部和顶部留下空间，并且 broders 很厚，我正在努力克服这个问题。以上是关于如何将数据对齐到视口。现在卡了一段时间的主要内容，如果未能解决你的问题，请参考以下文章