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

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

1 个答案: