ExtJs TabPanel Scrollbar поведение, если элементы Tab больше размера вкладки - PullRequest
Новая
       15

ExtJs TabPanel Scrollbar поведение, если элементы Tab больше размера вкладки

0 голосов
/ 19 апреля 2011

Мне нужно, чтобы этот простой пример работал, чтобы понять поведение TabPanel.Я читал много веток об этом, и ответ часто - сделать элемент (сетка в этом примере) непосредственно дочерним по отношению к таблице или -установить размер сетки, чтобы заполнить все пространство табуляции

НО моя цельчтобы получить элемент вкладки с размером, превышающим размер вкладки, поэтому вкладка должна иметь полосу прокрутки. Я не могу установить элемент (сетку) непосредственно как дочерний элемент панели вкладок, потому что расположение вкладок фиксирует размер вкладки, поэтому вы не можетеиметь полосы прокрутки

Этот код создает табуляцию: 

var vp = new Ext.Viewport({

    layout: 'border',
    id: 'view1',
    items: [{
        xtype: 'panel',
        region: 'north',
        title: 'north'
    }, {
        xtype: 'panel',
        region: 'east',
        title: 'east'
    }, {
        xtype: 'panel',
        region: 'center',
        title: 'center',
        items: [{
            xtype: 'tabpanel',
            title: 'Tabpanel',
            id: 'tabpanel',
            activeTab: 'tab',
            autoWidth: false,
            autoHeight: false,
            defaults: {
                autoScroll: true
            },
            items: [{
                xtype: 'panel',
                title: 'grid',
                id: 'tab',
                autoWidth: false,
                autoHeight: false,
                defaults: {
                    autoScroll: true
                },

                items: grid
            }]
        }]
    }, {
        xtype: 'panel',
        region: 'west',
        title: 'west'
    }

    ]
});
vp.show();

alert("tabpanel: " + Ext.getCmp('tabpanel').getWidth() + "\ngrid: " +  Ext.getCmp('grid').getWidth());

И этот код создает сетку (взято из примера ext) 

   var myData = [
    ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am'],
    ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am'],
    ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am'],
    ['American Express Company',            52.55, 0.01,  0.02,  '9/1 12:00am'],
    ['American International Group, Inc.',  64.13, 0.31,  0.49,  '9/1 12:00am'],
    ['AT&T Inc.',                           31.61, -0.48, -1.54, '9/1 12:00am'],
    ['Boeing Co.',                          75.43, 0.53,  0.71,  '9/1 12:00am'],
    ['Caterpillar Inc.',                    67.27, 0.92,  1.39,  '9/1 12:00am'],
    ['Citigroup, Inc.',                     49.37, 0.02,  0.04,  '9/1 12:00am'],
    ['E.I. du Pont de Nemours and Company', 40.48, 0.51,  1.28,  '9/1 12:00am'],
    ['Exxon Mobil Corp',                    68.1,  -0.43, -0.64, '9/1 12:00am'],
    ['General Electric Company',            34.14, -0.08, -0.23, '9/1 12:00am'],
    ['General Motors Corporation',          30.27, 1.09,  3.74,  '9/1 12:00am'],
    ['Hewlett-Packard Co.',                 36.53, -0.03, -0.08, '9/1 12:00am'],
    ['Honeywell Intl Inc',                  38.77, 0.05,  0.13,  '9/1 12:00am'],
    ['Intel Corporation',                   19.88, 0.31,  1.58,  '9/1 12:00am'],
    ['International Business Machines',     81.41, 0.44,  0.54,  '9/1 12:00am'],
    ['Johnson & Johnson',                   64.72, 0.06,  0.09,  '9/1 12:00am'],
    ['JP Morgan & Chase & Co',              45.73, 0.07,  0.15,  '9/1 12:00am'],
    ['McDonald\'s Corporation',             36.76, 0.86,  2.40,  '9/1 12:00am'],
    ['Merck & Co., Inc.',                   40.96, 0.41,  1.01,  '9/1 12:00am'],
    ['Microsoft Corporation',               25.84, 0.14,  0.54,  '9/1 12:00am'],
    ['Pfizer Inc',                          27.96, 0.4,   1.45,  '9/1 12:00am'],
    ['The Coca-Cola Company',               45.07, 0.26,  0.58,  '9/1 12:00am'],
    ['The Home Depot, Inc.',                34.64, 0.35,  1.02,  '9/1 12:00am'],
    ['The Procter & Gamble Company',        61.91, 0.01,  0.02,  '9/1 12:00am'],
    ['United Technologies Corporation',     63.26, 0.55,  0.88,  '9/1 12:00am'],
    ['Verizon Communications',              35.57, 0.39,  1.11,  '9/1 12:00am'],            
    ['Wal-Mart Stores, Inc.',               45.45, 0.73,  1.63,  '9/1 12:00am']
];
    function change(val) {
    if (val > 0) {
        return '<span style="color:green;">' + val + '</span>';
    } else if (val < 0) {
        return '<span style="color:red;">' + val + '</span>';
    }
    return val;
}

