当extjs的grid加载到window中时引发的血案

今天需要用到一个extjs的window控件中内嵌grid。本来一个很简单的功能，没想到最后做下来，花了我不少时间，真是很郁闷啊。

不多说了，先看图。

正常效果:



出错情况:



最后研究下来，原来是要先定义grid，在定义window,也是先后顺问题，如果把gridTest定义放在window之后，最后出现上图出错情况，后过来就正常了。

看代码:

var gridTest = new Ext.grid.GridPanel({
region: 'north',
border: false,
columns: [
{ text: "条码", width: 100, dataIndex: 'BarCode' , sortable: true },
{ text: "名称", width: 120, dataIndex: 'GoodsName' , sortable: true },
{ text: "数量", width: 60, dataIndex: 'Quantity' , sortable: true },
{ text: "单位", width: 60, dataIndex: 'GoodsUnit' , sortable: true },
{ text: "进价", width: 60, dataIndex: 'GoodsBuyPrice' , sortable: true },
{ text: "售价", width: 60, dataIndex: 'GoodsSellPrice' , sortable: true },
{ text: "存放位置" , width: 120, dataIndex: 'WareHouse', sortable: true },
{ text: "供应商" , width: 100, dataIndex: 'SupplierName', sortable: true },
{ text: "进货员" , width: 100, dataIndex: 'Employee', sortable: true },
{ text: "状态", width: 60, dataIndex: '_StrStatus' , sortable: true },
{ text: "入库日期" , width: 80, dataIndex: '_DtCreate', sortable: true }
],
width: 700,
height: 500,
frame: true
});

var winChooseGoods = new Ext.Window({
title: '进货',
layout: 'border',
width: 700,
height: 500,
closeAction: 'hide',
plain: true,
items: [gridTest],
buttons: [{
text: '确定',
handler: function () {
winChooseGoods.close();
}
}, {
text: '取消',
tabIndex: 12,
handler: function () {
winChooseGoods.close();
}
}]
});