加载以下页面时出现上述错误:
<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);
感谢任何进一步挖掘的帮助。
答案 0 :(得分:0)
您必须执行以下代码:
Еxt.onReady(function(){
....
});