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

本质原因是变量_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 = 0i <dataFile.lengthi++) {

        _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)

Ext.getCmp('textFieldId').setVisible(false)

Ext.getCmp('textFieldId').getEl().up('.x-form-item').setDisplayed(false)

/**

*动态设置fieldLabel的值与

*动态设置是否可见

*/

if (bFlag){

mNextDate.el.parent().parent().parent().first().dom.innerHTML = '下次年审日期'

mReviewDate.el.parent().parent().parent().first().dom.innerHTML = '年审日期'

mReviewProject.setVisible(true)

mReviewProject.getEl().up('.x-form-item').setDisplayed(true)

mReviewContent.setVisible(true)

mReviewContent.getEl().up('.x-form-item').setDisplayed(true)

mReviewState.setVisible(false)

mReviewState.getEl().up('.x-form-item').setDisplayed(false)

}else{

mNextDate.el.parent().parent().parent().first().dom.innerHTML = '结束时间'

mReviewDate.el.parent().parent().parent().first().dom.innerHTML = '起始时间'

mReviewProject.setVisible(false)

mReviewProject.getEl().up('.x-form-item').setDisplayed(false)

mReviewContent.setVisible(false)

mReviewContent.getEl().up('.x-form-item').setDisplayed(false)

mReviewState.setVisible(true)

mReviewState.getEl().up('.x-form-item').setDisplayed(true)

}

---