ExtJS 4 数据视图问题答案

【问题标题】：ExtJS 4 dataview IssueExtJS 4 数据视图问题
【发布时间】：2014-03-16 19:03:33
【问题描述】：

下面的代码没有执行项目点击。我无法弄清楚问题。这与 tpl 有关吗？请帮我解决这个问题。我已经尝试了所有的可能性。

Ext.define('MyApp.view.MyView', {
    extend: 'Ext.view.View',

    requires: [
        'Ext.XTemplate'],

    id: 'MyView',
    itemId: 'MyView',
    width: 400,
    itemSelector: '.product',

    initComponent: function () {
        var me = this;

        Ext.applyIf(me, {
            data: [{
                name: 'ATM',
                url: './icons/atm.png'
            }, {
                name: 'BAR',
                url: './icons/bar.png'
            }, {
                name: 'GAS STATION',
                url: './icons/gas_filling_station.png'
            }, {
                name: 'GYM',
                url: './icons/gym.png'
            }, {
                name: 'HOSPITAL',
                url: './icons/hospital.png'
            }, {
                name: 'PARK',
                url: './icons/park.png'
            }, {
                name: 'SALOON',
                url: './icons/saloon.png'
            }, {
                name: 'SCHOOL',
                url: './icons/school.png'
            }, {
                name: 'SHOPPING MALL',
                url: './icons/shoppin_mall.png'
            }, {
                name: 'SUPERMARKET',
                url: './icons/supermarket.png'
            }],
            itemTpl: [
                '<tpl for=".">',
                '    <div class="product"> <img width="120" height="120" src="{url}"/> ',
                '    <strong>{name}</strong></div>',
                '</tpl>'],
            listeners: {
                itemclick: {
                    fn: me.onDataviewItemClick,
                    scope: me
                }
            }
        });

        me.callParent(arguments);
    },

    onDataviewItemClick: function (dataview, record, item, index, e, eOpts) {
        console.log('click');
        alert('working');
    }

});

【问题讨论】：

标签： javascript extjs extjs4 extjs4.1 extjs4.2

【解决方案1】：

我认为您没有正确使用data。根据API，它只能是一个对象，所以我猜它是为了别的东西？如果添加store，一切正常：

Ext.define('MyView', {
  extend: 'Ext.view.View',
  requires: [
    'Ext.XTemplate',
    'Ext.data.Store'
  ],

  id: 'MyView',
  itemId: 'MyView',
  width: 400,
  itemSelector: '.product',

  initComponent: function () {
    var me = this;

    // Take note of the store that's being created with your initial data
    Ext.applyIf(me, {
      store: Ext.create('Ext.data.Store', {
        fields: ['name', 'url'],
        data: [{
            name: 'ATM',
            url: './icons/atm.png'
        }, {
            name: 'BAR',
            url: './icons/bar.png'
        }, {
            name: 'GAS STATION',
            url: './icons/gas_filling_station.png'
        }, {
            name: 'GYM',
            url: './icons/gym.png'
        }, {
            name: 'HOSPITAL',
            url: './icons/hospital.png'
        }, {
            name: 'PARK',
            url: './icons/park.png'
        }, {
            name: 'SALOON',
            url: './icons/saloon.png'
        }, {
            name: 'SCHOOL',
            url: './icons/school.png'
        }, {
            name: 'SHOPPING MALL',
            url: './icons/shoppin_mall.png'
        }, {
            name: 'SUPERMARKET',
            url: './icons/supermarket.png'
        }]
      }),
      itemTpl: [
        '<tpl for=".">',
          '<div class="product">',
            '<img width="120" height="120" src="{url}"/>',
            '<strong>{name}</strong>',
          '</div>',
        '</tpl>'
      ],
      listeners: {
        itemclick: {
          fn: me.onDataviewItemClick,
          scope: me
        }
      }
    });

    me.callParent();
  },

  onDataviewItemClick: function (dataview, record, item, index, e, eOpts) {
    console.log('click');
    alert('working');
  }
});

【讨论】：

【解决方案2】：

似乎您必须使用商店而不是使用“数据”数组..

这是一个工作示例：

http://jsfiddle.net/Vandeplas/57mNy/

var data =  [{
                name: 'ATM',
                url: './icons/atm.png'
            }, {
                name: 'BAR',
                url: './icons/bar.png'
            }, {
                name: 'GAS STATION',
                url: './icons/gas_filling_station.png'
            }, {
                name: 'GYM',
                url: './icons/gym.png'
            }, {
                name: 'HOSPITAL',
                url: './icons/hospital.png'
            }, {
                name: 'PARK',
                url: './icons/park.png'
            }, {
                name: 'SALOON',
                url: './icons/saloon.png'
            }, {
                name: 'SCHOOL',
                url: './icons/school.png'
            }, {
                name: 'SHOPPING MALL',
                url: './icons/shoppin_mall.png'
            }, {
                name: 'SUPERMARKET',
                url: './icons/supermarket.png'
            }];

Ext.define('Image', {
    extend: 'Ext.data.Model',
    fields: [
        { name:'name', type:'string' },
        { name:'url', type:'string' }
    ]
});

var store = Ext.create('Ext.data.Store', {
    id:'imagesStore',
    model: 'Image',
    data: data
});


Ext.define('MyApp.view.MyView', {
    extend: 'Ext.view.View',

    width: 400,
    itemSelector: '.product',

    initComponent: function () {
        var me = this;

        Ext.applyIf(me, {
            store: store,
            itemTpl: [
                '<tpl for=".">',
                '    <div class="product"> <img width="120" height="120" src="{url}"/> ',
                '    <strong>{name}</strong></div>',
                '</tpl>'],
            listeners: {
                itemclick: {
                    fn: me.onDataviewItemClick,
                    scope: me
                }
            }
        });

        me.callParent(arguments);
    },

    onDataviewItemClick: function (dataview, record, item, index, e, eOpts) {
        console.log('click');
        alert('working');
    }

});

Ext.create('MyApp.view.MyView', {
    renderTo: Ext.getBody()
});

【讨论】：