combobox JSON Call

[RockDad44]

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]

Is ROOT "rows" or "columns"?

[RockDad44]

rows. I have tried both and still nothing.

[devtig]

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/exa...rm/combos.html , but strangely enough that page doesn't have mode='remote' examples.

[RockDad44]

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]

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/doc...Ext.data.Store
http://dev.sencha.com/deploy/dev/doc....form.ComboBox

[RockDad44]

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]

I do. I copied your code into my Ext.onReady. Which Ext version are you running?

[RockDad44]

I'm running 2.3.0. Argh!!!

[devtig]

I waisted my time...