function pctChange(val) {
    if (val > 0) {
        return '<span style="color:green;">' + val + '%</span>';
    } else if (val < 0) {
        return '<span style="color:red;">' + val + '%</span>';
    }
    return val;
}
var store = new Ext.data.ArrayStore({
    fields: [
       {name: 'company'},
       {name: 'price',      type: 'float'},
       {name: 'change',     type: 'float'},
       {name: 'pctChange',  type: 'float'},
       {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
    ]
});

store.loadData(myData);

// create the Grid
var grid = new Ext.grid.GridPanel({
    store: store,
    columns: [
        {
            id       :'company',
            header   : 'Company', 
            width    : 500, 
            sortable : true, 
            dataIndex: 'company'
        },
        {
            header   : 'Price', 
            width    : 75, 
            sortable : true, 
            renderer : 'usMoney', 
            dataIndex: 'price'
        },
        {
            header   : 'Change', 
            width    : 75, 
            sortable : true, 
            dataIndex: 'change'
        },
        {
            header   : '% Change', 
            width    : 75, 
            sortable : true, 
            dataIndex: 'pctChange'
        },
        {
            header   : 'Last Updated', 
            width    : 300, 
            sortable : true, 
            dataIndex: 'lastChange'
        },

    ],
    stripeRows: true,
    autoExpandColumn: 'company',
    height: 1000,
    width: 2000,
    title: 'Array Grid',
    id:'grid',
    // config options for stateful behavior
    stateful: true,
    autoscroll:true,
    stateId: 'grid'
});

Результат предупреждения 

tabpanel: 1297
grid: 2000

но полоса прокрутки не появляется

1 Ответ

0 голосов
/ 19 апреля 2011

TabPanel не получает высоту от окружающего макета из-за того, как она размещается.

Один из вариантов - установить панель центральной области в соответствии с макетом: 

{
    xtype: 'panel', 
    region: 'east', 
    title: 'east'   
},
{
    xtype: 'panel',
    region: 'center',
    title: 'center',
    layout: 'fit',
    items: {
        xtype: 'tabpanel',
        title: 'Tabpanel'
        // ...
    }
},   
{
    xtype: 'panel',
    region: 'west',
    title: 'west'
}

Однако, если вы не планируете делать что-то большее, чем просто разместить TabPanel в центральной области, лучше сделать TabPanel центральной областью: 

{
    xtype: 'panel',  
    region: 'east',  
    title: 'east'    
},
{
     xtype: 'tabpanel',
     region: 'center',
     title: 'Tabpanel'
     // ...
},   
{
    xtype: 'panel',
    region: 'west',
    title: 'west'
}

Кроме того, вам не нужно устанавливать свойство autoScroll на GridPanel или на значениях по умолчанию для TabPanel, и на самом деле вы можете вызывать нежелательный рендеринг, делая это.

...