PDA

View Full Version : combobox JSON Call



RockDad44
30 Nov 2010, 12:46 PM
Okay, I'm banging my head against the wall and cannot figure out why my combo box isn't populating with data and I get no errors in IE or FireFox.


var genres = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['id', 'genre_name'],
root: 'rows'
}),
proxy: new Ext.data.HttpProxy({
url: 'genre.cfm'
}),
autoLoad: true
});

{
xtype: 'combo',
name: 'genre',
fieldLabel: 'Genre',
mode: 'Remote',
store: genres,
displayField: 'genre_name',
width: 120
}

Data Page (genre.cfm)
<cfquery name="getMovies" datasource="NMLCwebEMS">
Select id, genre_name
FROM MOVIES
</cfquery>
<cfscript>
rows = serializeJSON(getMovies, false);
</cfscript>
<cfoutput>#rows#</cfoutput>

{"COLUMNS":["ID","GENRE_NAME"],"DATA":[[1,"Comedy"],[2,"Drama"],[3,"Horror"],[4,"Action"],[5,"Mystery"]]}

Any ideas would be appreciated as I am new to this and learning by simple examples. Thanks in Advance!

-David

mjhaston
30 Nov 2010, 12:52 PM
Is ROOT "rows" or "columns"?

RockDad44
30 Nov 2010, 12:57 PM
rows. I have tried both and still nothing. :(

devtig
30 Nov 2010, 1:25 PM
1. You shoul define valueField: 'id'
2. Fields defined and what server output should match in CaSe. DATA vs data
3. Your server should output

{
data: [
{id: 1, genre_name: "Comedy"},
{id: 2, genre_name: "Drama"}
]
}

I was going to point you to http://dev.sencha.com/deploy/dev/examples/form/combos.html , but strangely enough that page doesn't have mode='remote' examples.

RockDad44
30 Nov 2010, 1:43 PM
Thanks for the reply. I have made some of these changes but still no data:


{
xtype: 'combo',
name: 'genre',
fieldLabel: 'Genre',
mode: 'Remote',
store: genres,
displayField: 'GENRE_NAME',
valueField: 'ID',
tirggerAction: 'All',
width: 120
}

var genres = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['ID', 'GENRE_NAME'],
root: 'DATA'
}),
proxy: new Ext.data.HttpProxy({
url: 'genre.cfm'
})
});
genres.load();


My output from coldfusion seems to display one of two ways:
Rows: {"ROWCOUNT":5,"COLUMNS":["ID","GENRE_NAME"],"DATA":{"ID":[1,2,3,4,5],"GENRE_NAME":["Comedy","Drama","Horror","Action","Mystery"]}}
OR
Columns: {"COLUMNS":["ID","GENRE_NAME"],"DATA":[[1,"Comedy"],[2,"Drama"],[3,"Horror"],[4,"Action"],[5,"Mystery"]]}

devtig
30 Nov 2010, 10:41 PM
The first output (with the ROWCOUNT) is not going to work with Ext. Use the second output with DATA: [[...],[...],[...]]

Here's the fish:

var genres = new Ext.data.Store({
url: 'genre.cfm',
reader: new Ext.data.ArrayReader({
fields: ['ID', 'GENRE_NAME'],
root: 'DATA',
idIndex: 0
}),
autoLoad: true
});

var combo = new Ext.form.ComboBox({
name: 'genre',
fieldLabel: 'Genre',
mode: 'local',
store: genres,
displayField: 'GENRE_NAME',
valueField: 'ID',
width: 120,
//renderTo: Ext.getBody()
});

Here's the rod:
http://dev.sencha.com/deploy/dev/docs/?class=Ext.data.Store
http://dev.sencha.com/deploy/dev/docs/?class=Ext.form.ComboBox

RockDad44
1 Dec 2010, 7:05 AM
Dev, Thanks again for your reply and your help. I still get no data to show in the combobox. Argh!!! Sorry, I'm pretty new at the extJS stuff.

extJS Code:


<script>

Ext.form.VTypes['nameVal'] = /^[A-Z][A-Za-z\-] + [A-Z][A-Za-z\-]*$/;
Ext.form.VTypes['nameMask'] = /[A-Za-z\-]/;
Ext.form.VTypes['nameText'] = 'Invalid Director Name';
Ext.form.VTypes['name'] = function(v) {
return Ext.form.VTypes['nameVal'].test(v);
}
Ext.onReady(function() {

Ext.QuickTips.init();

var genres = new Ext.data.Store({
url: 'genre.cfm',
reader: new Ext.data.ArrayReader({
fields: ['ID', 'GENRE_NAME'],
root: 'DATA',
idIndex: 0
}),
autoLoad: true
});

var movie_form = new Ext.FormPanel ({
url: 'movie-form-submit.cfm',
renderTo: document.body,
frame: true,
title: 'Movie Information Form',
width: 250,
items: [{
xtype: 'textfield',
fieldLabel: 'Title',
name: 'title',
allowBlank: false
},
{
xtype: 'textfield',
fieldLabel: 'Director',
name: 'director',
vtype: 'alpha'
},
{
xtype: 'datefield',
fieldLabel: 'Released',
name: 'released',
disabledDays: [1,2,3,4,5]
},
{
xtype: 'radio',
fieldLabel: 'Filmed In',
name: 'filmed_in',
boxLabel: 'Color'
},
{
xtype: 'radio',
hideLabel: false,
labelSeparator: '',
name: 'filmed_in',
boxLabel: 'Black & White'
},
{
xtype: 'checkbox',
fieldLabel: 'Bad Movie',
name: 'bad_movie'
},
{
xtype: 'combo',
name: 'genre',
fieldLabel: 'Genre',
mode: 'local',
store: genres,
displayField: 'GENRE_NAME',
valueField: 'ID',
width: 120
}

]
});
});

</script>


Data from genre.cfm

{"COLUMNS":["ID","GENRE_NAME"],"DATA":[[1,"Comedy"],[2,"Drama"],[3,"Horror"],[4,"Action"],[5,"Mystery"]]}

devtig
1 Dec 2010, 7:26 AM
I do. I copied your code into my Ext.onReady. Which Ext version are you running?

RockDad44
1 Dec 2010, 7:30 AM
I'm running 2.3.0. Argh!!!

devtig
1 Dec 2010, 7:32 AM
I waisted my time...

RockDad44
1 Dec 2010, 7:37 AM
I'm so sorry about that! Is this for 3.x version?

devtig
1 Dec 2010, 7:39 AM
Yep. Your in Ext JS Community Forums (3.0). At least I helped you figure out you're on an old version.

RockDad44
1 Dec 2010, 7:44 AM
! I'm so sorry, I didn't realize that. Thank you very much for your help!!!!

-David