Ext JS 5 - добавить панель сетки в окно просмотра

Question

Я ищу способ добавить панель сетки к моему окну просмотра, я попытался использовать функцию add(), но это не сработало для меня.

Ext.application ({ имя: 'MyApp',

launch : function() { 
     Ext.create('Ext.container.Viewport', { 
     layout: 'border', 
     items: [{ 
      region: 'north', 
      html: '<h1 class="x-panel-header">Page Title</h1>', 
      border: false, 
      margin: '0 0 5 0' 
     }, { 
      region: 'west', 
      title: 'Navigation', 
      width: 250, 
      collapsible: false, 
      items : { 
       // I want to add it just there 
       xtype : 'gridPanel' 
      } 
     }, { 
      region: 'south', 
      title: 'South Panel', 
      collapsible: true, 
      html: 'test test', 
      split: true, 
      height: 100, 
      minHeight: 100 
     }, { 
      region: 'east', 
      title: 'East Panel', 
      collapsible: true, 
      split: true, 
      width: 150 
     }, { 
      region: 'center', 
      xtype: 'tabpanel', 
      activeTab: 0,  
      items: { 
       title: 'test Tab', 
       html: '' 
      } 
     }] 
    }); 
} 

});

ТНХ заранее,

Answer 1

Вам просто нужно finsih код и использовать правильный конфиг & xtype.

Я скопировал ваш код и создал сетку в этом fiddle без каких-либо проблем, код также находится ниже в случае разрыва ссылки.

Ext.application({ 
    name: 'MyApp', 

    launch: function() { 
     Ext.create('Ext.data.Store', { 
      storeId: 'simpsonsStore', 
      fields: ['name', 'email', 'phone'], 
      data: { 
       'items': [{ 
        'name': 'Lisa', 
        "email": "lisa@simpsons.com", 
        "phone": "555-111-1224" 
       }, { 
        'name': 'Bart', 
        "email": "bart@simpsons.com", 
        "phone": "555-222-1234" 
       }, { 
        'name': 'Homer', 
        "email": "homer@simpsons.com", 
        "phone": "555-222-1244" 
       }, { 
        'name': 'Marge', 
        "email": "marge@simpsons.com" 
        , "phone": "555-222-1254" 
       }] 
      }, 
      proxy: { 
       type: 'memory', 
       reader: { 
        type: 'json', 
        rootProperty: 'items' 
       } 
      } 
     }); 

     Ext.create('Ext.container.Viewport', { 
      layout: 'border', 
      items: [{ 
       region: 'north', 
       html: '<h1 class="x-panel-header">Page Title</h1>', 
       border: false, 
       margin: '0 0 5 0' 
      }, { 
       region: 'west', 
       title: 'Navigation', 
       width: 250, 
       collapsible: false, 
       items: { 
        // I want to add it just there 
        xtype: 'grid', 
        title: 'Simpsons', 
        store: Ext.data.StoreManager.lookup('simpsonsStore'), 
        columns: [{ 
         text: 'Name', 
         dataIndex: 'name' 
        }, { 
         text: 'Email', 
         dataIndex: 'email', 
         flex: 1 
        }, { 
         text: 'Phone', 
         dataIndex: 'phone' 
        }], 
        listeners: { 
         rowdblclick: function(grid, record, tr, rowIndex, e, eOpts) { 
          alert(record.get("name")); 
         } 
        }, 
        height: 200, 
        width: 400, 
       } 
      }, { 
       region: 'south', 
       title: 'South Panel', 
       collapsible: true, 
       html: 'test test', 
       split: true, 
       height: 100, 
       minHeight: 100 
      }, { 
       region: 'east', 
       title: 'East Panel', 
       collapsible: true, 
       split: true, 
       width: 150 
      }, { 
       region: 'center', 
       xtype: 'tabpanel', 
       activeTab: 0, 
       items: { 
        title: 'test Tab', 
        html: '' 
       } 
      }] 
     }); 
    } 

});