Question

Asked on 2010-01-20 at 11:57:57ID: 25436970

extjs how to determine active tab in a tab panel

by: twalker916500

Rating9.3Excellent

I have an Excel button in a toolbar above a tabpanel that is in a viewport. There are multiple taba and I want to be able to assign the onClick event of the Excel button based on the tab that is active when it is clicked. Given the attached code how can I determine which tab is active?

Ext.onReady(function(){    
    var memberModel = [
        {name:'COMPANY',mapping:'COMPANY'},
        {name:'CITY',mapping:'CITY'},
        {name:'SYSTEM',mapping:'SYSTEM'},
        {name:'CID',mapping:'CID',type:'int'},
        {name:'CWEB',mapping:'CWEB'},
        {name:'COMPANYTYPE',mapping:'COMPANYTYPE'},
        {name:'ACOMPANYLASTDATE',mapping:'ACOMPANYLASTDATE'},
        {name:'ACOMPANYLASTUSER',mapping:'ACOMPANYLASTUSER'}
    ];
    var pmReader = new Ext.data.CFQueryReader({id:'COMPANY'},memberModel);
    var pmStore = new Ext.data.Store({
        url:'cfc/ext.cfc',
        baseParams:{method: 'getPMembers',returnFormat: 'JSON',queryFormat: 'column'},
        reader: pmReader,
        sortInfo: {
            field: 'COMPANY',
            direction: 'ASC'
        }
    });	
	pmStore.load();
    var ceoModel = [
        {name:'COMPANY',mapping:'COMPANY'},
        {name:'LAST',mapping:'LAST'},
        {name:'FIRST',mapping:'FIRST'},
        {name:'TITLE',mapping:'TITLE'},
        {name:'EMAIL',mapping:'EMAIL'},
        {name:'COMPANYTYPE',mapping:'COMPANYTYPE'},
        {name:'ADDRESS',mapping:'ADDRESS'},
        {name:'CITY',mapping:'CITY'},
        {name:'STATE',mapping:'STATE'},
        {name:'ZIP',mapping:'ZIP',type:'string'},
        {name:'PHONE',mapping:'PHONE'},
        {name:'FAX',mapping:'FAX'}
    ];
    var ceoReader = new Ext.data.CFQueryReader({id:'COMPANY'},ceoModel);
    var ceoStore = new Ext.data.Store({
        url:'cfc/ext.cfc',
        baseParams:{method: 'pMemberCeos',returnFormat: 'JSON',queryFormat: 'column'},
        reader: ceoReader,
        sortInfo: {
            field: 'COMPANY',
            direction: 'ASC'
        }
    });	
	ceoStore.load();
    var viewport = new Ext.Viewport({
        layout: 'border',
        id: 'pmViewport',
        renderTo: Ext.getBody(),
        items: [{
            region: 'north',
            id: 'pmToolbar',
            xtype: 'toolbar',
            items: [{
               xtype: 'tbspacer'
            },{
                xtype: 'tbbutton',
                text: 'Excel',
                handler: function(){
                    alert('Go to Excel');
                }
            },{
                xtype: 'tbfill'
            }]
        },{
            region: 'west',
            id: 'pmNewarea',
            xtype: 'panel',
            split: true,
            width: 250,
            margins: '0 0 0 5',
            html: 'West'
        },{
            region: 'center',
            id: 'pmGridarea',
            xtype: 'tabpanel',
            activeTab: 0,
            items: [{
                xtype: "grid",
                store: pmStore,
                autoExpandColuumn: 'COMPANY',
                sm: new Ext.grid.CellSelectionModel({
                        listeners: {
                            cellselect: function(sm, iRow, iCell){
                                if(iCell == 4){
                                    var d = sm.grid.selModel.selection.record.data;
                                    if (d.CWEB != null && iCell==4) {
                                        var url = "http://" + d.CWEB.substr(0,d.CWEB.indexOf('<'));
                                        //alert(url);
                                        var wname = 'companyWeb';
                                        var wfeatures = 'menubar=yes,resizable=yes,scrollbars=yes,status=yes,location=yes';
                                        window.open(url,wname,wfeatures);
                                    }
                                }
                            }
                        }
                    }),
        		columns: [
                    {id: "member",  header: "Member",       dataIndex: 'COMPANY',           sortable: true,     width: 250},
                    {id: "city",    header: "City",         dataIndex: 'CITY',              sortable: true},
                    {id: "system",  header: "System",       dataIndex: 'SYSTEM',            sortable: true,     width: 200,   tooltip: 'The Healthcare System this company belongs to'},
                    {id: "cid",     header: "ID",           dataIndex: 'CID',               sortable: true, hidden: true},
                    {id: "web",     header: "Web Site",     dataIndex: 'CWEB',              sortable: true,     width: 150},
                    {id: "type",    header: "Company Type", dataIndex: 'COMPANYTYPE',       sortable: true},
                    {id: "update",  header: "Last Update",  dataIndex: 'ACOMPANYLASTDATE',  sortable: true, hidden: true,     renderer: Ext.util.Format.dateRenderer('m/d/y')},
                    {id: "user",    header: "Last User",    dataIndex: 'ACOMPANYLASTUSER',  sortable: true, hidden: true}
        		],
                title: 'Members'
            },{
                xtype: "grid",
                store: ceoStore,
                autoExpandColuumn: 'COMPANY',
        		columns: [
                    {id: "member",  header: "Member",       dataIndex: 'COMPANY',       sortable: true, width: 250},
                    {id: "last",    header: "Last",         dataIndex: 'LAST',          sortable: true},
                    {id: "first",   header: "First",        dataIndex: 'FIRST',         sortable: true},
                    {id: "title",   header: "title",        dataIndex: 'TITLE',         sortable: true, width: 150},
                    {id: "email",   header: "Email",        dataIndex: 'EMAIL',         sortable: true, width: 150},
                    {id: "type",    header: "Company Type", dataIndex: 'COMPANYTYPE',   sortable: true},
                    {id: "address",    header: "Address",   dataIndex: 'ADDRESS',       sortable: true, hidden: true}, 
                    {id: "city",    header: "City",         dataIndex: 'CITY',          sortable: true, hidden: true}, 
                    {id: "STATE",   header: "STATE",        dataIndex: 'STATE',         sortable: true, hidden: true},
                    {id: "zip",     header: "ZIP",          dataIndex: 'ZIP',           sortable: true, hidden: true},
                    {id: "phone",   header: "PHONE",        dataIndex: 'PHONE',         sortable: true, hidden: true},
                    {id: "fax",     header: "FAX",          dataIndex: 'FAX',           sortable: true, hidden: true}
        		],
                title: 'Member CEOs'
            }]
        },{
            region: 'east',
            id: 'pmEditarea',
            xtype: 'panel',
            split: true,
            width: 250,
            margins: '0 5 0 0',
            html: 'East'
        },{
            region: 'south',
            id: 'pmStatusarea',
            xtype: 'panel',
            margins: '0 5 5 5',
            html: 'South'
        }]
    });
});
                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:

Select allOpen in new window

Related Solutions

Solution

Sign up now to view this solution! It's quick, easy, and secure to subscribe. We will return you to this solution, unlocked, when you’re done.

About this Solution

View This Solution - Start Your 30 Day Free Trial
Zone
general
Tags
javascript
Participating Experts
1
Solution Grade
A

Replies

 by: meetpatel

Posted on 2010-01-21 at 06:28:52ID: 28095119

All comments and solutions are available to Premium Service Members only. Sign up to view the solution to this question. Already a member? Log in to view this solution.

 by: twalker916

Posted on 2010-01-21 at 07:36:39ID: 32741849

All comments and solutions are available to Premium Service Members only. Sign up to view the solution to this question. Already a member? Log in to view this solution.

Log In

Forgot your password?Sign up

Top Experts

  1. mplungjan

    1,840

    0 points yesterday

    Profile

BrowseAre you an Expert?