上節講到，地圖加載。
但我們可以發現，當沒有頁面布局的情況下，<OBJECT>控件，沒有占滿整個屏幕，這里我們就要用到Extjs的功能了。
這節要講的是用Extjs為<OBJECT>控件布局，讓它適應任何版本的IE瀏覽器(因為SkyLine目前只支持IE)。
1.將Extjs包引進項目。
-這里需要注意，網上下載的Extjs5.0包里，包含有很多例子之類的，為了保證項目盡可能的干凈，我們只去一小部分。
2.在項目中應用
-我們在上一節，將OBJECT空間直接寫在Index.cshtml里，在這里，我們需要修改一下，
我們要用Extjs里的ViewPort渲染到Index.cshtml里。
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>三維地圖</title>
<META http-equiv="X-UA-Compatible" content="IE=8" > </META>@*這樣IE8-9就可以兼容了，IE10暫時沒測試*@
<link href="~/Scripts/ext-5.0.0/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css" rel="stylesheet" />
<script src="~/Scripts/ext-5.0.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
Ext.define('HJ.view.Main', {
extend: 'Ext.panel.Panel',
layout: 'border',
alias: 'widget.main',
initComponent: function () {
var centerPanel = Ext.create('Ext.panel.Panel', {
region: 'center',
margins: '0 0 0 0',
paddings: '0 0 0 0',
layout: 'fit',
style: {
textAlign: 'right'
},
items: {
html: '<object id="TerraExplorerX" height="100%" width="100%" classid="CLSID:3a4f9192-65a8-11d5-85c1-0001023952c1"></object>'
}
});
this.items = [centerPanel];
this.callParent(arguments);
}
});
Ext.create('Ext.container.Viewport', {
layout: 'border',
autoload: true,
items: [
{
xtype: 'main', region: 'center'
}
]
});
});
</script>
</head>
<body>
</body>
</html>
3.在沒有加載地圖的時候，我們看一下效果。
-占滿了整個屏幕^^。
4.結束語
-有些人會說，這個控件布局何必這么麻煩，檢測下IE高度，加載控件時將高度附上去就OK了，
這里我想說的是，既然要判斷那就需要IE版本，或者以后SkyLine開發Google或者火狐瀏覽器時，還得判斷其他瀏覽器，
這里Extjs是我找到比較省事兒的方法。