dom为null或不是ext-all-debug中的对象

时间:2013-10-03 10:58:26

标签: spring-mvc extjs extjs3

加载以下页面时出现上述错误:

<link rel="stylesheet" type="text/css" href="/extjs-crud/ext-3.4.1/resources/css/ext-all.css" />
<!-- Row Editor plugin css -->
<link rel="stylesheet" type="text/css" href="/extjs-crud/ext-3.4.1/examples/shared/examples.css" />     
<link rel="stylesheet" type="text/css" href="/extjs-crud/ext-3.4.1/examples/ux/css/RowEditor.css" />   
<script src="/extjs-crud/ext-3.4.1/adapter/ext/ext-base.js"></script> 
    <script type="text/javascript" src="/extjs-crud/ext-3.4.1/ext-all-debug.js"></script>

    <!-- Row Editor plugin js -->    
    <script src="/extjs-crud/ext-3.4.1/examples/ux/RowEditor.js"></script> 
<script type="text/javascript">

    //Record definition
    var Contact = Ext.data.Record.create(
    [ {name: 'id'}, 
    {     name: 'name',     type: 'string'}, 
    {     name: 'phone',     type: 'string'}, 
    {     name: 'email',     type: 'string'}, 
    {     name: 'birthday',     type: 'date',     dateFormat: 'm/d/Y'}
    ]);
    //Proxy definition
    var proxy = new Ext.data.HttpProxy({
         api: { 
         read : 'contact/view.action',
         create : 'contact/create.action',
         update: 'contact/update.action'}
         });
    //reader definition
    var reader = new Ext.data.JsonReader({
         totalProperty: 'total',
         successProperty: 'success',
         idProperty: 'id',
         root: 'data',
         messageProperty: 'message'
         }, Contact); 
    // The new DataWriter component.    
    var writer = new Ext.data.JsonWriter({        encode: true,        writeAllFields: false   });
    // Typical Store collecting the Proxy, Reader and Writer together.
        var store = new Ext.data.Store({ 
        id: 'user',
        proxy: proxy,
        reader: reader,
        writer: writer,  // <-- plug a DataWriter into the store just as you would a Reader
        autoSave: false // <-- false would delay executing create, update, destroy requests until specifically told to do so with some [save] buton.
        }); 
        //grid definition
        var editor = new Ext.ux.grid.RowEditor({     saveText: 'Update'});  
        // create grid 
        var grid = new Ext.grid.GridPanel({
             store: store,
             columns: [
             {header: "NAME",          width: 170,          sortable: true,
             dataIndex: 'name',          editor: {             xtype: 'textfield',             allowBlank: false        }},
             {header: "PHONE #",          width: 150,          sortable: true,
             dataIndex: 'phone',          editor: {              xtype: 'textfield',              allowBlank: false        }},
             {header: "EMAIL",          width: 150,          sortable: true,
             dataIndex: 'email',          editor: {             xtype: 'textfield',             allowBlank: false        }},
             {header: "BIRTHDAY",          width: 100,          sortable: true,
             dataIndex: 'birthday',          renderer: Ext.util.Format.dateRenderer('m/d/Y'),
             editor: new Ext.form.DateField ({             allowBlank: false,             format: 'm/d/Y',             maxValue: (new Date())         })}
             ],
             plugins: [editor],     title: 'My Contacts',     height: 300,     width:610,
             frame:true,
             tbar: [{         iconCls: 'icon-user-add',         text: 'Add Contact',
             handler: function(){
             var e = new Contact({
             name: 'New Guy',
             phone: '(000) 000-0000',
             email: 'new@loianetest.com',
             birthday: '01/01/2000'            });
             editor.stopEditing();
             store.insert(0, e);
             grid.getView().refresh();
             grid.getSelectionModel().selectRow(0);
             editor.startEditing(0);
             }
             },
             {         iconCls: 'icon-user-delete',         text: 'Remove Contact',
             handler: function(){
             editor.stopEditing();
             var s = grid.getSelectionModel().getSelections();
             for(var i = 0, r; r = s[i]; i++){
             store.remove(r);
             }
             } 
             },
             {         iconCls: 'icon-user-save',         text: 'Save All Modifications',
             handler: function(){
             store.save();
             }
             }]
             }
             ); 
        var stateForm = new Ext.FormPanel({
        frame:true,
        title: 'Grid Example',
        bodyStyle:'padding:5px 5px 0',
        width: 250,
        labelAlign: 'top',
        layout: 'form',
        items: [grid]
        });


    stateForm.render(document.body);

感谢任何进一步挖掘的帮助。

1 个答案:

答案 0 :(得分:0)

您必须执行以下代码:

Еxt.onReady(function(){
     ....
});