EXtjs Component没有以正确的布局显示？

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
        ]

    });
});

并且还将所有必需的文件添加到Aspx页面

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

但它总是在没有任何设计的情况下给出结果....

为什么会这样？我在导入时遗漏的东西或者要写的东西？请帮助我们 删除此问题...

Answer 1

我猜您忘了在aspx页面中导入extjs css文件。

<link rel="stylesheet" type="text/css" href="ext-4/resources/css/ext-all.css">
<script type="text/javascript" src="ext-4/ext-debug.js"></script>
<script type="text/javascript" src="temp.js"></script>

试试这个并告诉我。

由于