PDA

View Full Version : How can i set active tab for dbclick in grid list ?



elnaz
25 Aug 2011, 1:47 AM
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



'relationspanel gridpanel': {
itemdblclick: this.editCredential
}


I don't know How should I set active tab here



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








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);
}


});

raz0r1
25 Aug 2011, 3:06 AM
Hi,

at first you don't have to cover your grid with a 'container' component. you can directly use


Ext.create('Ext.tab.Panel', {
items: [{
xtype: 'grid'
},{
xtype: 'grid'
}];
});

then try to use the following as your listener function


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/#!/api/Ext.tab.Panel-method-setActiveTab

elnaz
25 Aug 2011, 5:01 AM
Thanks for Reply :

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




Ext.getCmp('main').getLayout().setActiveItem('credential-Detail').query("form")[0].loadRecord(record);

and Also I try without container and it didn't work!

raz0r1
25 Aug 2011, 8:43 AM
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:


editCredential: function(grid, record) {
var tabpanel = grid.up('tabpanel');
tabpanel.setActiveTab('credential-Detail');
tabpanel.getActiveTab().down('formpanel').loadRecord(record);
}


this should work

elnaz
25 Aug 2011, 2:55 PM
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



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




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') ......

raz0r1
25 Aug 2011, 10:11 PM
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:


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().

elnaz
26 Aug 2011, 1:08 AM
Here is My Controller :



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);




}





});







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 :



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'







}]


})
});

elnaz
26 Aug 2011, 4:29 AM
It 's Not working yet
I got this error ::
Uncaught TypeError: Cannot read property 'xtype' of undefined
with this 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'




editCredential:function(grid, record) {

var newActiveItem = Ext.ComponentQuery.query('vPanel');
Ext.getCmp('main').setActiveItem(newActiveItem);
newActiveItem.setRecord(record);


}

skirtle
26 Aug 2011, 8:11 AM
Try this. It won't fix it but it'll tell you where the problem is.


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');
}

elnaz
27 Aug 2011, 10:54 AM
Thanks for help,

I add the code that you sent


I got this in ::


Accounts.js:130 (http://127.0.0.1/app/controller/Accounts.js?_dc=1314467020198)Entering editCredential
Accounts.js:132 (http://127.0.0.1/app/controller/Accounts.js?_dc=1314467020198)grid: [object Object]
Accounts.js:133 (http://127.0.0.1/app/controller/Accounts.js?_dc=1314467020198)record: [object Object]
Accounts.js:137 (http://127.0.0.1/app/controller/Accounts.js?_dc=1314467020198)newActiveItem: [object Object]
Accounts.js:141 (http://127.0.0.1/app/controller/Accounts.js?_dc=1314467020198)main: [object Object]
Accounts.js:145 (http://127.0.0.1/app/controller/Accounts.js?_dc=1314467020198)layout: [object Object]

ComponentManager.js:55 (http://127.0.0.1/ext-4.0.2a/src/ComponentManager.js?_dc=1314467014374)Uncaught TypeError: Cannot read property 'xtype' of undefined


and the problem is in here --->>

layout.setActiveItem(newActiveItem);

skirtle
28 Aug 2011, 3:25 AM
OK, managed to reproduce it. The component query is bringing back an array.

Try:


var main = Ext.getCmp('main');
var newActiveItem = main.down('vPanel');

elnaz
29 Aug 2011, 1:04 AM
it didn't work I can't go to the other panel with dbclicking

in my first post ,I could go to the other panel with dbclicking but now dbclicking doesn't work

skirtle
29 Aug 2011, 2:30 AM
it didn't work I can't go to the other panel with dbclicking

in my first post ,I could go to the other panel with dbclicking but now dbclicking doesn't work

@elnaz. You've got to report issues better than that. It's completely unclear what you've tried or what doesn't work.

What does your code look like now and what isn't working? What does happen? What errors are you getting? Have you tried adding in lots of console logging the way I did so that you can see where exactly it's going wrong?