当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();
        }
    }]
});