Как добавить сетку на вкладку панель

Question

Как я добавить сетку в центре лепестка panel..My сетки не принимая поля, style:{margintop:'10px'} даже высоту: и ширину:

вот моя сетка: -

{ 
     title: 'Credit Card', 
     id:'credit_tab', 
     html:'html', 
     items:[{ 
        xtype:'grid', 

        title: 'Simpsons', 
        resizable: true, 
        // margins:'20 20 20 20', 
        style:{marginLeft:'200px',marginTop:'30px'}, 
        //store: Ext.data.StoreManager.lookup('simpsonsStore'), 
        columns: [ 
         { header: 'Name', dataIndex: 'name' }, 
         { header: 'Email', dataIndex: 'email', flex: 1 }, 
         { header: 'Phone', dataIndex: 'phone' } 
        ], 
        // height: 100, 
        width: 100, 
        // renderTo:Ext.getBody() 
       }] 

     } 

Answer 1

Попробуйте вложить сетку в контейнер. Затем из контейнера вы можете попробовать разные размеры и макеты, чтобы разместить их именно там, где вы хотите. Вот один пример.

Я бы удалил «стиль» отступов/положение, по крайней мере, чтобы начать и посмотреть, как вам нравится в контейнере. Затем оттуда/позиция оттуда. Попробуйте это:

{ 
    title: 'Credit Card', 
    id:'credit_tab', 
    html:'html', 
    items:[{ 
      xtype: 'container', 
      layout: { 
       type: 'hbox', 
       align: 'center', 
       pack: 'center', 
      }, 

      items: [{ 
        xtype:'grid', 
        title: 'Simpsons', 
        resizable: true, 
        // margins:'20 20 20 20', 
        height: 200, 
        //store: Ext.data.StoreManager.lookup('simpsonsStore'), 
        columns: [ 
         { header: 'Name', dataIndex: 'name' }, 
         { header: 'Email', dataIndex: 'email', flex: 1 }, 
         { header: 'Phone', dataIndex: 'phone' } 
        ], 
        // height: 100, 
        width: 500, 
        // renderTo:Ext.getBody() 
       }] 
     }] 

    } 

Answer 2

Не используйте CSS-позиционирование (поля и т. Д.) Для этой цели. Используйте layout: center.

ОБНОВЛЕНИЕ:

Вот пример: https://fiddle.sencha.com/#fiddle/s7h

P.S. Я ожидаю, что добрый человек отказал в этом ответе, чтобы предоставить комментарии/аргументы или удалить поданное голосование.