如何将栅格添加到选项卡面板

u1ehiz5o 于 2022-10-18 发布在其他

关注(0)|答案(2)|浏览(164)

如何在选项卡面板的中心添加网格..我的网格没有边距，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()
                }]

         }

extjs

来源：https://stackoverflow.com/questions/32008943/how-to-add-grid-to-tab-panel

2条答案

按热度按时间

7fyelxc51#

尝试将网格嵌套到容器中。然后，从容器中，您可以尝试不同的大小和布局，以准确地放置在您想要的位置。这里有一个例子。
我会删除“style”填充/位置，至少是为了开始，看看您在容器中的喜好。然后从那里填充/定位。试试这个：

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

     }

赞(0）回复(0）举报 2022-10-18

2ekbmq322#

不要使用css定位(页边距等)为了这个目的。使用layout: center。
这里有一个例子：https://fiddle.sencha.com/#fiddle/s7h

赞(0）回复(0）举报 2022-10-18