1. #1
    Sencha User
    Join Date
    Mar 2013
    Posts
    2
    Vote Rating
    0
    chote is on a distinguished road

      0  

    Default When active on a scroll tab, it always move an actived tab to right, what's wrong?

    When active on a scroll tab, it always move an actived tab to right, what's wrong?


    I try to use a new version of Extjs (4.2.0) that I think it doesn't have a big change for tab panel component, but I have some problem when I active on a tab. It always display a tab move to right. I don't know what wrong?? (pre. version 4.1.x is working ok, when active on tab, a tab didn't move)

    Code:
    Ext.create('Ext.panel.Panel', {
            id: 'employee-history',
            title: 'Emplyee Biograph',
            height: Ext.getBody().getViewSize().height,
            renderTo: Ext.getBody(),
            iconCls: 'icon-individual',
            bodyStyle: 'background-color:#003;',
            layout: 'fit',
            border: false,
            items: [
            {
                xtype: 'panel',
                layout: 'border',
                border: false,
                items: [
                {
                    xtype: 'panel',
                    region: 'west',
                    border: false,
                    bodyStyle: 'background: #003; color:#FFF; font-size:12px; padding:5px; padding-left:10px;',
                    width: 320,
                    loader: {
                        url: './data/history-general.php',
                        params: {'pid': pid, 'token':Math.random(10)},
                        autoLoad: true,
                        renderer: function(loader, response, active) {
                            var text = response.responseText;
                            loader.getTarget().update(text);
                            return true;
                        }
                    }
                },{
                    xtype: 'tabpanel',
                    region: 'center',
                    border: false,
                    activeTab: 0,
                    plain: false,
                    items: [
                    {
                        title: 'Education',
                        iconCls: 'icon-education',
                        layout: {
                            type:'fit',
                            align:'stretch',
                            pack:'start'
                        },
                        items: [employeeEducationView]
                    },{
                        title: 'Assignment',
                        layout: {
                            type:'fit',
                            align:'stretch',
                            pack:'start'
                        },
                        iconCls: 'icon-all',
                        items: [employeeAssignmentView]
                    },{
                        title: 'Training',
                        layout: {
                            type:'fit',
                            align:'stretch',
                            pack:'start'
                        },
                        iconCls: 'icon-working',
                        items: [employeeTrainingView]
                    },{
                        title: 'Special Training',
                        layout: {
                            type:'fit',
                            align:'stretch',
                            pack:'start'
                        },
                        iconCls: 'icon-connect',
                        items: [employeeTrainingExtraView]
                    },{
                        title: 'Go Aboard',
                        iconCls: 'icon-plane',
                        layout: {
                            type:'fit',
                            align:'stretch',
                            pack:'start'
                        },
                        items: [employeeTrainingExternalView]
                    },{
                        title: 'Community',
                        iconCls: 'icon-community',
                        layout: {
                            type:'fit',
                            align:'stretch',
                            pack:'start'
                        },
                        items: [employeeExternalEventView]
                    },{
                        title: 'Evaluation',
                        iconCls: 'icon-text',
                        layout: {
                            type:'fit',
                            align:'stretch',
                            pack:'start'
                        },
                        items: [employeeEvaluationView]
                    },{
                        title: 'Special Project',
                        iconCls: 'icon-star',
                        layout: {
                            type:'fit',
                            align:'stretch',
                            pack:'start'
                        },
                        items: [employeeSpecialView]
                    },{
                        title: 'Salary',
                        iconCls: 'icon-money',
                        layout: {
                            type:'fit',
                            align:'stretch',
                            pack:'start'
                        },
                        items: [employeeSalaryView]
                    },{
                        title: 'Discipline',
                        iconCls: 'icon-hammer',
                        layout: {
                            type:'fit',
                            align:'stretch',
                            pack:'start'
                        },
                        items: [employeeDisciplineView]
                    },{
                        title: 'Royal Decoration',
                        iconCls: 'icon-badge',
                        layout: {
                            type:'fit',
                            align:'stretch',
                            pack:'start'
                        },
                        items: [employeeDecorationView]
                    },{
                        title: 'Date Specification',
                        iconCls: 'icon-calendar',
                        layout: {
                            type:'fit',
                            align:'stretch',
                            pack:'start'
                        },
                        items: [employeeDateView]
                    },{
                        title: 'Address',
                        iconCls: 'icon-home',
                        layout: {
                            type:'fit',
                            align:'stretch',
                            pack:'start'
                        },
                        items: [employeeAddressView]
                    },{
                        title: 'Family',
                        iconCls: 'icon-family',
                        layout: {
                            type:'fit',
                            align:'stretch',
                            pack:'start'
                        },
                        items: [employeeFamilyView]
                    }]
                }]
            }]
        });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,754
    Vote Rating
    827
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I'm not sure what you mean by "It always display a tab move to right".

    Also, just looking at your code, you are overnesting with each tab, there isn't any reason to have the items nested within a container.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Mar 2013
    Posts
    2
    Vote Rating
    0
    chote is on a distinguished road

      0  

    Default


    Presentation1.jpg
    ..On previous version v.4.1.1, I used the same code. It didn't move to right like this.

Thread Participants: 1

Tags for this Thread