Extjs tplview格式问题

我在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'  }});

Ext.define（'Balaee.view.kp.Word.Dictionary'{
扩展：'Ext.view.view'，
别名：'widget.Dictionary'，
id:'DictionaryId'，
汽车展：是的，
存储：'kp.WordStore'，
配置：
{html:'Word Details'，
第三方物流：''+
''+
“
”+
''+
'Word:-{Word}
'+
//“单词类型含义”+
//''+
''+   
//“{wordType}={means}”+
“*{意思}”+
''+
''+   
//“{mediaPath}”+
'图像：'+
“我不太确定你想做什么，但这会把图像放在右边。如果每个单词都有1对多的映射，并且你想使用一个表，那么你需要在你的图像列上放一个行跨度，如果你想在单独的行上放词义和词义，那么你可以把它们放在div中。否则这将是b答案是否定的

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

Ext.define（'Words'{
扩展：“Ext.data.Model”，
字段：['word']，
有很多：[
{model:'wordmeans'，name:'wordmeans'，mapping:'wordmeans'，associationKey:'wordmeans'}，
{model:'WordMedias'，name:'WordMedias'，mapping:'WordMedias'，associationKey:'WordMedias'}，
{模型：'WordPronances'，名称：'WordPronances'，映射：'WordPronances'，associationKey:'WordPronances'}，
],
});
Ext.define（'wordmeans'{
扩展：“Ext.data.Model”，
字段：['wordType'，'含义']，
以下是：“文字”
});
Ext.define（'WordMedias'{
扩展：“Ext.data.Model”，
字段：['mediaPath']，
以下是：“文字”
});
Ext.define（‘单词发音’{
扩展：“Ext.data.Model”，
字段：[“发音”]，
以下是：“文字”
});
Ext.define（'WordStore'{
扩展：“Ext.data.Store”，
模型：“单词”，
自动加载：对，
代理：{
键入：“ajax”，
url:'flowers.json'，
读者：{
键入：“json”，
词根：'单词'，
}
}
});
Ext.onReady（函数（）{
Ext.create（'Ext.view.view'{
store:Ext.create（'WordStore'），
tpl：新Ext.XTemplate(
'',
'',
“{word}”，
'',
'',
'',
{
getImg：函数（索引、值）{
var media=values.wordMedias[index-1]；
if（媒体）{
返回media.mediaPath；
}
}
}
),
itemSelector:'div.word'，
标题:"文字",，
renderTo:Ext.getBody（）
});
});
您所说的“一个块中的所有名词，一个块中的所有图像”是什么意思？我不确定您要实现的目标是什么…我想将所有图像设置为右侧，而将所有信息设置为左侧