1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    38
    Vote Rating
    0
    Angilo is on a distinguished road

      0  

    Default Tab not showing object

    Tab not showing object


    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:
    Code:
    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:

    Code:
    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:

    Code:
    addTab(listUsers());
    I don't specify the second value because the function itself contains a load.
    The function:

    Code:
    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...

  2. #2
    Sencha User
    Join Date
    Mar 2010
    Posts
    38
    Vote Rating
    0
    Angilo is on a distinguished road

      0  

    Default


    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

    Code:
    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.
    Attached Images

  3. #3
    Sencha User
    Join Date
    Mar 2010
    Posts
    38
    Vote Rating
    0
    Angilo is on a distinguished road

      0  

    Default


    Anyone?

Similar Threads

  1. Retrieving an object and updating an object property in an object array
    By DaveC426913 in forum Sencha Touch 1.x: Discussion
    Replies: 5
    Last Post: 23 Dec 2010, 1:03 PM
  2. object removed, new object added on mixed collection of items in panel.. not updating
    By petewegner@gmail.com in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 19 Nov 2008, 8:27 AM
  3. Panel created with config object for border layout not showing
    By lobo-tuerto in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 5 Jun 2008, 10:49 AM
  4. Showing data in Grid from java List object
    By karim480 in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 15 Apr 2008, 10:20 PM
  5. extra [object Object] at calling element.update(template, true)
    By mxu in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 3 Dec 2007, 9:53 AM