EXtjs组件没有显示正确的布局？

这里是拖的例子简单的ExtJS的代码和下降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>

但它总是给一个结果，没有任何设计。 ...

enter image description here

为什么发生这种情况？东西我想在进口或东西要写？请帮助我们以消除此问题...

来源

2013-05-20 jeegnesh

请在您的aspx页面导入ext-all.css。 – Hariharan

是的，这就是我所缺少的。非常感谢你！ – jeegnesh

这是个好消息@jeegnesh – Hariharan

我想你忘了导入extjs css文件在你的aspx页面。

<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>

试试这个，让我知道。

谢谢

来源

2013-05-20 04:43:08 Hariharan

EXtjs组件没有显示正确的布局？

回答

相关问题