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

Thread: Sencha Touch: Display a list in another from nested JSON

  1. #1
    Sencha User
    Join Date
    Oct 2013
    Posts
    12
    Vote Rating
    0
      0  

    Default Answered: Sencha Touch: Display a list in another from nested JSON

    So what I mean
    I have JSON contain another JSON. Need display list of answers inside list of question
    Example what I want to see at this moment:
    Question 1+2=?
    Answers
    -1
    -5
    -3 ....
    Now display just first answer from JSON answer

    Pe8IV.png

    Need display all answer, as radiobox.
    My JSON

    Code:
    [
        {
            "id": 7,
            "answers": [
                {
                    "id": 6,
                    "answer": "1",
                    "isCorrect": false
                },
                {
                    "id": 7,
                    "answer": "5",
                    "isCorrect": false
                },
                {
                    "id": 5,
                    "answer": "3",
                    "isCorrect": true
                }
            ],
            "question": "1+2=?"
        },
        {
            "id": 14,
            "answers": [
                {
                    "id": 28,
                    "answer": "5",
                    "isCorrect": false
                },
                {
                    "id": 31,
                    "answer": "7",
                    "isCorrect": true
                },
                {
                    "id": 29,
                    "answer": "2",
                    "isCorrect": false
                },
                {
                    "id": 30,
                    "answer": "6",
                    "isCorrect": false
                }
            ],
            "question": "2+5=?"
        },
        {
            "id": 9,
            "answers": [
                {
                    "id": 13,
                    "answer": "3",
                    "isCorrect": false
                },
                {
                    "id": 11,
                    "answer": "5",
                    "isCorrect": false
                },
                {
                    "id": 14,
                    "answer": "6",
                    "isCorrect": true
                },
                {
                    "id": 12,
                    "answer": "7",
                    "isCorrect": false
                }
            ],
            "question": "3+3=?"
        }
    ]
    My models, views and app.js

    Code:
    Ext.define('Sencha.model.Question', {
        extend: 'Ext.data.Model',
    
        requires: ['Sencha.model.Answer'],
    
        config: {
            fields: [
                'question'
            ],
    
            proxy: {
                type: 'ajax',
                url: 'contacts.json',
                reader : {
                    type : 'json'
                }
            },
             
    
            hasMany: {
                model: "Sencha.model.Answer",
                associationKey: 'answers'
            }
        }
    });
    
    Ext.define('Sencha.model.Answer', {
        extend: 'Ext.data.Model',
        config: {
            fields: [
                'answer'
            ],
    
            belongsTo: "Sencha.model.Question"
        }
    });
    
    Ext.define('Sencha.view.Questions', {
        extend: 'Ext.List',
        xtype: 'questions',
    
        config: {
            title: 'Stores',
            cls: 'x-questions',
    
            store: 'Questions',
            itemTpl:[
                '{question}',
                '<div>',
                    '<h2><b>Answers</b></h2>',
                    '<tpl for="answers">',
                        '<div> - {answer}</div>',
                    '</tpl>',
                '</div>'
            ].join('')
        }
    });
    
    Ext.define('Sencha.view.Answer', {
        extend: 'Ext.form.Panel',
        xtype: 'answer',
    
        config: {
            title: 'Answer',
            cls: 'x-questions',
    
            store: 'Questions',
            /*itemTpl: [
            '<div>{answer}</div>'
            ].join('')*/
            items:[
                 xtype: 'radiofield',
                 value: {answer}
            ]
        }
    });
    
    Ext.define("Sencha.view.Main", {
        extend: 'Ext.tab.Panel',
        requires: ['Ext.TitleBar',  'Sencha.view.Questions'],
    
        config: {
            tabBarPosition: 'bottom',
    
            items: [
                {
                    title: 'Questions',
                    iconCls: 'home',
    
                    xtype: 'questions'
                }
            ]
        }
    });
    
    Ext.define('Sencha.store.Questions', {
        extend: 'Ext.data.Store',
    
        config: {
            model: 'Sencha.model.Question',
            autoLoad: true/*,
            //sorters: 'name',
            grouper: {
                groupFn: function(record) {
                    return record.get('name')[0];
                }
            }*/
        }
    });
    
    
    
    //<debug>
    Ext.Loader.setPath({
        'Ext': 'sdk/src'
    });
    //</debug>
    
    Ext.application({
        name: 'Sencha',
    
        requires: [
            'Ext.MessageBox'
        ],
    
        views: ['Main'],
        stores: ['Questions'],
        models: ['Question', 'Answer'],
    
        launch: function() {
            // Destroy the #appLoadingIndicator element
            Ext.fly('appLoadingIndicator').destroy();
    
            // Initialize the main view
            Ext.Viewport.add(Ext.create('Sencha.view.Main'));
        }
    });
    But in final variant need rabio button, not list answers, with answers.


    I try create in https://fiddle.sencha.com/, but got error's. can read some files.

    https://fiddle.sencha.com/#fiddle/qn It may be useful, all my code

    Thx!

  2. Good try.
    But I was thinking of a method inside the tpl:
    Code:
    '<div class="question">{question}</div>',
    '{[this.getAnswers(values.answers, values.id)]}',  // <==== Call of the method
    {
        getAnswers: function (answers,id) {  //  <===== Method
            var returnString='';
            Ext.each(anwers, function(answer, index){
                     returnString += '<input type="radio" name="' + id + '" value="' + index + '">' + answer.answer + '<br>';
             });
            return returnString;
         }
    }
    Model:

    Code:
    Ext.define('Sencha.model.Question', {
         extend: 'Ext.data.Model',  //
        requires: ['Sencha.model.Answer'],
          config: {
             fields: [
                 'id', 'questionid', 'answers', 'question'
             ],
              proxy: { 
                type: 'ajax',
                 url: 'contacts.json',
                 reader : {
                     type : 'json'
                 }
             } 
        }
     }); 

  3. #2
    Sencha User
    Join Date
    Feb 2011
    Location
    Dsseldorf, Germany
    Posts
    594
    Answers
    35
    Vote Rating
    33
      0  

    Default

    You already asked this, but did not respond to my questions here.

    I'll give it another try, but please stick to this thread. No need to bloat the forum.

    This sounds like a security question pop up. Right?

    I would definately not use two stores for this. I would create a custom component, which takes the data from a single store.

    If this is what you are trying to do please let me know.
    • Kurt001

    Code Review | Send PM


    Need to include a test case use:
    https://fiddle.sencha.com/#home

  4. #3
    Sencha User
    Join Date
    Oct 2013
    Posts
    12
    Vote Rating
    0
      0  

    Default

    This sounds like a security question pop up. Right?
    I don't understand what you mean, sorry.
    I want generate on page questions with answers(radio). User check's answer, after that(at the end click on button for example) shows the result. Now I have a problem, can't display more than one answer, from JSON and don't found solution how make radio in sencha style in this variant of code

    First of all need display all answer on page. I have a variant of this, but don't work.
    If you have some other idea, please share or explain on example. Maybe have idea for my code.

    Thank you!
    Sorry for my english.

  5. #4
    Sencha User
    Join Date
    Feb 2011
    Location
    Dsseldorf, Germany
    Posts
    594
    Answers
    35
    Vote Rating
    33
      0  

    Default

    I think the solution is the itemTpl and not multiple stores.
    If you are trying to make an lms you might want to have pretty fixed question styles.

    So this one is multiple choice. (While I personally would prefer single pages per question) Here is such an itemTpl:

    Code:
    <div class='question'>{question}</div>
    <input type="radio" name="{id}" value="0"> {answers[0].answer}<br>
    <input type="radio" name="{id}" value="1"> {answers[1].answer}<br>
    <input type="radio" name="{id}" value="2"> {answers[2].answer}<br>
    <input type="radio" name="{id}" value="3"> {answers[3].answer}<br>
    Now after doing so you might want create the same structure for the inputs as sencha does for radio buttons. To find out about that you can use development tools of chrome
    Example
    Code:
    <div class="x-container x-field-select x-field x-label-align-left x-form-label-nowrap x-field-labeled">
    <div class="x-form-label" style="width: 30% !important">
    <span>{answers[0].answer}</span> </div>
    <div class="x-component-outer"> <div class="x-unsized x-field-input"> <input id="ext-element-24" class="x-input-el x-form-field x-input-radio" type="radio" name="{id}" disabled="">
    </div> </div> </div>
    • Kurt001

    Code Review | Send PM


    Need to include a test case use:
    https://fiddle.sencha.com/#home

  6. #5
    Sencha User
    Join Date
    Oct 2013
    Posts
    12
    Vote Rating
    0
      0  

    Default

    Answers not fixed. Can be 2, 3, 4 .. 10 answers on question. Like in my JSON 1-st question with 3 answers, 2 and 3 with 4 answers.
    If we have unknown size better use loop?

    Anyway thx.

  7. #6
    Sencha User
    Join Date
    Feb 2011
    Location
    Dsseldorf, Germany
    Posts
    594
    Answers
    35
    Vote Rating
    33
      0  

    Default

    you can use XTemplate function and loop.
    Do you know how this works?
    • Kurt001

    Code Review | Send PM


    Need to include a test case use:
    https://fiddle.sencha.com/#home

  8. #7
    Sencha User
    Join Date
    Oct 2013
    Posts
    12
    Vote Rating
    0
      0  

    Default

    No or yes. I use some loop in my code, but didn't work

    Code:
    itemTpl:[
                '{question}',
                '<div>',
                    '<h2><b>Answers</b></h2>',
                    '<tpl for="answers">',
                        '<div> - {answer}</div>',
                    '</tpl>',
                '</div>'
            ].join('')

  9. #8
    Sencha User
    Join Date
    Feb 2011
    Location
    Dsseldorf, Germany
    Posts
    594
    Answers
    35
    Vote Rating
    33
      1  

    Default

    Good try.
    But I was thinking of a method inside the tpl:
    Code:
    '<div class="question">{question}</div>',
    '{[this.getAnswers(values.answers, values.id)]}',  // <==== Call of the method
    {
        getAnswers: function (answers,id) {  //  <===== Method
            var returnString='';
            Ext.each(anwers, function(answer, index){
                     returnString += '<input type="radio" name="' + id + '" value="' + index + '">' + answer.answer + '<br>';
             });
            return returnString;
         }
    }
    Model:

    Code:
    Ext.define('Sencha.model.Question', {
         extend: 'Ext.data.Model',  //
        requires: ['Sencha.model.Answer'],
          config: {
             fields: [
                 'id', 'questionid', 'answers', 'question'
             ],
              proxy: { 
                type: 'ajax',
                 url: 'contacts.json',
                 reader : {
                     type : 'json'
                 }
             } 
        }
     }); 
    • Kurt001

    Code Review | Send PM


    Need to include a test case use:
    https://fiddle.sencha.com/#home

  10. #9
    Sencha User
    Join Date
    Oct 2013
    Posts
    12
    Vote Rating
    0
      0  

    Default

    Ok, will try and take answer how work.
    Thx!

  11. #10
    Sencha User
    Join Date
    Oct 2013
    Posts
    12
    Vote Rating
    0
      0  

    Default

    I use your code

    Code:
    Ext.define('Sencha.view.Questions', {
        extend: 'Ext.List',
        xtype: 'questions',
    
        config: {
            title: 'Stores',
            cls: 'x-questions',
    
            store: 'Questions',
            itemTpl:new Ext.XTemplate(
                '<div class="question">{question}</div>',
                '{[this.getAnswers(values.answers, values.id)]}',  // <==== Call of the method
                {
                    getAnswers: function (answers,id) {  //  <===== Method
                        var returnString='';
                        Ext.each(answers, function(answer){
                                 returnString += '<input type="radio" name="' + id + '" value="0">' + answer.answer + '<br>';
                         });
                        return returnString;
                     }
                }
            )
        }
    });
    but have same problem only first answer on each question.

    sameProb.png

    Any idea?

Page 1 of 2 12 LastLast

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
  •