Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: How can i set active tab for dbclick in grid list ?

  1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    42
    Answers
    1
    Vote Rating
    0
      0  

    Default How can i set active tab for dbclick in grid list ?

    Hi,

    I have a tab panel with 3 tabs
    inside of each tab ,I have grid list,
    I want to dbclick in one of gridlist then I want to go to another panel (detail of each list)


    now when I dbclick in each grid list I 'm going in detail part ,but I don't know how should I set active tab , that when I dbclick in gridlist on special tab ,I just going to that detail part

    Code:
     'relationspanel gridpanel': {
                    itemdblclick: this.editCredential
                }
    I don't know How should I set active tab here

    Code:
    editCredential: function (grid, record) {
            Ext.getCmp('main').getLayout().setActiveItem('credential-Detail').query("form")[0].loadRecord(record);
        },

    Code:
    
        extend: 'Ext.tab.Panel',
        alias: 'widget.relationspanel',
    
    
        width: 350,
        border: true,
        maxHeight: 280,
        bodyBorder: false,
        fieldDefaults: {
            labelWidth: 75,
            msgTarget: 'side'
        },
    
    
        constructor: function () {
            this.callParent(arguments);
            return this;
        },
    
    
        initComponent: function () {
           
        this.items = [{
                title: 'Credential',
                xtype: 'container',
                items: [{
                    align: 'center',
                    xtype: 'gridpanel',
                    store: 'StoreAuthentications',
                    selType: 'checkboxmodel',
                    multiSelect: true,
            id:'tab1',
                    columns: [{
                        header: 'Private User ID',
                        dataIndex: 'privUID',
                flex:1,
                        align: 'center'
                    }, {
                        header: 'Authentication Schema',
                        dataIndex: 'authSchema',
                        flex: 1,
                        align: 'center'
                    },{
              
                        header: 'Authentication Data',
                        dataIndex: 'authData',
                        flex: 1,
                        align: 'center'
                    },{
              
                        header: 'Public User ID',
                        dataIndex: 'puserid',
                        flex: 1,
                        align: 'center'
                    }
    ]
                }]
    
    
            }, {
                title: 'PublicUID',
            id: 'publictab',
                xtype: 'container',
                items: [{
                    align: 'center',
                    xtype: 'gridpanel',
                    store: 'StoreActivities',
                    selType: 'checkboxmodel',
                id:'tab2',
                    multiSelect: true,
                    columns: [{
                        header: 'Public User ID',
                        dataIndex: 'id',
                        flex: 1,
                        align: 'center'
                    }, {
                        header: 'Status',
                        dataIndex: 'status',
                        flex: 1,
                        align: 'center'
                    },{
                        header: 'Online Status',
                        dataIndex: 'online',
                        flex: 1,
                        align: 'center'
                    },{
                        header: 'Profile IDs',
                        dataIndex: 'profileIDs',
                        flex: 1,
                        align: 'center'
                    }
    
    
                    ]
                }]
            }, {
                title: 'Profile',
                xtype: 'container',
                items: [{
                    align: 'center',
                    xtype: 'gridpanel',
                     store: 'StoreProfile',
                    selType: 'checkboxmodel',
                id:'tab3',
                    multiSelect: true,
                    columns: [{
                        header: 'Profile ID',
                        dataIndex: 'id',
                        flex: 1,
                        align: 'center'
                    }, {
                        header: 'Profile Type',
                        dataIndex: 'type',
                        flex: 1,
                        align: 'center'
                    },
              {
                        header: 'Profile Data',
                        dataIndex: 'data',
                        flex: 1,
                        align: 'center'
                    },{
                        header: 'Private User IDs',
                        dataIndex: 'privUIDs',
                        flex: 1,
                        align: 'center'
                    }
                    ]
                }]
            }];
    
    
            this.buttons = [{
                text: 'Delete',
                action: 'delete'
    
    
            }];
    
    
            this.callParent(arguments);
        }
    
    
    });

  2. #2
    Sencha User
    Join Date
    Sep 2009
    Posts
    85
    Answers
    8
    Vote Rating
    0
      0  

    Default

    Hi,

    at first you don't have to cover your grid with a 'container' component. you can directly use
    Code:
    Ext.create('Ext.tab.Panel', {
    items: [{
    xtype: 'grid'
    },{
    xtype: 'grid'
    }];
    });
    then try to use the following as your listener function
    Code:
    editCredential: function(grid) {
    grid.up('tabpanel').setActiveTab("ID/component you want to set active");
    }
    i think this should work (untested)

    see: http://docs.sencha.com/ext-js/4-0/#!...d-setActiveTab

  3. #3
    Sencha User
    Join Date
    Jul 2011
    Posts
    42
    Answers
    1
    Vote Rating
    0
      0  

    Default

    Thanks for Reply :

    But I call this detail grid from the other panel
    as you can see ::

    Code:
     Ext.getCmp('main').getLayout().setActiveItem('credential-Detail').query("form")[0].loadRecord(record);
    and Also I try without container and it didn't work!

  4. #4
    Sencha User
    Join Date
    Sep 2009
    Posts
    85
    Answers
    8
    Vote Rating
    0
      0  

    Default

    Ok.
    1st: I dont understand your problem. Why you dont use the code I posted above?
    2nd: Either you posted the wrong code or you did not look at the api docs:
    - you try to adress the panel via the id "main" but there is no component that has that id
    - you want to use "setActiveItem" but that method is only defined for the "card"-layout. i dont know if a tab panel uses this layout but you should really use the tabpanels method "setActiveTab" because that is exactly what you want to do.

    please try first what i posted earlier:
    Code:
    editCredential: function(grid, record) {
    var tabpanel = grid.up('tabpanel');
    tabpanel.setActiveTab('credential-Detail');
    tabpanel.getActiveTab().down('formpanel').loadRecord(record);
    }
    this should work

  5. #5
    Sencha User
    Join Date
    Jul 2011
    Posts
    42
    Answers
    1
    Vote Rating
    0
      0  

    Default

    there is no id named main since I have it in another class here
    I just put some code related the This grid panel

    I read documentation and I know I should use setActiveTab but I don't know how



    Here is my app
    Code:
    Ext.application({
        name: 'TP',
        appFolder: 'app',
        controllers: ['Accounts', 'Portal'],
    
    
        launch: function () {
            Ext.create('Ext.container.Viewport', {
                layout: 'border',
                items: [{
                    xtype: 'topToolbar',
                    region: 'north'
    
    
    
    
                }, {
                    xtype: 'accountmenu',
                    region: 'west'
    
    
                }, {
                    xtype: 'panel',
                    id: 'main',
                    region: 'center',
                    layout: 'card',
                    items: [{
                        xtype: 'accountlist',
                        id: 'account-list'
                    }, {
                        xtype: 'vPanel',
                        id: 'v-panel'
                    }, {
                        xtype: 'newdetailPanel',
                        id: 'new-detailPanel'
                    }, {
                        xtype: 'credentialDetail',
                        id: 'credential-Detail'
                    }, {
                        xtype: 'credential',
                        id: 'credential-list'
                    }, {
                        xtype: 'publicuid',
                        id: 'public-u-id'
                    }, {
                        xtype: 'profilelist',
                        id: 'profile-list'
                    }, {
                        xtype: 'publicuiddetail',
                        id: 'public-u-id-detail'
                    }, {
                        xtype: 'profiledetail',
                        id: 'profile-detail'
                    }]
                }]
            });
        }
    });

    here is my Vpanel


    Code:
    Ext.define('TP.view.account.Vpanel', {
        extend: 'Ext.panel.Panel',
        alias: 'widget.vPanel',
        width: '100%',
        height: '100%',
        //store: 'StoreAuthentication',
        layout: {
            type: 'vbox',
            align: 'center'
        },
       
        items: [{
            xtype: 'detailPanel',
            id: 'detail-panel',
            maxHeight: 280,
            width: '100%',
            flex: 4
        }, {
            xtype: 'relationspanel',
            id: 'relations-panel',
            width: '100%',
            flex: 1
    
    
        }]
    });
    is the reason that I use this Ext.getCmp('main') ......




  6. #6
    Sencha User
    Join Date
    Sep 2009
    Posts
    85
    Answers
    8
    Vote Rating
    0
      0  

    Default

    sry but now i am confused.
    at first you talked about a tabpanel where you want to change the active tab but now you post a code for a panel with card layout.

    i guess you are in the accountlist and want on dbl click, change the active card

    if i see the card panel you posted, you should use:
    Code:
    itemdblclick: function(grid, record) {
    var cardpanel = grid.up('panel[itemId="main"]');
    var newActive = cardpanel.setActiveItem(cardpanel.down('vPanel'));
    newActive.down('form').setRecord(record);
    }
    if this not solves your problem, post enough code so we can imagine how your application works.

    further: its recommended that you dont use id-property anymore. use itemId instead and the componentquery.
    for me i found out the componentquery selection is more than 2 times faster then getCmp().

  7. #7
    Sencha User
    Join Date
    Jul 2011
    Posts
    42
    Answers
    1
    Vote Rating
    0
      0  

    Default Thanks

    Here is My Controller :

    Code:
    Ext.define('TP.controller.Accounts', {
    
    
        extend: 'Ext.app.Controller',
        stores: ['StoreAccounts', 'StoreAuthentications', 'StoreActivities', 'StoreProfile'],
        models: ['Account', 'Authentication', 'Activiti', 'Profile'],
        views: ['account.Menu', 'account.List', 'account.Edit', 'account.Relations', 'account.Vpanel', 'account.ActivitiPanel', 'account.NewEdit', 'account.NewrelationAccount', 'account.CredentialDetail', 'account.ProfileDetail', 'account.MenuPage', 'account.Credential', 'account.PublicUID', 'account.Profile', 'account.PublicUIDDetail'],
        refs: [{
            ref: 'accountlist',
            selector: 'Accountlist'
        }],
    
    
        init: function () {
            this.control({
                'accountlist': {
                    itemdblclick: this.editaccount
                },
          
                'relationspanel gridpanel': {
                    itemdblclick: this.editCredential
                }
            });
        },
    
    
        editaccount: function (grid, record) {
            Ext.getCmp('main').getLayout().setActiveItem('v-panel').query("form")[0].loadRecord(record);
        },
    
    
        editCredential:function(grid, record) {
        var cardpanel = grid.up('panel[itemId="main"]');
        var newActive = cardpanel.setActiveItem(cardpanel.down('vPanel'));//v-panel
        newActive.down('form').setRecord(record);
    
    
    
    
    }
    
    
       
    
    
    });

    Code:
     editCredential:function(grid, record) {
        var cardpanel = grid.up('panel[itemId="main"]');
        var newActive = cardpanel.setActiveItem(cardpanel.down('vPanel'));
        newActive.down('form').setRecord(record);
    
    
    
    
    },

    Account List :

    Code:
    Ext.define('TP.view.account.List', {
        extend: 'Ext.grid.Panel',
        alias: 'widget.accountlist',
        title: 'Account List',
        store: 'StoreAccounts',
        model: 'TP.model.Account',
        width: '100%',
    
    
        tbar: [{
            xtype: 'button',
            icon: '../../../resources/images/newuser.png',
            text: 'New ',
            action: 'new'
    
    
        }, '->',
        {
    
    
            xtype: 'textfield',
            fieldLabel: 'Search',
            id: 'search'
    
    
        }],
    
    
    
    
        initComponent: function () {
            Ext.apply(this, {
                selModel: Ext.create('Ext.selection.CheckboxModel')
            });
            this.callParent(arguments);
        },
    
    
        columns: [{
            header: 'Private User ID',
            dataIndex: 'puserid',
            flex: 1
        }, {
            header: 'Display Name',
            dataIndex: 'displayname',
            flex: 1
        }, {
            header: 'Subcriber ID',
            dataIndex: 'subcriberid',
            flex: 1
        }, {
            header: 'Valid From',
            dataIndex: 'validfrom',
            renderer: Ext.util.Format.dateRenderer('d/m/Y')
        }, {
            header: 'Valid To',
            dataIndex: 'validto',
            renderer: Ext.util.Format.dateRenderer('d/m/Y')
        }, {
            header: 'Status',
            dataIndex: 'status'
        }],
        bbar: Ext.create('Ext.PagingToolbar', {
            displayInfo: true,
            displayMsg: 'Accounts {0} - {1} of {2}',
    
    
            listeners: {
                beforerender: function () {
                    this.store = this.ownerCt.store;
    
    
                }
    
    
            },
            items: [{
    
    
                xtype: 'button',
                icon: '../../../resources/images/export.png',
                text: 'Export',
                action: 'export'
            }, {
                xtype: 'button',
                icon: '../../../resources/images/DeleteUser.png',
                text: 'Delete',
                action: 'remove'
              
    
    
    
    
    
    
            }]
    
    
        })
    });

  8. #8
    Sencha User
    Join Date
    Jul 2011
    Posts
    42
    Answers
    1
    Vote Rating
    0
      0  

    Default

    It 's Not working yet
    I got this error ::
    Uncaught TypeError: Cannot read property 'xtype' of undefined
    with this code

    Code:
        editCredential:function(grid, record) {
        
         var newActiveItem = Ext.ComponentQuery.query('vPanel');
             Ext.getCmp('main').getLayout().setActiveItem(newActiveItem);
             newActiveItem.setRecord(record);
    
    
    }


    and if I change it to this code I got this error ::
    Uncaught TypeError: Object [object Object] has no method 'setActiveItem'

    Code:
        editCredential:function(grid, record) {
        
         var newActiveItem = Ext.ComponentQuery.query('vPanel');
             Ext.getCmp('main').setActiveItem(newActiveItem);
             newActiveItem.setRecord(record);
    
    
    }

  9. #9
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585
    Vote Rating
    394
      0  

    Default

    Try this. It won't fix it but it'll tell you where the problem is.

    Code:
    editCredential: function(grid, record) {
        console.log('Entering editCredential');
    
        console.log('grid: ' + grid);
        console.log('record: ' + record);
    
        var newActiveItem = Ext.ComponentQuery.query('vPanel');
    
        console.log('newActiveItem: ' + newActiveItem);
    
        var main = Ext.getCmp('main');
    
        console.log('main: ' + main);
    
        var layout = main.getLayout();
    
        console.log('layout: ' + layout);
    
        layout.setActiveItem(newActiveItem);
    
        console.log('Active item set');
    
        newActiveItem.setRecord(record);
    
        console.log('Leaving editCredential');
    }

  10. #10
    Sencha User
    Join Date
    Jul 2011
    Posts
    42
    Answers
    1
    Vote Rating
    0
      0  

    Default

    Thanks for help,

    I add the code that you sent


    I got this in ::


    Accounts.js:130Entering editCredential
    Accounts.js:132grid: [object Object]
    Accounts.js:133record: [object Object]
    Accounts.js:137newActiveItem: [object Object]
    Accounts.js:141main: [object Object]
    Accounts.js:145layout: [object Object]


    and the problem is in here --->>

    layout.setActiveItem(newActiveItem);

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •