Question

extjs的card布局中使用XTemplate模板填充item的问题

先看代码
for (var i = 0; i < dataFile.length; i++) {
_pageFile = dataFile[i];
wp.add({
id: 'card-' + (i + 1),
tpl : new Ext.XTemplate(
'<table border="1">',
'<tr><td>规格</td><td>图片</td><td>对白</td></tr>',
'<tpl for="pageFile">',
'<tr><td>{spec}</td><td>{pic}-{ranged}</td><td>{dialogue}-{ranged}</td></tr>',
'</tpl>',
'</table>'
),
listeners : {
'render' : function(panel){
this.tpl.overwrite(this.body, _pageFile);
}
},
scope : this
});
}

这是一个片段，wp是一个panel，使用card布局。dataFile是要展示的数据数组，其中每一个_pageFile的内容，就是要通过XTemplate填充成card的一页。

现在有个问题是，按照以上的for循环之后，card布局里面展示的每一页都是dataFile的最后一组数据。
预计结果应该是通过for循环，每一页都应该是对应的_pageFile内容。

是extjs写的有问题吗？有没有了解的呢？求解，万分感谢。。

Answer 1

本质原因是变量_pageFile是在render事件触发后，才调用事件函数然后去获取这个参数，而这个参数最后的结果是数据的最后一个值，修改代码如下：

//..

listeners : {
                'render' : function(panel){
                    console.log(this);
                    this.tpl.overwrite(this.body, this.initialConfig.pageFile);
                }
            },
            scope : this,
            pageFile : _pageFile

//..

完整的例子：

     var curIndex = 1;
    var navHandler = function(){
         if(curIndex == 2) {
         curIndex  = 0
        }
   card.getLayout().setActiveItem(curIndex);
    curIndex ++;
    
};
    var card = new Ext.Panel({
    title: '向导的演示 Example Wizard',
    layout:'card',
    activeItem: 0,
    bodyStyle: 'padding:15px',
    defaults: {
       // 每个子组件都有效 applied to each contained panel
        border:false
    },
    // 简单的导航按钮，可以扩展更多 just an example of one possible navigation scheme, using buttons
    bbar: [
        {
            id: 'move-prev',
            text: '后退',
            text: 'Back',
            handler: navHandler.createDelegate(this, [-1]),
            disabled: true
        },
        '->',
        {
            id: 'move-next',
            text: '前进 Next',
            handler: navHandler.createDelegate(this, [1])
        }
    ],
    // 内面的面板，就是“卡片” the panels (or "cards") within the layout
    items: []
});

    var dataFile = [
            {
                pageFile : [
                    {
                        spec : 1,
                        pic : 11,
                        ranged : 111
                    }
                ]
            },
            {
                pageFile : [
                    {
                        spec : 2,
                        pic : 22,
                        ranged : 222
                    }
                ]
            }
    ];
    var _pageFile;
    for (var i = 0; i < dataFile.length; i++) {
        _pageFile = dataFile[i];
        //_pageFile =
        card.add({
            id: 'card-' + (i + 1),
            tpl : new Ext.XTemplate(
                '<table border="1">',
                '<tr><td>规格</td><td>图片</td><td>对白</td></tr>',
                '<tpl for="pageFile">',
                '<tr><td>{spec}</td><td>{pic}-{ranged}</td><td>{dialogue}-{ranged}</td></tr>',
                '</tpl>',
                '</table>'
            ),
            listeners : {
                'render' : function(panel){
                    console.log(this);
                    this.tpl.overwrite(this.body, this.initialConfig.pageFile);
                }
            },
            scope : this,
            pageFile : _pageFile
        });
    }
    card.render(document.body)