我的javascript页面是空白的

时间:2012-06-12 01:26:43

标签: extjs

我写了这个Ext js应用程序,但我一直收到这个错误,说不能在第32行调用方法'create'。我从原始代码中取出了一些行。 Ext.onReady没有工作,页面只是空白,debuger没有给出任何错误,但当我拿出Ext.onReady()时出现这个错误

<html>
  <head><title>Arrar Read</title>

    </head>
  <body>


 <link rel="stylesheet" type="text/css" href="C:/Users/kevin/ext-3.4.0/ext-3.4.0        /resources/css/ext-all.css"/>

 <script type="text/javascript" src="C:/Users/kevin/ext-3.4.0/ext-3.4.0/adapter      /ext/ext-base-debug.js"></script>
 <script type="text/javascript" src="C:/Users/kevin/ext-3.4.0/ext-3.4.0ext-all.js">       </script>
 <script type="text/javascript" src="C:/Users/kevin/ext-3.4.0/ext-3.4.0/ext-all-       debug.js"></script>
<script type="text/javascript" src="C:/Users/kevin/ext-3.4.0/ext-3.4.0/adapter/ext/ext-base.js"></script>
 <script type="text/javascript" src="C:/Users/kevin/ext-3.4.0/ext-3.4.0/pkgs/ext-core.js"></script>


    <script type="text/javascript">


 var arrayD = [
['Jary Garcia', 'MD'],
['Arron, Baker', 'VA'],
['Susan Smith',  'DC'],
['Mary Smith',  'DE'],
['Bryan Shanly',  'NJ'],
['Nyron Selgado',  'CA']
  ];

  var nameRecord = Ext.data.Record.create([
{ name: 'name', mapping : 1},
{ name: 'state',mapping : 2}
 ]);

  var arrayReader = new Ext.data.ArrayReader({},nameRecord); //creating a reader

  var memoryProxy = new Ext.data.MemoryProxy(arrayD); //creating a memory proxy from the array

 var store = new Ext.data.Store({ //create a store
reader : arrayReader,
proxy : memoryProxy

 });

 var colModel = new Ext.grid.ColumnModel([
{
    header : 'Full Name',
    sortable : true,
    dataIndex : 'fullName'
},
{
    header : 'State',
    dataIndex : 'state'
}
  ]);

  var gridView = new Ext.grid.GridView();

  var selModel = new Ext.grid.RowSelectionModel({
singleSelect : true
  });

  var grid = new Ext.grid.GridPanel({ //create a gridpanel
title : 'First Grid',
renderTo : Ext.getBody(),
autoHeight : true,
width : 250,
store : store,
view : gridView,
colModel : colModel,
selModel : selModel
 });

  console.debug('everything executed');


  </script>

  </body>
 </html>

我不知道我是否遗漏了一些脚本文件。有人可以帮帮我

1 个答案:

答案 0 :(得分:0)

以下是ExtJs 4示例:(工作fiddle

var arrayD = [
    ['Jary Garcia', 'MD'],
    ['Arron, Baker', 'VA'],
    ['Susan Smith', 'DC'],
    ['Mary Smith', 'DE'],
    ['Bryan Shanly', 'NJ'],
    ['Nyron Selgado', 'CA']
];

Ext.define('Person', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'name',  type: 'string'},
        {name: 'state',   type: 'string'}
    ]
});

var store = Ext.create('Ext.data.Store', {
     model: 'Person',
     data: arrayD 
});

var grid = Ext.create('Ext.grid.GridPanel', { //create a gridpanel
    title: 'First Grid',
    renderTo: Ext.getBody(),
    autoHeight: true,
    width: 250,
    store: store,
    columns: [
        {
            header: 'Full Name',
            sortable: true,
            dataIndex: 'name'},
        {
            header: 'State',
            dataIndex: 'state'
        }
    ]
});

console.debug('everything executed');​

您可以下载自己的版本并将其放入网络服务器或使用其中一个用于js:

//for production
<script src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all.js"></script>
//for debug => isn't minified
<script src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all-debug.js"></script>
//for development => isn't minified, logs errors and warnings to the console.
<script src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all-dev.js"></script>

用于css:

<link rel="stylesheet" type="text/css" href="htpp://cdn.sencha.io/ext-4.1.1-gpl/resources/css/ext-all.css"/>