View Full Version : How To Edit Button Init Method

25 Feb 2012, 11:36 AM
I am building a simple navigation bar. I start by adding a panel to a viewport, named contentPanel. I set the panel's layout to card and added 3 panels and a toolbar. The 3 panels will hold the content for each page and are named splashPanel, dataPanel and reportPanel. The toolbar has 3 navigation buttons that corresponding to the splash, data and report panels. Clicking on a button will set the contentPanel's setActiveItem() to 0, 1, or 2.

In Designer 2.0, how can I add a property to each button that will hold it's activeItem setting - i.e. splashButton will hold a 0, data a 1 and report a 2? My aim is to wire each button's listener to the same handler method in my navigationController and simply have that handler use the new property to set the active item on the contentPanel.


27 Feb 2012, 8:32 AM
AFAIK for now you have to define an event handler for each button but you can define a function so each button's event just call that function:

"#button1": {
click : this.button1Click
"#button2": {
click : this.button2Click
"#button3"": {
click : this.button3Click

button1Click: function(button) {

button2Click: function(button) {

button3Click: function(button) {

buttonClick: function(button) {
var contentPanel = button.contentPanel;

27 Feb 2012, 10:18 AM
Suppose you wanted to call this custom property "target". On each button you would specify the custom property by typing it into the quickset field like so:
target: 0

And then clicking add. This will add a custom property of 0 (although i would suggest using a string with an itemId for 'splashPanel', 'dataPanel', and 'reportPanel'. Makes for a little bit easier of a read.)

You can then add a Controller Action with a controlQuery of something like '#navBar button'. Where #navBar is the itemId you gave to the navigation bar.

Then just setActiveItem(button.target).

27 Feb 2012, 10:26 AM
Thanks for the suggestion. Would deriving from the standard button be a practical alternative? The idea is to add a property, say contentPanelPosition, that would hold the container's layout activeItem number. This property could be specified on construction or via a setter. This would be a good place to set the custom ui property as well.

Ext.define('MyApp.NavigationButton', {
extend: 'Ext.button.Button',
alias: 'widget.myapp.navigationbutton',
ui: 'navigation-button-ui',


If this sounds reasonable:
1. How can I add this new class to the Designer's toolbar?
2. What is Ext Js 4 best practice on file name and place in the folder hierarchy to place this file?
3. Will the designer be able to introspect the new class and render a property setters? I'm hoping this is the case given that the code above use the config object.

Thanks again.

27 Feb 2012, 10:33 AM
This is what I was looking for. Kicking myself for not just trying to add the property directly. Please ignore my subsequent reply - You posted while I was typing. Thanks!

27 Feb 2012, 11:04 AM
No worries, while you certainly could create a custom class I think it would be advisable just to keep it a standard button and add the custom configuration to the instance.