Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: combobox JSON Call

  1. #1
    Ext User
    Join Date
    Apr 2010
    Location
    Frederick, MD
    Posts
    13

    Smile combobox JSON Call

    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.
    Code:
    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
    - David

  2. #2

    Join Date
    Jan 2008
    Location
    Levittown, PA
    Posts
    364

    Default

    Is ROOT "rows" or "columns"?

  3. #3
    Ext User
    Join Date
    Apr 2010
    Location
    Frederick, MD
    Posts
    13

    Default

    rows. I have tried both and still nothing.
    - David

  4. #4
    Ext JS Premium Member devtig's Avatar
    Join Date
    Jan 2010
    Location
    Rotterdam, The Netherlands
    Posts
    422

    Default

    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
    Code:
    {
      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.
    Christiaan Westerbeek @ Devotis
    Contact me for help with Ext JS, Node JS, FireBase, AngularJS and Javascript in general. Email me or find me at AirPair to connect.

  5. #5
    Ext User
    Join Date
    Apr 2010
    Location
    Frederick, MD
    Posts
    13

    Default

    Thanks for the reply. I have made some of these changes but still no data:
    Code:
    {
        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"]]}
    - David

  6. #6
    Ext JS Premium Member devtig's Avatar
    Join Date
    Jan 2010
    Location
    Rotterdam, The Netherlands
    Posts
    422

    Default

    The first output (with the ROWCOUNT) is not going to work with Ext. Use the second output with DATA: [[...],[...],[...]]

    Here's the fish:
    Code:
    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
    Christiaan Westerbeek @ Devotis
    Contact me for help with Ext JS, Node JS, FireBase, AngularJS and Javascript in general. Email me or find me at AirPair to connect.

  7. #7
    Ext User
    Join Date
    Apr 2010
    Location
    Frederick, MD
    Posts
    13

    Default

    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:
    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
    Code:
    {"COLUMNS":["ID","GENRE_NAME"],"DATA":[[1,"Comedy"],[2,"Drama"],[3,"Horror"],[4,"Action"],[5,"Mystery"]]}
    Attached Images Attached Images
    - David

  8. #8
    Ext JS Premium Member devtig's Avatar
    Join Date
    Jan 2010
    Location
    Rotterdam, The Netherlands
    Posts
    422

    Default

    I do. I copied your code into my Ext.onReady. Which Ext version are you running?
    Attached Images Attached Images
    Christiaan Westerbeek @ Devotis
    Contact me for help with Ext JS, Node JS, FireBase, AngularJS and Javascript in general. Email me or find me at AirPair to connect.

  9. #9
    Ext User
    Join Date
    Apr 2010
    Location
    Frederick, MD
    Posts
    13

    Default

    I'm running 2.3.0. Argh!!!
    - David

  10. #10
    Ext JS Premium Member devtig's Avatar
    Join Date
    Jan 2010
    Location
    Rotterdam, The Netherlands
    Posts
    422

    Default

    I waisted my time...
    Christiaan Westerbeek @ Devotis
    Contact me for help with Ext JS, Node JS, FireBase, AngularJS and Javascript in general. Email me or find me at AirPair to connect.

Page 1 of 2 12 LastLast

Similar Threads

  1. Call a json request in a Ext.data.store
    By Everio in forum Sencha Touch 1.x: Discussion
    Replies: 8
    Last Post: 19 Aug 2010, 11:47 PM
  2. Problem loading static JSON into TreePanel config from a web method call
    By parky128 in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 13 Apr 2010, 2:38 AM
  3. Making a JSON RPC Call using AJAX
    By sz_146 in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 17 Oct 2008, 12:55 AM
  4. how to call JSON in extjs tree loader
    By sidra in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 9 Apr 2008, 9:24 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •