ExtJs的grid显示不出来 高手 求教 帮忙看看


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>无标题页</title>
    <link href="../css/def.css" rel="stylesheet" type="text/css" />
    <link href="extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="vswd-ext_2.0.2.js" type="text/javascript"></script>
    <script src="extjs/adapter/ext/ext-base.js" type="text/javascript"></script>
    <script src="extjs/ext-all.js" type="text/javascript"></script> 
    
    <script type="text/javascript">
    Ext.onReady(function() {
    
    Ext.MessageBox.alert("123","4444",null,null);
    
var myData = [
['Apple',29.89,0.24,0.81,'9/1 12:00am'],
['Ext',83.81,0.28,0.34,'9/12 12:00am'],
['Google',71.72,0.02,0.03,'10/1 12:00am'],
['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
];
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(myData),
reader: new Ext.data.ArrayReader({id: 0}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
])
});
ds.load();
var colModel = new Ext.grid.ColumnModel([
{header: "Company", width: 120, sortable: true, dataIndex: 'company'},
{header: "Price", width: 90, sortable: true, dataIndex: 'price'},
{header: "Change", width: 90, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 90, sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width: 120, sortable: true,
  renderer: Ext.util.Format.dateRenderer('m/d/Y'),
 dataIndex: 'lastChange'}
]);
var grid = new Ext.grid.Grid('grid-example', {ds: ds, cm: colModel});
grid.render();
grid.getSelectionModel().selectFirstRow();
});

    </script>
</head>
<body>
<div id="grid-example"></div>
</body>
</html>直接从官网复制过来的代码 。 为什么一点效果没有 这句
Ext.MessageBox.alert("123","4444",null,null); 倒是没有问题。grid没反应。 
Ext.grid.Grid('grid-example'   这里的 grid-example 是不是容器div的ID 还是我搞错了。求教了 

解决方案 »

  1.   

    大概是这样：
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>无标题页</title>
        <link href="http://dev.sencha.com/deploy/dev/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
        <!--script src="vswd-ext_2.0.2.js" type="text/javascript"></script-->
        <script src="http://dev.sencha.com/deploy/dev/adapter/ext/ext-base.js" type="text/javascript"></script>
        <script src="http://dev.sencha.com/deploy/dev/ext-all.js" type="text/javascript"></script> 
        
        <script type="text/javascript">
    Ext.onReady(function() {
        var myData = [
    ['Apple',29.89,0.24,0.81,'9/1 12:00am'],
    ['Ext',83.81,0.28,0.34,'9/12 12:00am'],    
    ['Google',71.72,0.02,0.03,'10/1 12:00am'],    
    ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],    
    ['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
        ];    
    var ds = new Ext.data.Store({
            proxy: new Ext.data.MemoryProxy(myData),
            reader: new Ext.data.ArrayReader({id: 0}, [
                {name: 'company'},
                {name: 'price', type: 'float'},
                {name: 'change', type: 'float'},
                {name: 'pctChange', type: 'float'},
                {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ])
        });
        ds.load();
        var colModel = new Ext.grid.ColumnModel([
            {header: "Company", width: 120, sortable: true, dataIndex: 'company'},
            {header: "Price", width: 90, sortable: true, dataIndex: 'price'},
            {header: "Change", width: 90, sortable: true, dataIndex: 'change'},
            {header: "% Change", width: 90, sortable: true, dataIndex: 'pctChange'},
            {header: "Last Updated", width: 120, sortable: true,
             renderer: Ext.util.Format.dateRenderer('m/d/Y'),
    dataIndex: 'lastChange'}
        ]);
        var grid = new Ext.grid.GridPanel(
     {el: 'grid-example', ds: ds, cm: colModel, height: 300}
    );
    grid.render();
    grid.getSelectionModel().selectFirstRow();
    });
        </script>
    </head>
    <body>
    <div id="grid-example"></div>
    </body>
    </html>
      

  2.   

    Ext.grid.Grid -> Ext.grid.GridPanel用el: 'grid-example'指定容器
      

  3.   

     var grid = new Ext.grid.GridPanel({
     renderTo: "UserManage",  //       
    store : ds,
    cm : colModel,
    width : 500,
    height : 400
    });
      

  4.   

     var grid = new Ext.grid.GridPanel({
     renderTo: 'grid-example',//       
    store : ds,
    cm : colModel,
    width : 500,
    height : 400
    });