0

Ext JS XTemplate を使用して、テーブルを使用して画面にリストを表示したいと考えています。

これらは私の構成です、

読者：

var readerX = new Ext.data.JsonReader({
successProperty : 'success',
root            : 'infoList',
fields          : [
                    {name: 'ID'},
                    {name: 'distance'},
                    {name: 'time'}
                ]

});

お店：

var storeX = new Ext.data.Store({
id      : 'idx',
reader  : readerX

});

テンプレート：

var templateX = new Ext.XTemplate(
'<tpl for=".">',
'<table class="tableTEXT" width="100%">',
    '<tbody>',
        '<tpl for="infoList">',
            '<tr>',
                '<th class="tableTEXT2" align="left" width="%15"><b>ID</b></th>',
                '<td class="tableTEXT" width="%35" align="left">{ID}</td>',
            '</tr>',
            '<tr>',
                '<th class="tableTEXT2" align="left" width="%15">Distance</th>',
                '<td class="tableTEXT" width="%35" align="left">{distance} km</td>',
                '<th class="tableTEXT2" align="left" width="%15">Time</th>',
                '<td class="tableTEXT" width="%35" align="left">{time}</td>',
            '</tr>',
        '</tpl>',
    '</tbody>',
'</table>',
'<hr>',
'</tpl>'

);

JSONは次のとおりです。

{"success":true, "infoList":[{"ID":1,"distance":100,"time":10},{"ID":2,"distance":2100,"time":50},{"ID":3,"distance":150,"time":15}]}

このようなパネルでテンプレートを使用しています。

var reportPanel = new Ext.Panel({
            items: [
                {
                    id          : 'summaryPanel',
                    region      : 'center',
                    bodyStyle   : {
                        background: '#ffffff',
                        padding : '7px'
                    },
                    items: [
                            new Ext.DataView({
                                store       : storeX,
                                tpl         : templateX,
                                autoHeight  : true,
                                multiSelect : true,
                                overClass   : 'x-view-over',
                                itemSelector: 'div.thumb-wrap',
                                emptyText   : 'no record found!'
                            })
                       ]
                }
            ]
    });

ajax リクエストを行った後、次のようにモーダル ウィンドウに結果を表示します。

success: function (response) 
        {                   
            var resData = Ext.util.JSON.decode(response.responseText);
            storeX.loadData(resData);

            new Ext.Window({
                title       : 'Report',
                plain       : true,
                border      : false,
                modal       : true,
                autoHeight  : true,
                buttonAlign : 'center',
                items       : [reportPanel],
                height      : Ext.getBody().getViewSize().height - 100,
                width       : Ext.getBody().getViewSize().width*0.5 //90%
            }).show();
        },

json をテンプレートに反復するにはどうすればよいですか?

ありがとう

4

2 に答える 2

1

テンプレートにタイプミスがあるようです（infoListではなくinfList）：

var templateX = new Ext.XTemplate(
    '<tpl for=".">',
    '<table class="tableTEXT" width="100%">',
        '<tbody>',
            '<tpl for="infoList">', //<-------- was infList
                '<tr>',
                    '<th class="tableTEXT2" align="left" width="%15"><b>ID</b></th>',
                    '<td class="tableTEXT" width="%35" align="left">{ID}</td>',
                '</tr>',
                '<tr>',
                    '<th class="tableTEXT2" align="left" width="%15">Distance</th>',
                    '<td class="tableTEXT" width="%35" align="left">{distance} km</td>',
                    '<th class="tableTEXT2" align="left" width="%15">Time</th>',
                    '<td class="tableTEXT" width="%35" align="left">{time}</td>',
                '</tr>',
            '</tpl>',
        '</tbody>',
    '</table>',
    '<hr>',
    '</tpl>');

テンプレートにデータを適用すると、正しく読み込まれます

templateX.overwrite(Ext.getBody(), data);
于 2012-04-20T16:01:23.133 に答える
1

dataviewが必要です。ストアとテンプレートを定義するだけです。その後、マウスオーバー、クリックなどのイベントを処理できます。

于 2012-04-20T19:48:48.853 に答える