我按照 教程 写了 一个 EXT 2.0 grid 的例子 但什么也没有显示

Ext.onReady(function(){var cm = new Ext.grid.ColumnModel([ 
{header:'1',dataIndex:'id'}, 
{header:'2',dataIndex:'sex'}, 
{header:'3',dataIndex:'name'}, 
{header:'4',dataIndex:'descn'} 
]); 
cm.defaultSortable = true; var data = [ 
    ['1','male','name1','descn1'], 
    ['2','male','name1','descn2'], 
    ['3','male','name3','descn3'], 
    ['4','male','name4','descn4'], 
    ['5','male','name5','descn5'] 
]; 
      
  
  var ds = new Ext.data.Store({ 
    proxy: new Ext.data.MemoryProxy(data), 
    reader: new Ext.data.ArrayReader({}, [ 
        {header:'id',mapping:0}, 
        {header:'sex',mapping:1}, 
        {header:'name',mapping:2}, 
        {header:'descn',mapping:3} 
    ]) 
}); 
ds.load(); var grid = new Ext.grid.GridPanel({ 
  el: 'grid-example', 
    ds: ds, 
    cm: cm 
}); 
grid.render();})

解决方案 »

  1.   

    Ext.onReady(function(){这个是最常见的启动方法。我在楼主的代码里还真的没有看到。建议你先运行自带的例子，然后尝试修改。必要一开始就自己从头弄。
      

  2.   

    我修改过，但出错，出错信息 :行 50 缺少对象
    代码如下 ：
    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> 
    <link rel="stylesheet" type="text/css" href="../../resources/css/xtheme-default.css" /> <script type="text/javascript" src="../../adapter/yui/yui-utilities.js"> </script>    
    <script type="text/javascript" src="../../adapter/yui/ext-yui-adapter.js"> </script>    
        <script type="text/javascript" src="../../ext-all.js"> </script> 
    </head>
    <body>
     
    <!-- a place holder for the grid. requires the unique id to be passed in the javascript function, and width and height ! -->
    <div id="grid-panel" style="width:600px;height:300px;">
    <div id="grid-example"></div>
    </div><script> 
    Ext.onReady(function(){
     
    var cm = new Ext.grid.ColumnModel([ 
    {header:'1',dataIndex:'id'}, 
    {header:'2',dataIndex:'sex'}, 
    {header:'3',dataIndex:'name'}, 
    {header:'4',dataIndex:'descn'} 
    ]); 
    cm.defaultSortable = true; var data = [ 
        ['1','male','name1','descn1'], 
        ['2','male','name1','descn2'], 
        ['3','male','name3','descn3'], 
        ['4','male','name4','descn4'], 
        ['5','male','name5','descn5'] 
    ]; 
          
      
      var ds = new Ext.data.Store({ 
        proxy: new Ext.data.MemoryProxy(data), 
        reader: new Ext.data.ArrayReader({}, [ 
            {header:'id',mapping:0}, 
            {header:'sex',mapping:1}, 
            {header:'name',mapping:2}, 
            {header:'descn',mapping:3} 
        ]) 
    }); 
    ds.load(); var grid = new Ext.grid.GridPanel({ 
      el: 'grid-example', 
        ds: ds, 
        cm: cm 
    }); 
    grid.render(); 
    })</script></body>
    </html>
      

  3.   

    1.保证你引入ext的路径没错
    2.
    var ds = new Ext.data.Store({ 
        proxy: new Ext.data.MemoryProxy(data), 
        reader: new Ext.data.ArrayReader({}, [ 
            {header:'id',mapping:0}, 
            {header:'sex',mapping:1}, 
            {header:'name',mapping:2}, 
            {header:'descn',mapping:3} 
        ]) 
    });
    改成var ds = new Ext.data.Store({ 
        proxy: new Ext.data.MemoryProxy(data), 
        reader: new Ext.data.ArrayReader({}, [ 
            {name:'id',mapping:0}, 
            {name:'sex',mapping:1}, 
            {name:'name',mapping:2}, 
            {name:'descn',mapping:3} 
        ]) 
    });
      

  4.   

    我也是报对象错，但是，应用其它的例子就是好的，不知道为什么，grid不行。
    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: 1}, [    
                  {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('grid-example', {ds: ds, cm: colModel});     grid.render();     grid.getSelectionModel().selectFirstRow();  
    });
      

  5.   


    <html>
    <head runat="server">
        <title>GridPanel表格功能</title>
        <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />    <script src="../Js/ext-base.js" type="text/javascript"></script>    <script src="../Js/ext-all.js" type="text/javascript"></script>    <script type="text/javascript">
        Ext.onReady(function(){
            var data=[[1,'EasyJWeb','EasyJF','www.easyjf.com'],
            [2,'jfox','huihoo','www.huihoo.org'],
            [3,'jdon','jdon','www.jdon.com'],
            [4,'springside','springside','www.spring.org.cn']];
            var store=new Ext.data.SimpleStore({data:data,fields:["id","name","organization","homepage"]});
            var grid=new Ext.grid.GridPanel({
                renderTo:"hello",
                title:"中国行总开发团队",
                height:150,
                width:600,
                columns:[{header:"项目名称",dataIndex:"name"},
                {header:"开发团队",dataIndex:"organization"},
                {header:"网址",dataIndex:"homepage"}],
                store:store,
                autoExpandColumn:2
            });
        })
        
        function GridPanel()
        {
            var data=[[1,'EasyJWeb','EasyJF','www.easyjf.com'],
            [2,'jfox','huihoo','www.huihoo.org'],
            [3,'jdon','jdon','www.jdon.com'],
            [4,'springside','springside','www.spring.org.cn']];
            
          
            var store=new Ext.data.SimpleStore({data:data,fields:["id","name","organization","homepage"]});
         var colM=new Ext.grid.ColumnModel([{header:"项目名称",dataIndex:"name",sortable:true},{header:"开发团队",dataIndex:"organization",sortable:true},{header:"网址",dataIndex:"homepage",renderer:showUrl}]);
            var grid=new Ext.grid.GridPanel({
                renderTo:"panel",
                title:"中国开发团队",
                height:200,
                width:500,
                cm:colM,
                store:store,
                autoExpandColumn:2
            });
            
        }
        
         function showUrl(value)
            {
                return "<a href='http://"+value+"' target='_blank'>"+value+"</a>";
            }
        
        function GridPanelXml()
        {
            var store=new Ext.data.Store({
                url:"panel.xml",
                reader:new Ext.data.XmlReader({record:"row"},["id","name","organization","homepage"])
            });
           var colM=new Ext.grid.ColumnModel([{header:"项目名称",dataIndex:"name",sortable:true},{header:"开发团队",dataIndex:"organization",sortable:true},{header:"网址",dataIndex:"homepage",renderer:showUrl}]);        var grid=new Ext.grid.GridPanel({
                renderTo:"panel",
                title:"中国开发团队",
                height:200,
                width:500,
                cm:colM,
                store:store,
                autoExpandColumn:2
            });
            store.load();
        }
        
        function editGridPanel()
        {
            var data=[{id:1,name:'小王',email:'[email protected]',sex:'男',bornDate:'1991-4-4'},
                    {id:1,name:'小李',email:'[email protected]',sex:'男',bornDate:'1992-5-6'},
                    {id:1,name:'小兰',email:'[email protected]',sex:'女',bornDate:'1993-3-7'}];        var store=new Ext.data.JsonStore({data:data,fields:["id","name","sex","email",{name:"bornDate",type:"date",dateFormat:"Y-n-j"}]});         var colM=new Ext.grid.ColumnModel([{        header:"姓名",        dataIndex:"name",        sortable:true,        editor:new Ext.form.TextField()},         {header:"性别",        dataIndex:"sex",
            editor:new Ext.form.ComboBox({transform:"sexList",triggerAction:"all",lazyRender:true})
            },        {header:"出生日期",        dataIndex:"bornDate",        width:120,        renderer:Ext.util.Format.dateRenderer('Y年m月d日'),
            editor:new Ext.form.DateField({format:'Y年m月d日'})
            },        {header:"电子邮件",        dataIndex:"email",        sortable:true,        editor:new Ext.form.TextField()}        ]);        var grid = new Ext.grid.EditorGridPanel({
            renderTo:"hello",
            title:"学生基本信息管理",
            height:200,
            width:600, 
            cm:colM,
            store:store,
            autoExpandColumn:3,
            clicksToEdit:1 //指定编辑的事件为1，默认为2
            })}
        
        </script></head>
    <body>
        <form id="form1" runat="server">
        <div id="hello">
        </div>
        <br />
        <input type="button" value="GridPanel表格" onclick="GridPanel()" />
        <input type="button" value="xml绑定GridPanel" onclick="GridPanelXml()" />
        <input type="button" value="可编辑的GridPanel" onclick="editGridPanel()" />
        <br />
        <div id="panel">
        </div>
       <select id="sexList" style="display:none;"> 
    <option>男</option> 
    <option>女</option> 
    </select> 
        </form>
    </body>
    </html>都可以没遇到楼主的情况，没看到楼主的ext-base.js这个呀
      

  6.   

    EXT 什么都好，就是难调试啊～～～～～！