Question

is it possible to create such a grid as shown below??
I have two models with hasmany association:

Ext.define('Question', {
extend: 'Ext.data.Model',
fields: [
    {name: 'questionId', type: 'int', convert: null},
    {name: 'content',     type: 'string'},
    {name: 'type',     type: 'int'},
],
hasMany  : {model: 'Answer', name: 'answers'},

idProperty: 'questionId'});

Ext.define('Answer', {
extend: 'Ext.data.Model',
fields: [
    {name: 'answerId', type: 'int', convert: null},
    {name: 'question_id', type: 'int'},//foreignKey
    {name: 'content',     type: 'string'},
    {name: 'isCorrect',     type: 'boolean'},
    {name: 'isMarked',     type: 'boolean'},
],
 associations: [
    { type: 'belongsTo', model: 'Question' }
],
idProperty: 'answerId'}); 

JSON Example

{"data":[
{"questionId":4100,"content":"12:4?","type":"2","answers":
  [{"answerId":1051,"content":"11","isCorrect":true,"isMarked":false},    
   {"answerId":1052,"content":"11","isCorrect":false,"isMarked":false},      
   {"answerId":1053,"content":"11","isCorrect":false,"isMarked":false}
]},
{"questionId":4101,"content":"12:4?","type":"2","answers":
  [{"answerId":1054,"content":"11","isCorrect":true,"isMarked":false},    
   {"answerId":1055,"content":"11","isCorrect":false,"isMarked":false},      
   {"answerId":1056,"content":"11","isCorrect":false,"isMarked":false}
]}],"success":true}   

Here is the link to show grid view
http://imageshack.us/photo/my-images/834/examgrid.jpg/

Questions can have different number of answers or if it isn’t possible the same number of answers.
Checkbox is used for marking isMarked fields.

Can anyone give me example?

Thanks

Answer 1

Out of the box, no. Using a view, yes. But I recommend you to nest the answers into question instead of using a separate model. You will have to write a XTemplate with a inner function that renders the answers.

You will not have sortable columns with that approach. This would be a bit more work.

So the last one interested me too, here’s a working snipped without any formating!!

Ext.define('Image', {
    extend: 'Ext.data.Model',
    fields: [
        { name:'question', type:'string' },
        { name:'answer', type:'auto' }
    ]
});


Ext.create('Ext.data.Store', {
    id:'imagesStore',
    model: 'Image',
    data: [
        { question:'Drawing & Charts', answer: [{text: 'yes'}, {text: 'no'}] },
        { question:'Advanced Data', answer: [{text: 'yes'}, {text: 'no'}] },
        { question:'Overhauled Theme', answer: [{text: 'yes'}, {text: 'no'}] },
        { question:'Performance Tuned', answer: [{text: 'yes'}, {text: 'no'}] }
    ]
});


var imageTpl = new Ext.XTemplate(
    '<Table>',
    '<tpl for=".">',
        '<TR>',
               '<TD>{#}</TD>',
            '<TD>{question}</TD>',
            '<TD>',
                '<tpl for="answer">',
                    '{text}',
                '</tpl>',
            '</TD>',
        '</TR>',
    '</tpl>',
    '</Table>'
);


Ext.create('Ext.view.View', {
    store: Ext.data.StoreManager.lookup('imagesStore'),
    tpl: imageTpl,
    itemSelector: 'div.thumb-wrap',
    emptyText: 'No images available',
    renderTo: Ext.getBody()
});  

and the JSFiddle