2

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

它的工作和正确显示所有字段。但我想以正确的格式显示这些信息。意味着一个块中的所有名词，一个块中的所有图像。那么如何在 extjs4 中为这些 tpl 视图进行格式化

4

1 回答 1

0

我不确定您要做什么，但这会将图像放在右侧。如果每个单词是一对多的映射并且您想使用一个表格，那么您可能需要在图像列上放置一个行跨度，如果您想要单独的行上的 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()
   });
});
于 2013-07-26T18:40:35.383 回答