View Full Version : Trying to load, modify and save an XML to and from a form

1 Aug 2010, 12:09 PM
Hi all, I'm new to Ext JS and to the forums, so please bear with me. I have a web project that I thought I would try out in Ext JS. The goal of this project is to take an XML file selected from a fileupload, populate it to a form, make any changes to it, and save any changes to that XML file. Pretty simple right? Well, I'm having trouble.

My index.html is pretty simply:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>LegendMUD Area Builder v1.0</title>

<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="fileuploadfield.css"/>

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="ext/adapter/jquery/ext-jquery-adapter.js"></script>
<script type="text/javascript" src="ext/adapter/jquery/jquery.json-1.3.min.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="areabuilder.js"></script>
<script type="text/javascript" src="FileUploadField.js"></script>

<style text="css">
#header {
background: #7F99BE url(layout-browser-hd-bg.gif) repeat-x center;
#header h1 {
font-family: calibri;
font-size: 18px;
color: #fff;
font-weight: normal;
margin: 0;
padding: 10px 10px;
.openicon {
background-image: url( images/folder-open.gif ) !important;
.saveicon {
background-image: url( images/disk.png ) !important;
.newicon {
background-image: url( images/new.gif ) !important;

<div id="header"><h1>LegendMUD Area Builder v1.0</h1></div>
</html>My area.xml file code:

<?xml version="1.0" encoding="UTF-8"?>
<areaTitle>R.M.S. Titanic</areaTitle>
My areaBuilder.js code:

* Ext JS Library 2.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* [email protected]
* http://extjs.com/license

// global vars

var url = '';

var areaTpl = Ext.data.Record.create([
{name: 'areaTitle', mapping: 'areaInfo/areaTitle'}, 'areaAuthor']);

var reader = new Ext.data.XmlReader({
record : 'area',
success: '@success'
}, areaTpl);


// begin area builder layout

var fuOpen = new Ext.ux.form.FileUploadField({
id: 'fuOpen',
buttonOnly: true,
listeners: {
'fileselected': function(fb, v) {
url = v;
fpBuilder.getForm().load({url:url, waitMsg:'Loading '+url});
buttonCfg: {
text: '',
iconCls: 'openicon'

var txfAreaTitle = new Ext.form.TextField({
id: 'txfAreaTitle',
fieldLabel: 'Title',
name: 'areaTitle'

var txfAreaAuthor = new Ext.form.TextField({
id: 'txfAreaAuthor',
fieldLabel: 'Author',
name: 'areaAuthor'

var fsAreaInfo = new Ext.form.FieldSet({
id: 'fsAreaInfo',
title: 'Area Info',
layout: 'form',
border: false,
bodyStyle: 'padding: 0'
items: [txfAreaTitle, txfAreaAuthor]

var pGeneral = new Ext.Panel({
id: 'pGeneral',
title: 'General',
items: [fsAreaInfo]

var pRooms = new Ext.Panel({
id: 'pRooms',
title: 'Rooms',
items: []

var pItems = new Ext.Panel({
id: 'pItems',
title: 'Items',
items: []

var pMobiles = new Ext.Panel({
id: 'pMobiles',
title: 'Mobiles',
items: []

var pActs = new Ext.Panel({
id: 'pActs',
title: 'Acts',
items: []

var pMisc = new Ext.Panel({
id: 'pMisc',
title: 'Misc',
items: []

var tbBuilder = new Ext.TabPanel ({
id: 'tbBuilder',
region: 'center',
height: 'auto',
width: '100%',
layoutOnTabChange: true,
deferredRender: false,
activeTab: 0,
defaults: {
bodyStyle: 'padding: 5px',
autoScroll: true
items: [pGeneral, pRooms, pMobiles, pItems, pActs, pMisc]

var btnNew = new Ext.Button ({
id: 'btnNew',
text: 'New',
iconCls: 'newicon'

Ext.getCmp('btnNew').on('click', function(e){
title: 'Wait!',
msg: 'Are you sure you want a new area? Any unsaved work will be lost.',
icon: Ext.MessageBox.QUESTION,
buttons: Ext.MessageBox.OKCANCEL,
fn: function okcancel(r) {
if (r == 'ok') {fpBuilder.getForm().reset();}

var btnSave = new Ext.Button ({
id: 'btnSave',
text: 'Save',
iconCls: 'saveicon',
handler: function() {
// save fns

var tlbBuilder = new Ext.Toolbar ({
id: 'tlbBuilder',
region: 'north',
height: '22',
width: 'auto',
border: false,
items: [fuOpen, '-', btnNew, '-', btnSave]

var pHelp = new Ext.Panel ({
id: 'pHelp',
region: 'south',
collapsible: true,
title: 'Help',
height: 100,
border: false,
cls: 'help',
bodyStyle: 'padding: 5px',
autoScroll: true,
html: 'Click section text to generate a help file.'

var fpBuilder = new Ext.FormPanel ({
id: 'fpBuilder',
title: 'Building Options',
region: 'west',
layout: 'border',
collapsible: true,
margins: '5 0 5 5',
width: 425,
waitMsgTarget: true,
fileUpload: true,
reader: reader,
store: store,
defaults: {
border: false
autoScroll: true,
items: [tlbBuilder, tbBuilder, pHelp]

var pSection = new Ext.Panel ({
id: 'pSection',
layout: 'card',
region: 'center',
title: 'Section',
margins: '5 5 5 5',
items: []

var vpBuilder = new Ext.Viewport ({
id: 'vpBuilder',
layout: 'border',
items: [fpBuilder, pSection]

// end area builder layout

I have read through the FAQs, the forums, the tutorials and demos, I've looked through my local examples, and even google several XML related topics. The problem might just be that I'm in over my head. Could someone shed some light on this issue for me, or perhaps lead me in the right direction?

I should mention that I am able to open area.xml and have it populate my form. Just having trouble saving changes to the xml file.

Thanks in advance!


1 Aug 2010, 4:10 PM
Anyone able to assist me, please?

1 Aug 2010, 8:13 PM
Hi Brian,

Are you submitting the form, and saving the changes server-side? http://www.sencha.com/deploy/dev/docs/?class=Ext.form.BasicForm&member=submit I noticed a comment of Ext JS 2.2...are you running 3.2? If not, it's highly recommended to upgrade :-)

Let me know if you're simply trying to submit your form changes. That should be fairly straight forward through the submit() method, or by getting the field values and doing an Ext.Ajax.request() directly.

1 Aug 2010, 8:48 PM
Jarred, thanks so much for addressing my post. I do have 3.2, if I mentioned 2.2 that was a typo. That said, isn't there an even easier way to update an xml file? I know submitting it is pretty straight forward, but I was hoping not to have to write php scripts.

If I do choose to submit the form entirely, how hard is it to incorporate Ext JS validation? I know I'm all over the place with your response.


1 Aug 2010, 9:43 PM
1. No, you can't modify files from javascript. You will always need a server app to do this. The only exception is when you have a server that accepts a PUT command to upload/overwrite a file.

2. What kind of validation would you like?

2 Aug 2010, 3:46 AM
I figure as much, but wasn't sure what kind of goodies Ext JS offered. As for validation, I was hoping that if I did write PHP scripts to handle my CRUD, I could still use the Quicktips().


2 Aug 2010, 4:23 AM
Of course you can still use quicktips? Why would you think you couldn't?