Tab not showing object

[Angilo]

Hi,

I'm unsure if it's a bug or not.
I've found several issues regarding tabpanels.

#1: tabs can't be closed

Example:

var Tabs =  Ext.createWidget('tabpanel', {
        resizeTabs:true,
        minTabWidth: 170,
        tabWidth:170,
        enableTabScroll: true,
        activeTab: 0,
        width:940,
        height:765,
        defaults: {autoScroll:true, closable: true}
    });

    function addTab(addObject, typeObject){
      	TabAdded = Tabs.add(addObject);
        addObject.show();
        if (typeObject == 'grid')
            addObject.store.reload();
    }

Solution:

var Tabs =  Ext.createWidget('tabpanel', {
        resizeTabs:true,
        minTabWidth: 170,
        tabWidth:170,
        enableTabScroll: true,
        activeTab: 0,
        width:940,
        height:765,
        defaults: {autoScroll:true, closable: true}
    });

    function addTab(addObject, typeObject){
        TabAdded = Tabs.add({items:[addObject], closable: true, title: addObject.title, autoScroll:true});
        addObject.show();
        if (typeObject == 'grid')
            addObject.store.reload();
    }

Yet it is not auto scrolling. I can do autoscroll by changing addObject.show(); to TabAdded.show();
But... Then the object inside the data is not displaying. For example my Object is a grid. The grid does what it should do (it builds) but it's not populating the data.

What is going on here?



This is a good example:

I call:

addTab(listUsers());

I don't specify the second value because the function itself contains a load.
The function:

var listUsers = function () {
    
    
    Ext.regModel('uac_users_store_model', {
        fields: [
            {name: 'users_id', type: 'int', mapping: 'users_id'},
            {name: 'users_firstname', type: 'string', mapping: 'users_firstname'},
            {name: 'users_lastname', type: 'string', mapping: 'users_lastname'},
            {name: 'users_telephone', type: 'string', mapping: 'users_telephone'},
            {name: 'users_email', type: 'string', mapping: 'users_email'}
        ]
    });

    UAC['users']['store'] = new Ext.data.Store({
        model: 'uac_users_store_model',
        proxy: {
            type: 'ajax',
            actionMethods: 'POST',
            url: Base_URL + 'index.php/uac/listUsers/',
            reader: {
                type: 'json',
                root: 'results'
            }
        },
        autoLoad: false,
        sortInfo:{field: 'users_firstname', direction: "ASC"}
    });

    UAC['users']['grid'] =  new Ext.grid.GridPanel({
        id: 'uac_users_grid',
          store: UAC['users']['store'],
          columns: [
                {
                    header: LanguageArray['HEADER_ID'],
                    readOnly: true,
                    dataIndex: 'users_id',
                    flex: 1,
                    sortable: true,
                    hidden: true
                },
                {
                    header: LanguageArray['HEADER_FIRSTNAME'],
                    dataIndex: 'users_firstname',
                    flex: 1,
                    sortable: true
                },
                {
                    header: LanguageArray['HEADER_LASTNAME'],
                    dataIndex: 'users_lastname',
                    flex: 1,
                    sortable: true
                },
                {
                    header: LanguageArray['HEADER_PHONE'],
                    dataIndex: 'users_telephone',
                    flex: 1,
                    sortable: true
                }
          ],
          title: LanguageArray['HEADER_UAC_USERS'],
          closable: false,
          selModel: Ext.create('Ext.selection.RowModel', {
            singleSelect:true
          })
            
    });
    UAC['users']['grid'].getSelectionModel().on('selectionchange', function(sm, selectedRecord) {
        if (selectedRecord.length) {
            addTab(OpenUser(selectedRecord[0].data.users_id));
        }
    });
    UAC['users']['grid'].store.load();
    return UAC['users']['grid'];
}

In firebug I can see the data is being loaded, so the store is doing it's job. The grid is just not doing anything with the data. If I select another tab and go back to this tab, it shows the right data...

[Angilo]

I expect it's something with the objects put inside the tab not automatically rendering to full size.
Forms are not totally stretched (like they should) but they stop halfway.

Check the image attached.

To provide full information, see the code below

new Ext.Viewport({
        layout: 'border',
        title: 'Ext Layout Browser',
        items: [{
            layout: 'border',
            id: 'top',
            border: false,
            split:true,
            margins: '0 0 0 0',
            height: 30,
            region: 'north',
            items: [
            {
                xtype: 'box',
                region: 'north',
                applyTo: 'header',
                height: 30
            },
            {
                xtype: 'toolbar',
                region: 'center',
                bodyStyle: 'padding-bottom:15px;background:#eee;',
                height: 30,
                margins: '-30 0 0 0',
                items: [
                        headerMenu,
                        officeCombo]
            }]
            
        },
        {
            layout: 'border',
            id: 'west-quick',
            title: 'Quick links',
            region:'west',
            border: true,
            split:true,
            collapsible: true,
            collapsed: true,
            margins: '2 0 5 5',
            width: 275,
            items: [favoritesPanel, helpPanel]
        },
            Tabs
        ],
        renderTo: Ext.getBody()
    });
    // Load the helper for the homepage
    goHelp('home');
    
    // Load the panel for the homepage
    addTab(Home['panel']);

Of course the region is set on Tabs to center.

[Angilo]

Anyone?