标签内的网格 [英] Grid inside 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 ：$，
可排序：true 
}，
列：[
 {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'}，
 //而不是指定renderer：Ext.util.Format.dateRenderer（'m / d / Y'）使用xtype 
 {
 header：'Last Up日期'，宽度：135，dataIndex：'lastChange'，
 xtype：'datecolumn'，格式：'M d，Y'
} 
] 
}），
 sm：new Ext.grid.RowSelectionModel（{singleSelect：true}），
 width：600，
 height：300，
 frame：true，
 title：'Framed与行选择和水平滚动'，
 iconCls：'icon-grid'
}）; 
 
 this.tabs = new Ext.TabPanel（{
 fullscreen：true，
 type：'dark'，
 sortable：true，
 dockedItems： [
 {
 xtype：'toolbar'，
 title：'Hello World'
}]，
 tabBar：{
 ui：'light' 
布局：{
 pack：'left'
} 
}，
 items：[
 {
 cls：'hello'，
 id：'tab1'，
 html：'< a> hello< / a>'，
 title：'Monitor'
}，{
 cls：世界'，
 id：'tab2'，
 xtype：'map'，
 html：'< a> hello world< / a>'，
 title：'Map '
}，{
 cls：'world'，
 id：'tab3'，
 html：'< a> hello world< / a>'，
 dockedItems：grid 
}] 
}）; 
  

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

解决方案

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

  items：[
 {
 cls：'hello'，
 id：'tab1'，
 html：'< a> hello< / a> 
标题：'Monitor'
}，{
 cls：'world'，
 id：'tab2'，
 xtype：'map'，
 html：'< a> hello world< / a>'，
 title：'Map'
}，
 grid] 
  

I'm trying to put a Grid (Ext.grid.GridPanel) object inside a Tab .

This is the code:

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
    }]
});      

When I load the page there's no error, but the grid is not shown.

解决方案

The grid is not a docked item (that's for toolbars and other things that should stick to one side of a container). If you want the grid to take up the entire tab, just add it directly as an item to the TabPanel and it will become the full tab:

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 ]

这篇关于标签内的网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！