PDA

View Full Version : New to ExtJs, 1 issue and curious about embedding events



chbfiv
25 Sep 2009, 4:35 AM
1) I'm interested in using the grouptabpanel from the Example grouptabs. I can add items to the "tree" of the Tabs on the left screen by adding them inline to the item(s) list like the example. I can also create them as external variables, then add those variables to the inline items list(s). But if I create them as GroupTab(s) they have issues.



var temp = {
title: 'Subscriptions',
iconCls: 'x-icon-subscriptions',
tabTip: 'Subscriptions tabtip',
style: 'padding: 10px;',
layout: 'fit',
items: [{
xtype: 'tabpanel',
activeTab: 1,
items: [{
title: 'Nested Tabs',
html: Ext.example.shortBogusMarkup
}]
}]
}



However, the defaultType is 'grouptab' in GroupTabPanel.js . So it seems like I can add items to the collection as long as I don't create them as their default type? The reason I was doing this was so I could register/capture the 'activated' event and do something. After playing with this for a bit I figured out that I can add TabPanel(s), and register/receive the 'activate' event fine, but the TabPanel has rendering issues(css). I can't do this for the GroupTab. I can register(which is expected), but the events never fire.

2) I didn't notice anywhere if I can register for event(s) inline while I'm creating items?



{
temp: 'val',
click: function() { alert; }
}


Is there any means to do something like this without having to create a var for each item I add to my item(s) collection, so I can cleanly register for events for these items?

Thanks in advance

VinylFox
25 Sep 2009, 9:51 AM
Im not entirely sure im understanding your question, but I think what your looking for is the listeners config.

For example:

var temp = {
title: 'Subscriptions',
iconCls: 'x-icon-subscriptions',
tabTip: 'Subscriptions tabtip',
style: 'padding: 10px;',
layout: 'fit',
items: [{
xtype: 'tabpanel',
activeTab: 1,
items: [{
title: 'Nested Tabs',
html: Ext.example.shortBogusMarkup,
listeners: {
activate: function(p){ // do something }
}
}]
}]
}

zhegwood
25 Sep 2009, 9:53 AM
Not sure about #1, but you can create inline listeners like this:



items: [
{
//other config stuff
listeners: {
render: {
fn: function(obj) {
},
scope: this
}
}
}
]


The events for each object and the params that are passed into the listeners are defined in the docs.

chbfiv
25 Sep 2009, 9:59 AM
Here is the exception I'm getting when I construct a Ext.ux.GroupPanel



//this.ownerCt.getGrou...El is not a function 43 Examples/ux/GroupTab.js
this.groupEl = this.ownerCt.getGroupEl(this);


After creating a Ext.ux.GroupTab



var tnStartPage = new Ext.ux.GroupTab({
xtype: 'portal',
title: 'Start Page',
tabTip: 'Start Page tabtip',
items: {
title: 'Example',
html : 'Example Body'
}
});

tnStartPage.on('activate', function() { alert('test'); });


and adding it to my GrouptabPanel



//
var gtpFileEditor = {
id: 'grouppanelitems-panel',
xtype: 'grouptabpanel',
tabWidth: 145,
activeGroup: 0,
items: {
items: { tnStartPage }
}
}


If I create the StartPage without constructing it from the GroupPanel Type everything works fine, but I can't register for the 'activate' event cleanly.



var tnStartPage = {
xtype: 'portal',
title: 'Start Page',
tabTip: 'Start Page tabtip',
items: {
title: 'Example',
html : 'Example Body'
}
}