PDA

View Full Version : need help with form loading xml



nels2k
22 Sep 2009, 9:58 AM
i've been working on this for a really long time now and cant seem to get this to work. what im trying to do is create a form with different fields such as combo boxes, textareas, and itemselector which loads all of its info from an xml file.

first issue i have is that the itemselector doesn't drag and drop properly since when something is dropped in the next box it appears blank.

second issue is that when i load the xml in the combo boxes only the first instance of a tag is being displayed.

hopefully i can get some help because this is just getting really frustrating.


/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* [email protected]
* http://www.extjs.com/license
*/
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';

// simple array store
var store = new Ext.data.ArrayStore({
fields: ['abbr', 'state', 'nick'],
data : Ext.exampledata.states // from states.js
});
var ds = new Ext.data.ArrayStore({
data: [[123,'One Hundred Twenty Three'],
['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
fields: ['value','text'],
sortInfo: {
field: 'value',
direction: 'ASC'
}
});
var repStore = new Ext.data.XmlStore({
// store configs
autoDestroy: true,
autoLoad: true,
storeId: 'repStore',
url: 'report.xml', // automatically configures a HttpProxy
// reader configs
record: 'r',
fields: [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: 'name', mapping: 'name'},'desc'
]
});

var allowedStore = new Ext.data.XmlStore({
// store configs
autoDestroy: true,
autoLoad: true,
storeId: 'allowedStore',
url: 'report.xml', // automatically configures a HttpProxy
// reader configs
record: 'allowedcolumns',
fields: [
{name: 'ac', mapping: 'ac'}
]
});
var timeStore = new Ext.data.XmlStore({
// store configs
autoDestroy: true,
autoLoad: true,
storeId: 'timeStore',
url: 'report.xml', // automatically configures a HttpProxy
// reader configs
record: 'storage',
fields: [
{name: 'period', mapping: 'qmw > period'},
{name: 'q', mapping: 'quarter > q'},
{name: 'm', mapping: 'month > m'},
{name: 'd', mapping: 'day > d'},
{name: 'h', mapping: 'hour > h'},
{name: 'min', mapping: 'minute > min'}
]
});

var simple = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
title: 'Report Form',
width: 700,
bodyStyle: 'padding:10px;',

// configure how to read the XML Data
/* reader : new Ext.data.XmlReader({
record : 'r',
success: '@success'
}, [
{name: 'desc', mapping: 'desc'}
]),*/

items: [
new Ext.form.ComboBox({
store: repStore,
displayField:'name',
mode: 'local',
width: 250,
typeAhead: true,
forceSelection: true,
triggerAction: 'all',
emptyText:'Choose a Report To Work With',
selectOnFocus:true,
}),
new Ext.form.ComboBox({
store: store,
displayField:'state',
width: 250,
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText:'All Staff / My Staff',
selectOnFocus:true,
}),
new Ext.form.ComboBox({
store: timeStore,
displayField:'period',
width: 250,
mode: 'local',
typeAhead: true,
forceSelection: true,
triggerAction: 'all',
emptyText:'Quarterly / Monthly / Weekly',
selectOnFocus:true,
}),
new Ext.form.ComboBox({
store: timeStore,
displayField:'q',
width: 250,
mode: 'local',
typeAhead: true,
forceSelection: true,
triggerAction: 'all',
emptyText:'Quarter',
selectOnFocus:true,
}),
new Ext.form.ComboBox({
store: timeStore,
displayField:'m',
typeAhead: true,
width: 250,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText:'Month',
selectOnFocus:true,
}),
new Ext.form.ComboBox({
store: timeStore,
displayField:'d',
width: 250,
mode: 'local',
typeAhead: true,
forceSelection: true,
triggerAction: 'all',
emptyText:'Day of Week',
selectOnFocus:true,
}),
new Ext.form.ComboBox({
store: timeStore,
displayField:'h',
width: 250,
mode: 'local',
typeAhead: true,
forceSelection: true,
triggerAction: 'all',
emptyText:'Hour',
selectOnFocus:true,
}),
new Ext.form.ComboBox({
store: timeStore,
displayField:'min',
width: 250,
mode: 'local',
typeAhead: true,
forceSelection: true,
triggerAction: 'all',
emptyText:'Minute',
selectOnFocus:true,
}),
new Ext.form.ComboBox({
store: timeStore,
displayField:'period',
width: 250,
mode: 'local',
typeAhead: true,
forceSelection: true,
triggerAction: 'all',
emptyText:'Quarterly / Monthly / Weekly',
selectOnFocus:true,
}),
new Ext.form.ComboBox({
store: timeStore,
displayField:'q',
width: 250,
mode: 'local',
typeAhead: true,
forceSelection: true,
triggerAction: 'all',
emptyText:'Quarter',
selectOnFocus:true,
}),
new Ext.form.ComboBox({
store: timeStore,
displayField:'m',
width: 250,
mode: 'local',
typeAhead: true,
forceSelection: true,
triggerAction: 'all',
emptyText:'Month',
selectOnFocus:true,
}),
new Ext.form.ComboBox({
store: timeStore,
width: 250,
mode: 'local',
displayField:'d',
typeAhead: true,
forceSelection: true,
triggerAction: 'all',
emptyText:'Day of Week',
selectOnFocus:true,
}),
new Ext.form.ComboBox({
store: timeStore,
displayField:'h',
width: 250,
mode: 'local',
typeAhead: true,
forceSelection: true,
triggerAction: 'all',
emptyText:'Hour',
selectOnFocus:true,
}),
new Ext.form.ComboBox({
store: timeStore,
displayField:'min',
width: 250,
mode: 'local',
typeAhead: true,
forceSelection: true,
triggerAction: 'all',
emptyText:'Minute',
selectOnFocus:true,
}),
new Ext.form.ComboBox({
store: store,
displayField:'',
typeAhead: true,
width: 250,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText:'Group / Sort by First Column',
selectOnFocus:true,
}),
new Ext.form.ComboBox({
store: store,
width: 250,
mode: 'local',
displayField:'state',
typeAhead: true,
forceSelection: true,
triggerAction: 'all',
emptyText:'Portrait / Landscape',
selectOnFocus:true,
}),
new Ext.form.ComboBox({
store: store,
width: 250,
displayField:'state',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText:'Page Size 8.5x11 or 11x17',
selectOnFocus:true,
}),
new Ext.form.Checkbox({
boxLabel: 'Enabled',
checked: 'true',
}),
new Ext.form.Checkbox({
boxLabel: 'Enabled',
checked: 'true',
}),
new Ext.form.TextArea({
name: 'desc',
width: 400,
height: 75,
readOnly: true,
}),
new Ext.form.TextField({
value: 'CC',
}),
new Ext.form.TextField({
value: 'BCC',
}),{
xtype: 'itemselector',
name: 'itemselector',
hideLabel:true,
drawUpIcon:false,
drawDownIcon:false,
drawTopIcon:false,
drawBotIcon:false,
imagePath: '../examples/ux/images/',
multiselects: [{
legend: 'Allowed Columns',
width: 250,
height: 200,
store: allowedStore,
displayField: 'ac',
valueField: 'ac',
},{
legend: 'Choosen Columns',
width: 250,
height: 200,
store: allowedStore,
displayField: 'ac',
valueField: 'ac',
tbar:[{
text: 'clear',
handler:function(){
simple.getForm().findField('itemselector').reset();
}
}]
}]
}],

buttons: [{
text: 'Save',
handler: function(){
if(simple.getForm().isValid()){
Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
simple.getForm().getValues(true));
}
}
}]
});
// simple button add
simple.addButton('Load', function(){
simple.getForm().load({url:'report.xml', waitMsg:'Loading'});
});
simple.render(document.body);
});

and the xml looks like,


<?xml version="1.0" encoding="UTF-8"?>
<message success="true">
<report>
<r>
<name>report 1</name>
<desc>this report does 1</desc>
</r>
<r>
<name>report 2</name>
<desc>this report does 2</desc>
</r>

<staff>
<s>All Staff</s>
<s>My Staff</s>
</staff>

<storage>

<qmw>
<period>Quarterly</period>
<period>Monthly</period>
<period>Weekly</period>
</qmw>
<quarter>
<q>1</q>
<q>2</q>
<q>3</q>
<q>4</q>
</quarter>
<month>
<m>1</m>
<m>2</m>
<m>3</m>
<m>4</m>
<m>5</m>
<m>6</m>
<m>7</m>
<m>8</m>
<m>9</m>
<m>10</m>
<m>11</m>
<m>12</m>
</month>
<day>
<d>1</d>
<d>2</d>
<d>3</d>
<d>4</d>
<d>5</d>
<d>6</d>
<d>7</d>
</day>
<hour>
<h>1</h>
<h>2</h>
<h>3</h>
<h>4</h>
<h>5</h>
<h>6</h>
</hour>
<minute>
<min>1</min>
<min>2</min>
<min>3</min>
<min>4</min>
<min>5</min>
</minute>
</storage>

<cc>CC</cc>
<bcc>BCC</bcc>

<allowedcolumns>
<ac>Firstname</ac>
<ac>Lastname</ac>
<ac>Score</ac>
<ac>Email</ac>
<ac>Manager</ac>
</allowedcolumns>

<layout>
<l>Portrait</l>
<l>Landscape</l>
</layout>

<psize>
<size>8.5x11</size>
<size>11x17</size>
</psize>

</report>
</message>

Animal
22 Sep 2009, 10:25 AM
Are you really wedded to XML?

Because JSON is SO much simpler.

nels2k
22 Sep 2009, 10:33 AM
if switching to json is what it takes to get this to work im willing to switch.

Animal
22 Sep 2009, 10:37 AM
Start simpler.

First load a one input form (A text field) from a JSON file.

Then load a JsonStore (which the combos will be backed by)

Then load a form containing multi inputs.

nels2k
22 Sep 2009, 12:37 PM
thanks Animal, ive done what you said but im getting stuck making a jsonstore work.

my json file looks like:


{
r:[
{
name:'report 1',
desc:'this report does 1'
},
{
name:'report 2',
desc:'this report does 2'
}
],
staff:{
s:[
'All Staff',
'My Staff'
]
},
storage:{
qmw:{
period:[
'Quarterly',
'Monthly',
'Weekly'
]
},
quarter:{
q:[
1,
2,
3,
4
]
},
month:{
m:[
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12
]
},
day:{
d:[
1,
2,
3,
4,
5,
6,
7
]
},
hour:{
h:[
1,
2,
3,
4,
5,
6
]
},
minute:{
min:[
1,
2,
3,
4,
5
]
}
},
cc:'CC',
bcc:'BCC',
allowedcolumns:{
ac:[
'Firstname',
'Lastname',
'Score',
'Email',
'Manager'
]
},
layout:{
l:[
'Portrait',
'Landscape'
]
},
psize:{
size:[
'8.5x11',
'11x17'
]
}
}

and im trying to create a jsonstore that will load several combo boxes with the data in the storage section (period,q,m,d, etc). each one should be loaded in a separate combo box.

wat i have so far is:

var timeStore = new Ext.data.JsonStore({
// store configs
autoDestroy: true,
autoLoad: true,
storeId: 'timeStore',
url: 'report.json', // automatically configures a HttpProxy
// reader configs
record: 'storage',
fields: [
{name: 'period', mapping: 'qmw > period'},
{name: 'q', mapping: 'quarter > q'},
{name: 'm', mapping: 'month > m'},
{name: 'd', mapping: 'day > d'},
{name: 'h', mapping: 'hour > h'},
{name: 'min', mapping: 'minute > min'}
]
});

Animal
22 Sep 2009, 1:02 PM
A JsonStore needs a root. See the API docs for the example to follow.

nels2k
22 Sep 2009, 1:25 PM
sorry that was a mistake due to copy and paste, but even replacing the record: to root: i cannot get the data to display in the combo boxes. i was having a similar problem with the xml but with xml i would atleast get the first entry of each section.

also wondering if u can help me with events. how would i go about setting the value of a textarea depending on the selection of a combo box.

thanks in advance.

Animal
22 Sep 2009, 1:28 PM
First things first. Get the Store loading.

So what does the code look like now?

Animal
22 Sep 2009, 1:29 PM
Your storage property is sideways.

READ the API docs more carefully. They are very carefully crafted to truthfully describe EXACTLY what is going on.

And READ THE EXAMPLE!

nels2k
22 Sep 2009, 1:43 PM
sorry if im being a bit annoying but ive been struggling with this for almost a month now. i've read the jsonStore example and thats what i used as a starting point. i have one combo box which works fine and loads both names from the r property. later depending on the name i will have to load the description into a textarea.

now im trying to get the other combo boxes to load with the data within the storage property which has other embeded properties(qmw,quarter,day,...). not sure if its a problem with the jsonStore or if its with the json file itsself but all i seem to get is blank combo boxes.

the json file is the same as above, and my new jsonstore looks like:

var timeStore = new Ext.data.JsonStore({
// store configs
autoDestroy: true,
autoLoad: true,
storeId: 'timeStore',
url: 'report.json', // automatically configures a HttpProxy
// reader configs
root: 'storage',
fields: [
{name: 'period', mapping: 'qmw > period'},
{name: 'q', mapping: 'quarter > q'},
{name: 'm', mapping: 'month > m'},
{name: 'd', mapping: 'day > d'},
{name: 'h', mapping: 'hour > h'},
{name: 'min', mapping: 'minute > min'}
]
});

thanks

Animal
22 Sep 2009, 11:11 PM
You have not followed the example, nor read, and mentally parsed the description of the root

config: "The name of the property which contains the Array of row objects"

The example code:



var myReader = new Ext.data.JsonReader({
// metadata configuration options:
idProperty: 'id'
root: 'rows',
totalProperty: 'results',

// the fields config option will internally create an Ext.data.Record
// constructor that provides mapping for reading the record data objects
fields: [
// map Record's 'firstname' field to data object's key of same name
{name: 'name'},
// map Record's 'job' field to data object's 'occupation' key
{name: 'job', mapping: 'occupation'}
]
});


The example data:



{
results: 2000, // Reader's configured totalProperty
rows: [ // Reader's configured root
// record data objects:
{ id: 1, firstname: 'Bill', occupation: 'Gardener' },
{ id: 2, firstname: 'Ben' , occupation: 'Horticulturalist' },
...
]
}

In what way does this NOT tell you what to do?