javascript - 如何将网格添加到选项卡面板

Question

如何在选项卡面板的中心添加网格..我的网格没有边距，style:{margintop:'10px'} even height: and width:

这是我的网格:-

{
        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()
                }]  
        }]

     }