Extjs 4.1.1 是否可以创建这样的网格？

Question

是否可以创建如下所示的网格？ 我有两个具有 hasmany 关联的模型：

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 示例

{"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}   

这是显示网格视图的链接 http://imageshack.us/photo/my-images/834/examgrid.jpg/

问题可以有不同数量的答案，或者如果不可能有相同数量的答案。 复选框用于标记 isMarked 字段。

谁能举个例子？

谢谢

Answer 1

开箱即用，不。使用视图，是的。但我建议您将答案嵌套在问题中，而不是使用单独的模型。您必须编写一个带有呈现答案的内部函数的 XTemplate。

采用这种方法，您将没有可排序的列。这将是更多的工作。

所以最后一个我也很感兴趣，这是一个没有任何格式的工作片段！

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()
});  

还有 JSFiddle