PDA

View Full Version : Button from buttongroup not responding to any render events



caleywoods
11 Nov 2013, 9:52 AM
Controller:

Ext.define('whiteboard.controller.yearbookinvoicer.CMSController', {
extend: 'Ext.app.Controller',
models: [],
stores: [],
requires : [],
init: function() {
var me = this;
console.log('ybk invoicer CMS controller init fired');


me.control({
'yearbookinvoicermenuButtons button:first': {
render: function( btn ) {
// btn.toggle( true );
console.log('button rendered');
}
},
'yearbookinvoicermenuButtons button[id="lineItems"]': {
click: me.flip
},
'yearbookinvoicermenuButtons button[id="monthEnd"]': {
click: me.flip
},
'yearbookinvoicermenuButtons button[id="specCode"]': {
click: me.flip
},
'yearbookinvoicermenuButtons button[id="cmReason"]': {
click: me.flip
},
'yearbookinvoicermenuButtons button[id="gl"]': {
click: me.flip
},
'yearbookinvoicermenuButtons button[id="bulkFinalize"]': {
click: me.flip
},
'yearbookinvoicermenuButtons button[id="unlock"]': {
click: me.flip
},
'yearbookinvoicermenuButtons button[id="usercontrol"]':{
click:me.flip
}


});
},
flip: function( button ) {
var btnName = button.el.id,
card = Ext.getCmp( 'yearbookinvoicerCMSCard' ).getLayout();


switch ( btnName ) {
case 'lineItems':
card.setActiveItem(0);
break;
case 'monthEnd':
card.setActiveItem(0);
break;
case 'specCode':
card.setActiveItem(0);
break;
case 'cmReason':
card.setActiveItem(0);
break;
case 'gl':
card.setActiveItem(0);
break;
case 'bulkFinalize':
card.setActiveItem(1);
break;
case 'unlock':
card.setActiveItem(2);
break;
case 'usercontrol':
card.setActiveItem(3);
break;
}
}
});


Component (is required by a view not shown here)

Ext.define('whiteboard.component.yearbookinvoicer.MenuButtons', {
extend: 'Ext.container.ButtonGroup',
alias: 'widget.yearbookinvoicermenuButtons',
id : 'yearbookinvoicermenuButtons',
initComponent: function() {


this.items = [{
xtype: 'button',
text: 'Line Items',
id : 'lineItems'
}, {
xtype: 'button',
text: 'Month End',
id : 'monthEnd'
}, {
xtype: 'button',
text: 'Spec Code',
id : 'specCode'
}, {
xtype : 'button',
text : 'CM Reason',
id : 'cmReason'
}, {
xtype: 'button',
text: 'GL',
id : 'gl'
},
{
xtype:'button',
text:'User Control',
id:'usercontrol'
},
{
xtype:'button',
text:'Finalize',
id:'bulkFinalize'
},
{
xtype : 'button',
text : 'Unlock Invoices',
id : 'unlock'
}
];
this.callParent(arguments);
}
});


I cannot seem to get the render function defined under the control section of the controller to fire. I've tried moving it out into a function defined like the 'flip' function but that did nothing. I've also tried beforerender and afterrender and that also has failed.

I did swap out render for 'focus' and when the first button is focused (using tab) it correctly logs 'button rendered' to the console so it seems as though the selector is correct.

Edit: I have added a method to the init of the controller to log out the events that are fired by the ButtonGroup and the first button itself and at no point do I see any type of render event firing. Within my view I have setup the card layout and set deferredRenderer to true so the Panels contents (including the button group) should be firing 'beforerender', 'render', 'afterrender' after the tab that displays the buttons is clicked.

mitchellsimoens
12 Nov 2013, 12:27 PM
I made a fiddle and it's working for me:

1he

caleywoods
13 Nov 2013, 8:35 AM
I made a fiddle and it's working for me:

1he

This worked fine for me also. I did some more checking and here's what I found. My main controller for the application is named InvoicerController. The layout of the application is a tab panel. I have a method inside the InvoicerController that listens for the "Activate" event of the second tab which is the Content Mangement section of the application.

Once the InvoicerController catches the Activate event the method fires and grabs my second controller (aptly named CMSController) and fires its init() function. It seems that trying to listen for the rendering events of the buttongroup inside the CMSController was incorrect and I was able to successfully catch all render events (before, render, after) inside the InvoicerController and accomplish what I was after which was making the first button in the buttongroup appear depressed since it's the first card shown from the card layout of the CMS Tab.

In summary the solution was to move my method for depressing the first button of the button group to the InvoiceController which is the controller that was able to listen for the rendering of the buttongroup.

The method for accomplishing this inside the InvoicerController looked like this:



init: function() {
me.control({
'yearbookinvoicerCMSTab' : {
active : me.callCMSController, // Calls the init() of my 2nd controller
afterrender : me.toggleButton
}
});
},
// callCMSController excluded for brevity
toggleButton: function( component ) {
var btn = component.query('button:first'); // This finds the buttongroup from my view
btn[0].toggle( true ); // This depresses the button, 0 required because query() returns an array
}

mitchellsimoens
13 Nov 2013, 9:12 AM
Why not just set the pressed config to true on the first button instead of doing it on render?