ExtJS 4 - Дисплейная сетка с использованием удаленного json store

Я новичок с ExtJS 4. Я пытаюсь отобразить список результатов, который извлекает результаты из удаленного хранилища без особого успеха.ExtJS 4 - Дисплейная сетка с использованием удаленного json store

Ниже файл представления

Ext.define('Crm.view.CompanyList', { 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.companyList', 
    store : 'Crm.store.Companies', 
    title : 'Company List', 

    initComponent: function(){ 
     this.columns = [ { 
      text : 'ID', 
      width : 150, 
      dataIndex : 'id' 
     }, { 
      text : 'LastName', 
      width : 150, 
      sortable : false, 
      hideable : false, 
      dataIndex : 'lastName' 
     }, { 
      text : 'First Name', 
      width : 150, 
      sortable : false, 
      hideable : false, 
      dataIndex : 'firstName' 
     }, { 
      text : 'Street', 
      flex : 1, 
      sortable : false, 
      hideable : false, 
      dataIndex : 'street' 
     } ]; 
     this.dockedItems = [ { 
      xtype : 'pagingtoolbar', 
      store : 'Companies', 
      dock : 'bottom', 
      displayInfo : true 
     } ]; 
     this.callParent(); 
    } 
});

и ниже Модель

Ext.define('Crm.model.Company',{ 
    extend : 'Ext.data.Model', 
    fields : [ 
     {name:'id',type:'string'}, 
     {name:'lastName',type:'string'}, 
     {name:'firstName',type:'string'}, 
     {name:'street',type:'string'} 
    ] 
});

Это как в магазине определяется

Ext.define('Crm.store.Companies', { 
    extend: 'Ext.data.Store', 
    requires: 'Crm.model.Company', 
    model: 'Crm.model.Company', 
    autoLoad: {start: 0, limit: 5}, 
    pageSize: 5, 
    remoteSort: true, 
    sorters: [{ 
     property : 'lastName', 
     direction: 'asc' 
    }], 
    proxy: { 
     type: 'jsonp', 
     url : 'http://extjsinaction.com/crud.php?model=Employee&method=READ', 
     reader: { 
      type: 'json', 
      root: 'data', 
      idProperty  : 'id', 
      // successProperty : 'meta.success', 
      totalProperty : 'meta.total' 
     } 
    } 
});

и, наконец, файл HTML, который, как ожидается, рендерить сетку в браузере

&lt;html&gt; 
    &lt;head&gt; 
    &lt;link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css"&gt; 
    &lt;script type="text/javascript" src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all-dev.js"&gt;&lt;/script&gt; 
    &lt;script type="text/javascript" src="Crm/view/CompanyList.js" &gt;&lt;/script&gt; 
    &lt;script type="text/javascript" src="Crm/model/Company.js" &gt;&lt;/script&gt; 
    &lt;script type="text/javascript" src="Crm/store/Companies.js" &gt;&lt;/script&gt; 
    &lt;/head&gt; 
    &lt;body&gt; 
    &lt;script type="text/javascript" &gt; 
    Ext.onReady(function() { 
    Ext.create('Crm.view.CompanyList', { 
    }); 
    ); 
    &lt;/script&gt; 
    &lt;/body&gt; 
    &lt;/html&gt;

При запуске этого в браузере, я получаю ошибку ниже в браузере консоли

Uncaught TypeError: Cannot read property 'buffered' of undefined ext-all-dev.js:145555

Может кто-то пожалуйста, руководство меня решить эту проблему. Спасибо.

источник

2014-07-28 kayasa

Основной причиной отказа вашего кода является то, что в сетке нет магазина. Вы настраиваете хранилище как строку (имя класса), но этот подход работает, только если вы используете MVC с Ext.Application, когда Ext создает для вас хранилище.

Вы можете сделать вышеупомянутую работу путем создания магазина в initComponent сетки:

this.store = Ext.create('Crm.store.Companies', {});

Для долгосрочной перспективе я рекомендую использовать Sencha Cmd и MVC (MVVM для Ext 5) архитектуры.

источник

2014-07-29 05:52:51 Saki

ExtJS 4 - Дисплейная сетка с использованием удаленного json store

ответ

Смежные вопросы