Question

我正在尝试将一个Grid（Ext.grid.GridPanel）对象放在一个Tab中。

这是代码：

var grid = new Ext.grid.GridPanel({
    store: new Ext.data.Store({
        autoDestroy: true,
        reader: reader,
        data: xg.dummyData
    }),
    colModel: new Ext.grid.ColumnModel({
        defaults: {
            width: 120,
            sortable: true
        },
        columns: [
            {id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'},
            {header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
            {header: 'Change', dataIndex: 'change'},
            {header: '% Change', dataIndex: 'pctChange'},
            // instead of specifying renderer: Ext.util.Format.dateRenderer('m/d/Y') use xtype
            {
                header: 'Last Updated', width: 135, dataIndex: 'lastChange',
                xtype: 'datecolumn', format: 'M d, Y'
            }
        ]
    }),   
    sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
    width: 600,
    height: 300,
    frame: true,
    title: 'Framed with Row Selection and Horizontal Scrolling',
    iconCls: 'icon-grid'
});

this.tabs = new Ext.TabPanel({
    fullscreen: true,
    type: 'dark',
    sortable: true,
    dockedItems: [
    {
        xtype:'toolbar',
        title:'Hello World'
    }],
    tabBar: {
        ui: 'light',
        layout: {
            pack: 'left'
        }
    },
    items: [
    {
        cls:'hello',
        id:'tab1',
        html : '<a>hello</a>',
        title:'Monitor'
    }, {
        cls:'world',
        id:'tab2',    
        xtype: 'map',                 
        html : '<a>hello world</a>',
        title:'Map'
    }, {
        cls:'world',
        id:'tab3',                                
        html : '<a>hello world</a>',
        dockedItems:grid
    }]
});

当我加载页面时没有错误，但网格没有显示。

Answer 1

网格不是停靠项目（适用于工具栏和应该粘贴到容器一侧的其他东西）。如果您希望网格占据整个选项卡，只需将其作为项目直接添加到TabPanel，它将成为完整选项卡：

items: [
{
    cls:'hello',
    id:'tab1',
    html : '<a>hello</a>',
    title:'Monitor'
}, {
    cls:'world',
    id:'tab2',    
    xtype: 'map',                 
    html : '<a>hello world</a>',
    title:'Map'
},
grid ]

Tab内的网格

1 个答案: