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

すべてのフィールドが正しく機能し、表示されます。しかし、私はこれらの情報を適切な形式で表示したいと考えています.1つのブロック内のすべての名詞、1つのブロック内のすべての画像を意味します。extjs4でこれらのtplビューのフォーマットを行う方法

4

1 に答える 1

0

何をしようとしているのか正確にはわかりませんが、これにより画像が右側に表示されます。各単語ごとに 1 対多のマッピングでテーブルを使用する場合、wordMeanings と wordPronuncations を別々の行に配置したい場合は、おそらく image 列に行スパンを配置する必要があります。そうでない場合は、それらを 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 に答える