extjs - EXtjs コンポーネントが適切なレイアウトで表示されませんか?

Question

ドラッグ アンド ドロップの例の簡単な EXtjs コードを次に示します。

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.dd.*'
]);

Ext.define('DataObject', {
    extend: 'Ext.data.Model',
    fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5']
});

Ext.onReady(function() {

    var myData = [
        { name: "metric one", data1: "4", data2: "12", data3: "14", data4: "8", data5: "13"},
        { name: "metric two ", data1: "7", data2: "8", data3: "16", data4: "10", data5: "3" },
        { name: "metric three", data1: "5", data2: "2", data3: "14", data4: "12", data5: "7 " },
        { name: "metric four", data1: "2", data2: "14", data3: "6", data4: "1", data5: "4 " },
        { name: "metric five", data1: "7", data2: " 4", data3: "4", data4: "13", data5: "4" }
    ];

        var myData2 = [
        { name: "metric one", data1: "4", data2: "12", data3: "14", data4: "8" },
        { name: "metric two ", data1: "7", data2: "8", data3: "16", data4: "10"  },
        { name: "metric three", data1: "5", data2: "2", data3: "14", data4: "12"  },
        { name: "metric four", data1: "2", data2: "14", data3: "6", data4: "1"  },
        { name: "metric five", data1: "7", data2: " 4", data3: "4", data4: "13" }
    ];

    var firstGridStore = Ext.create('Ext.data.Store', {
        model: 'DataObject',
        data: myData
    });


    var columns = [
        { text: "", width: 80, sortable: true, dataIndex: 'name' },
        { text: "", width: 50, sortable: true, dataIndex: 'data1' },
        { text: "", width: 50, sortable: true, dataIndex: 'data2' },
        { text: "", width: 50, sortable: true, dataIndex: 'data3' },
        { text: "", width: 50, sortable: true, dataIndex: 'data4' },
        { text: "", width: 50, sortable: true, dataIndex: 'data5' }
    ];

    var firstGrid = Ext.create('Ext.grid.Panel', {
        multiSelect: true,
        viewConfig: {
            plugins: {
                ptype: 'gridviewdragdrop',
                dragGroup: 'firstGridDDGroup',
                dropGroup: 'secondGridDDGroup'
            }
        },
        store: firstGridStore,
        columns: columns,
        stripeRows: true
    });

    var secondGridStore = Ext.create('Ext.data.Store', {
        model: 'DataObject',
        data:myData2
    });

    var secondGrid = Ext.create('Ext.grid.Panel', {
        viewConfig: {
            plugins: {
                ptype: 'gridviewdragdrop',
                dragGroup: 'secondGridDDGroup',
                dropGroup: 'firstGridDDGroup'
            }

        },
        store: secondGridStore,
        columns: columns,
        stripeRows: true
    });

    var displayPanel = Ext.create('Ext.Panel', {
        width: 750,
        height: 400,
        layout: {
            type: 'hbox',
            align: 'stretch',
            padding: 1
        },
        renderTo: 'panel',
        defaults: { flex: 1 }, 
        items: [
            firstGrid,
            secondGrid
        ]

    });
});

また、必要なすべてのファイルを to Aspx ページに追加しました

  <script type ="text/javascript" src ="ext-all-debug.js" defer="defer" ></script>
<script type="text/javascript" src="temp.js" defer ="defer" ></script>

しかし、それは常にデザインなしで結果をもたらします....

なぜこれが起こっているのですか？インポートで見逃したもの、または何か書くべきものがありますか?この問題を解決するために私たちを助けてください...