Вопрос о форматировании extjs tplview

Question

Я работаю в extjs4. У меня есть данные в формате JSON, предоставляемого сервером как-

{"words":{"word":"flower","wordMeanings":[{"wordType":"n","meaning":"flower1"},{"wordType":"n","meaning":"flower2"},{"wordType":"n","meaning":"flower3"},{"wordType":"n","meaning":"flower4"}],"wordMedias":[{"mediaPath":"flower.jpg"}],"wordPronunciations":[{"pronunciation":"flowerpronoun"}]}} 

Для отображения JSON я создал вид как-

Ext.define('Balaee.view.kp.Word.Dictionary', { 
    extend:'Ext.view.View', 
    alias:'widget.Dictionary', 
    id:'DictionaryId', 
    autoShow: true, 
    store:'kp.WordStore', 
    config: 
     { html:'Word Details', 

       tpl:'<tpl for=".">'+ 
        '<div id="main">'+ 
        '</br>'+ 
        '<table border=0 cellspacing=35>'+ 
        '<tr><td><b> Word:-</b><b>{word}</b></td></tr></br>'+ 
        //'<b><tr><td><b>Word Type</b></td><td><b>Meaning</b></td></tr>'+ 
         //'<var i=>'+ 
         '<tpl for="wordMeanings">'+ 

         //'<tr><td>{wordType}={meaning}</td></tr>'+ 
         '<tr><td>*{meaning}</td>'+ 
         '</tpl>'+ 

         '<tpl for="wordMedias">'+ 
         //'<tr><td>{mediaPath}</td></tr>'+ 
         '<td>Image:'+ 
         '<input type=image src='+ 
         'http://images.balaee.com/images/'+ 
         '{mediaPath} :'+ 

         '</td>'+ 
         '</tpl>'+ 
         '<tpl for="wordPronunciations">'+ 
         '<tr><td>pronunciation:'+ 
         '{pronunciation}'+ 
         '</td></tr>'+ 
         '</tpl>'+ 
       '</div>'+ 
        '</tpl>', 
       itemSelector:'div.main' }}); 

Его работой и отображения всех полей правильно. Но я хочу отобразить эту информацию в правильном формате. Определяет все существительные в одном блоке, все изображения в одном блоке. Итак, как сделать форматирование для этих просмотров tpl в extjs4

Answer 1

Я не совсем уверен, что вы пытаетесь сделать, но это поместит изображение справа. Если для каждого слова используется сопоставление от 1 до многих, и вы хотите использовать таблицу, то вам нужно поместить столбцы строк в столбец изображения, возможно, если вы хотите, чтобы wordMeanings, wordPronuncations в отдельных строках. Если нет, вы можете поместить их в div. В противном случае это был бы ответ.

Ext.define('Words', { 
    extend: 'Ext.data.Model', 
    fields: ['word'], 
    hasMany: [ 
     { model: 'WordMeanings', name: 'wordMeanings', mapping: 'wordMeanings', associationKey: 'wordMeanings'}, 
     { model: 'WordMedias', name: 'wordMedias', mapping: 'wordMedias', associationKey: 'wordMedias'}, 
     { model: 'WordPronunciations', name: 'wordPronunciations', mapping: 'wordPronunciations', associationKey: 'wordPronunciations'}, 
    ], 
}); 

Ext.define('WordMeanings', { 
    extend: 'Ext.data.Model', 
    fields: ['wordType', 'meaning'], 
    belongsTo: 'Words' 
}); 

Ext.define('WordMedias', { 
    extend: 'Ext.data.Model', 
    fields: ['mediaPath'], 
    belongsTo: 'Words' 
}); 

Ext.define('WordPronunciations', { 
    extend: 'Ext.data.Model', 
    fields: ['pronunciation'], 
    belongsTo: 'Words' 
}); 

Ext.define('WordStore', { 
    extend: 'Ext.data.Store', 
    model: 'Words', 
    autoLoad: true, 
    proxy: { 
     type: 'ajax', 
     url : 'flowers.json', 
     reader: { 
      type: 'json', 
      root: 'words', 
     } 
    } 
}); 

Ext.onReady(function() { 
    Ext.create('Ext.view.View', { 
     store: Ext.create('WordStore'), 
     tpl: new Ext.XTemplate(
      '<tpl for=".">', 
      '<div class="word">', 
       '{word}', 
       '<input type="image" style="float: right; " src="{[this.getImg(xindex,values)]}" />', 
      '</div>', 
      '</tpl>', 
      { 
       getImg: function(index,values) { 
        var media = values.wordMedias[index-1]; 
        if (media) { 
         return media.mediaPath; 
        } 
       } 
      } 
     ), 
     itemSelector: 'div.word', 
     title: 'Words', 
     renderTo: Ext.getBody() 
    }); 
});