1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> Upload Layer - EtherSpat </title>
<form action="."
enctype="multipart/form-data" method="post">
<p>
Type some text (if you like):<br>
<input type="text" name="textline" size="30">
</p>
<p>
Upload a shp file:<br>
<input type="file" name="shp" size="40">
</p>
Upload a shx file:<br>
<input type="file" name="shx" size="40">
</p>
Upload a dbf file:<br>
<input type="file" name="prj" size="40">
</p>
Upload a dbf file:<br>
<input type="file" name="dbf" size="40">
</p>
<div>
<input type="submit" value="Send">
</div>
</form>
<link rel="stylesheet" type="text/css" href="../geodjango/geographic_admin/templates/ext-4.0.1
/ext-all.css" />
<script type="text/javascript" src="../geodjango/geographic_admin/templates/ext-4.0.1
/ext-all.js"></script>
<script src="http://demo.geonode.org/media/static/script/OpenLayers.js"></script>
<script type="text/javascript" src="/lang.js"></script>
<script type="text/javascript">
{% autoescape off %}
Ext.onReady(function(){
Ext.QuickTips.init();
var form_target = "{% url maps.views.upload_layer %}";
// var xml_unsafe = /([^a-zA-Z\._])/g;
var xml_safe = /([a-zA-Z]+_[a-zA-Z]+_[1-2]{1}[0-9]{3}_[a-zA-Z]+$)/g;
var layer_name = new Ext.form.TextField({
id: 'layer_name',
fieldLabel: gettext('Name'),
name: 'layer_name',
emptyText: gettext('Unique name for layer. Defaults to file name.'),
validator: function(name) {
if (name.search(xml_safe) == -1) {
return gettext("The layer name must follow a pattern. Statename_city_year_datatype");
} else {
return true;
}
},
allowBlank: false
});
var listeners = {
"fileselected": function(cmp, value) {
// remove the path from the filename - avoids C:/fakepath etc.
cmp.setValue(value.split(/[/\\]/).pop());
}
};
var base_file = new Ext.ux.form.FileUploadField({
id: 'base_file',
emptyText: gettext('Select a layer data file'),
fieldLabel: gettext('File'),
name: 'base_file',
allowBlank: false,
listeners: listeners
});
var dbf_file = new Ext.ux.form.FileUploadField({
id: 'dbf_file',
emptyText: gettext('Select a .dbf data file'),
fieldLabel: gettext('DBF'),
name: 'dbf_file',
allowBlank: false,
listeners: listeners
});
var shx_file = new Ext.ux.form.FileUploadField({
id: 'shx_file',
emptyText: gettext('Select a .shx data file'),
fieldLabel: gettext('SHX'),
name: 'shx_file',
allowBlank: false,
listeners: listeners
});
var prj_file = new Ext.ux.form.FileUploadField({
id: 'prj_file',
emptyText: gettext('Select a .prj data file (optional)'),
fieldLabel: gettext('PRJ'),
name: 'prj_file',
allowBlank: true,
listeners: listeners
});
var fp = new Ext.FormPanel({
renderTo: 'upload_form',
fileUpload: true,
width: 500,
frame: true,
title: gettext('Upload Layer Data'),
autoHeight: true,
bodyStyle: 'padding: 10px 10px 0 10px;',
labelWidth: 50,
defaults: {
anchor: '95%',
msgTarget: 'side'
},
items: [layer_name, base_file, dbf_file, shx_file, prj_file, {
xtype: "hidden",
name: "csrfmiddlewaretoken",
value: "{{ csrf_token }}"
}],
buttons: [{
text: gettext('Upload'),
handler: function(){
if (fp.getForm().isValid()) {
fp.getForm().submit({
url: form_target,
waitMsg: gettext('Uploading your data...'),
success: function(fp, o) {
document.location = o.result.redirect_to;
},
failure: function(fp, o) {
error_message = '<ul>';
for (var i = 0; i < o.result.errors.length; i++) {
error_message += '<li>' + o.result.errors[i] + '</li>'
}
error_message += '</ul>'
Ext.Msg.show({
title: gettext("Error"),
msg: error_message,
minWidth: 200,
modal: true,
icon: Ext.Msg.ERROR,
buttons: Ext.Msg.OK
});
}
});
}
}
}]
});
var disable_shapefile_inputs = function() {
dbf_file.disable();
dbf_file.el.parent('.x-form-item').hide();
shx_file.disable();
shx_file.el.parent('.x-form-item').hide();
prj_file.disable();
prj_file.el.parent('.x-form-item').hide();
};
var enable_shapefile_inputs = function() {
dbf_file.enable();
dbf_file.el.parent('.x-form-item').show();
shx_file.enable();
shx_file.el.parent('.x-form-item').show();
prj_file.enable();
prj_file.el.parent('.x-form-item').show();
};
var check_shapefile = function() {
var main_filename = base_file.getValue();
if (main_filename.search(/\.shp$/i) != -1) {
enable_shapefile_inputs();
}
else {
disable_shapefile_inputs();
}
};
base_file.addListener('fileselected', function(cmp, value) {
check_shapefile();
var main_filename = value.split(/[/\\]/).pop();
var extension_index = main_filename.search(/\.\w+$/i);
if (extension_index != -1 && layer_name.getValue() == "") {
var cleaned = main_filename.substring(0, extension_index);
cleaned = cleaned.replace(xml_safe, "_");
layer_name.setValue(cleaned);
}
});
disable_shapefile_inputs();
});
{% endautoescape %}
</script>
这是代码。我知道我需要包含ext-base.js，但是我下载的ext-4软件包中没有这样的文件。是否需要遵循某个特定路径，因为文件需要位于某个目录中才能在Django中运行？此html文件位于模板文件夹中，ext-4文件夹也位于模板文件夹中。Ext.On Ready（）函数在上载表单中未定义错误。如何调试它？