View Full Version : setTitle Breaking Accordion Functionality

18 Nov 2011, 10:25 AM
I have a panel with an accordion layout that has different grids rendered in each of the accordion's panels/items. I'd like to display the number of rows for each grid in the corresponding title for each of the accordions' panels. Something like

Dogs[10] +
Cats [2] +

Birds [3] +

I tried to do this by getting a count from each grid store and then using that count to update the title with setTitle(). When I do this, the title does get updated as expected, but the +/- button disappears from the accordion title bar and clicking on the title bar no longer causes it to toggle open and closed

the code I'm using

Ext.define('Myapp.view.Animals', { extend: 'Ext.panel.Panel',
layout: 'accordion',
id: 'animals'
items: [
itemId: 'dogsItem',
title: 'Dogs',
xtype: 'doggrid'
itemId: 'catsItem',
title: 'Cats',
xtype: 'catgrid'
itemId: 'birdsItem',
title: 'Birds',
xtype: 'birdgrid'
listeners: {
beforerender: function() {
var dogCnt = Ext.getStore('dogs').getCount();
var catCnt = Ext.getStore('cats').getCount();
var birdCnt = Ext.getStore('birds').getCount();

this.getComponent('dogsItem').setTitle('Dogs ['+dogCnt+']');
this.getComponent('catsItem').setTitle('Cats ['+catCnt+']');
this.getComponent('birdsItem').setTitle('Birds ['+birdCnt+']');

Just learning ExtJS, so any help would be greatly appreciated.

18 Nov 2011, 11:26 AM
It seems like setTitle() should be called after an item is rendered. If you change beforerender to afterrender, it'll work just fine. Or you can use still beforerender but will have to use the this.items collection to modify the title of each component.

18 Nov 2011, 12:47 PM
since the store seems to be already loaded before rendering, i would create an initComponent method and apply the modified value to the title config.

21 Nov 2011, 7:12 AM

Changing to afterrender did the trick. But now its lead me to a new problem.

Subsequent queries that change the number of dogs, cats and/or birds in their respective stores doesn't refire the afterrender event. So it works for the first query, but doesn't change after that.

I tried putting a datachanged event on each store to update the counts on the accordion panel titles, but then I get an "undefined" error when I try to get the title component to apply the change. Presumably because the grid has not yet been rendered/instantiated on the first query?

I'm using extJS MVC so when I define the store, the datachanged listener I'm using is

datachanged: function(){
Ext.getCmp('grid panel ID').getComponent('itemID').setTitle('Dogs ['+this.getCount()+']');

which errors Ext.getCmp('grid panel ID') is undefined

21 Nov 2011, 7:23 AM
I think it would be better to put a listener on the load event and do that in either the view or the controller. The store/model doesn't necessarily know of your view.