1. #1
    Sencha User
    Join Date
    Jan 2012
    Location
    Bethany CT, USA
    Posts
    7
    Vote Rating
    0
    nealbrandi is on a distinguished road

      0  

    Default How To Edit Button Init Method

    How To Edit Button Init Method


    Hi,
    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.

    Thanks

  2. #2
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,181
    Vote Rating
    77
    ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough

      0  

    Default


    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:

    Code:
    this.control(
    	"#button1": {
    		click : this.button1Click
    	},
    	"#button2": {
    		click : this.button2Click
    	},
    	"#button3"": {
    		click : this.button3Click
    	}
    ),
    ...
    
    button1Click: function(button) {
    	this.buttonClick(button);
    },
    
    button2Click: function(button) {
    	this.buttonClick(button);
    },
    
    button3Click: function(button) {
    	this.buttonClick(button);
    }
    ...
    
    buttonClick: function(button) {
    	var contentPanel = button.contentPanel;
    	...
    }
    UI: Sencha Architect 3.x / ExtJS 4 MVC
    Server side: EJB 3.1 / CDI / JPA 2 / JAX-RS / JasperReports
    Application Server: Glassfish 3.1.x
    Databases: Oracle 10g & 11g / DB2 9 & 10 / Firebird 2.5

    If you like my answer please vote!

  3. #3
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    8,883
    Vote Rating
    102
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    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).
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  4. #4
    Sencha User
    Join Date
    Jan 2012
    Location
    Bethany CT, USA
    Posts
    7
    Vote Rating
    0
    nealbrandi is on a distinguished road

      0  

    Thumbs up


    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.

    Code:
    Ext.define('MyApp.NavigationButton', {
        extend: 'Ext.button.Button',
        alias: 'widget.myapp.navigationbutton',
        config:{
            ui: 'navigation-button-ui',
            contentPanelPosition:
    },
    
    constructor:function(cfg){
        this.callParent(arguments);
        this.initConfig(cfg);
    }
    };
    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.

  5. #5
    Sencha User
    Join Date
    Jan 2012
    Location
    Bethany CT, USA
    Posts
    7
    Vote Rating
    0
    nealbrandi is on a distinguished road

      0  

    Default


    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!

  6. #6
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    8,883
    Vote Rating
    102
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    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.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

Thread Participants: 2

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar