PDA

View Full Version : Populating combo box from local xml



craigorymaas
25 Sep 2009, 7:22 AM
Hi all
I am very new to pretty much all technologies involved here.. php, javascript, and ext. Right now I am trying to populate an input combo box from an xml file. All I see is the input box every time w/out fail! Can someone help point my most likely obvious mistake? Thanks!
-craig

Here are my 3 files (the xml is edited down):

champions.xml


<league>
<champion id="Amumu" pic="/images/Amumu.jpg" avatar="/images/AmumuAvatar.jpg">
<name>
Amumu
</name>
<subname>
the Sad Mummy
</subname>
<statstype>
Strong
</statstype>
<herotype>
Tank
</herotype>
<spell name="Bandage Toss" pic="/images/Amumu_BandageToss.jpg" description="Amumu tosses a sticky bandage at a target, it stuns and damages the target while he pulls himself to them. "/>
<spell name="Despair" pic="/images/Amumu_Despair.jpg" description="Drains the health of nearby enemies."/>
<spell name="Tantrum" pic="/images/Amumu_Tantrum.jpg" description="Permamently reduces physical damage Amumu would take. Additionally, upon being hit a number of times, Amumu can unleash his rage, dealing damage to surrounding enemies."/>
<ultimate name="Curse of the Sad Mummy" pic="/images/Amumu_CurseoftheSadMummy.jpg" description="Amumu entangles surrounding enemy units in bandages, causing them to be unable to move or attack and take damage each second."/>
<passive name="Cursed Touch" pic="/images/Amumu_CursedTouch.jpg" description="This unit has reduced Magic Resistance." />
<attackstats>50</attackstats>
<defensestats>80</defensestats>
<magicstats>50</magicstats>
<difficulty>40</difficulty>
</champion>
<champion id="Rammus" pic="/images/Rammus.jpg" avatar="/images/RammusAvatar.jpg">
<name>
Rammus
</name>
<subname>
the Armordillo
</subname>
<statstype>
Strong
</statstype>
<herotype>
Tank
</herotype>
<spell name="Powerball" pic="/images/Rammus_Powerball.jpg" description="Rammus curls into a ball which accelerates towards his foes, crashing and dealing damage to minions and champions around the impact."/>
<spell name="Defensive Ball Curl" pic="/images/Rammus_DefensiveBallCurl.jpg" description="Rammus goes into a defensive form, vastly increasing his armor and magic resistance, and returning damage to attackers."/>
<spell name="Puncturing Taunt" pic="/images/Rammus_PuncturingTaunt.jpg" description="Rammus taunts a foe into recklessly attacking him, causing the foe to have lower armor for the duration of the taunt."/>
<ultimate name="Tremors" pic="/images/Rammus_Tremors.jpg" description="The earth rumbles beneath Rammus, dealing damage to nearby units and structures."/>
<passive name="Spiked Shell" pic="/images/Rammus_SpikedShell.jpg" description="Converts 20% of Rammus' armor into damage." />
<attackstats>80</attackstats>
<defensestats>70</defensestats>
<magicstats>30</magicstats>
<difficulty>40</difficulty>
</champion>
</league

champion_drop_down.js



Ext.onReady(function(){


// create the Data Store
var store = new Ext.data.Store({
autoDestroy: true,

// load remote data using HTTP
url: 'champions.xml',

reader: new Ext.data.XmlReader({
record: 'champion',
fields: [
{name: 'name', type: 'string'}
]
}),

sortInfo: {field:'name', direction:'ASC'}
});



var combo = new Ext.form.ComboBox({
store: store,
displayField:'name',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select your champion...',
selectOnFocus:true,
applyTo: 'championselect'

});

});
and finally..
championselection.php



<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="ext/ext-all-debug.js">
</script>
<script type="text/javascript" src="ext/localXHR.js">
</script>
<script type="text/javascript" src="js/champion_drop_down.js">
</script>
</head>
<body>
<div>
<input type="text" id="championselect" />
</div>
</body>

All of your help is greatly appreciated, thank you for taking the time!

Condor
25 Sep 2009, 7:55 AM
Which Ext version are you using? localXHR.js doesn't work with Ext 3.x!

Try if ext-basex.js (the version for Ext 3.x) works...

alupuli
25 Sep 2009, 12:55 PM
I done it in a diff way.
Not sure its best way or not. Store can be built in diff ways.
sure 'championselect' cannt be an '<input/>'



Ext.onReady(function(){
Ext.Ajax.request({
url: "champions.xml",
success: LoadCOmbo
});
});
function LoadCOmbo(response){
var nameNodes= Ext.DomQuery.select('league/champion/name',response.responseXML);
var nameArr=new Array();
for(var i=0; i < nameNodes.length ; i++)
nameArr[i]=new Array(nameNodes[i].firstChild.nodeValue,nameNodes[i].firstChild.nodeValue);

var form = new Ext.FormPanel({ // label settings here cascade unless overridden
url:'save-form.php',
width:300
});

var cmbo = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
lazyRender:false,
mode: 'local',
store: new Ext.data.ArrayStore({
fields: ['Value', 'Text'],
data : nameArr
}),
valueField: 'Value',
displayField: 'Text'
});

form.add(cmbo);
form.render('championselect');
}

craigorymaas
25 Sep 2009, 8:13 PM
Condor-
You are correct, I am using version 3.0. I took the localXHR include out, it wasn't even there in the ext version I had downloaded. I already had included ext-base.js. Taking out localXHR did not help unfortunately.
Thanks

craigorymaas
25 Sep 2009, 8:57 PM
alupuli -
Thank you! This worked!
I have a couple of questions though. First... when I select an item from the combo box, it appears in the middle of the box with a bunch of white space in front of it. Also, at this point I can type in the combo box and create new answers that shouldn't be possible. Is there a way to forbid the user from typing and also to left align the text w/ no white space?
Thanks again

Condor
25 Sep 2009, 10:41 PM
1. You need to configure your reader to remove the whitespace from the XML nodeValue:

reader: new Ext.data.XmlReader({
record: 'champion',
fields: [
{name: 'name', type: 'string', convert: function(v){
return v.trim();
}}
]
}),

2. Configure your ComboBox with:

editable: false

craigorymaas
25 Sep 2009, 10:54 PM
Thanks Condor! That worked great.

craigorymaas
25 Sep 2009, 10:58 PM
Is there a way to get the box to auto-deselect once an option is selected?
I always have the cursor sitting there at the end and it'd be nice if it was automatically hidden instead of having to click off of it.
Thanks

Condor
26 Sep 2009, 12:55 AM
That's not recommended, because it would break keyboard navigation.

But if you want to, you could try to call combobox.getEl().blur() in the select event.

craigorymaas
26 Sep 2009, 4:06 PM
Condor -
Thanks for all your help, you have helped me a lot. Can you recommend a good strategy or help page regarding the following topic?

I've the above code working fine. I added a button that will take me to a new page once the user has made their selection. I want to load a grid (which I have found samples of) in that page, but with xml based on the users' choice on the previous page. Right now I am loading the selection via a "?" in the url and then calling


<?php
$name=$_GET["q"];
?>


However, I don't really know how to pass this to a javascript function. I'm sure there is a pattern for something like this, maybe php is not the way to go.. Any suggestions?
Thanks again

p.s. How do I mark this page "Solved" ?