ExtJS 4 dataview Issue

Question

Ниже код, не выполняющий элемент, щелкнул .i не смог выяснить проблему. Это связано с 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'); 
    } 

}); 

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

Answer 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() 
});