1. #1
    Sencha User
    Join Date
    Nov 2011
    Location
    Rotterdam, Netherlands
    Posts
    6
    Vote Rating
    0
    Richardh Rotterdam is on a distinguished road

      0  

    Default Unanswered: MVC: Attach event in controller

    Unanswered: MVC: Attach event in controller


    Hi there,

    I just started to get into extjs and singed up for this forum so please go easy on me.
    I am trying to attach an event to a button using the Controller::control method.
    With the code I have so far I am trying to attach an event. Somehow I must be doing something wrong


    I have the following code in my app.js :
    Code:
    Ext.application({
        name: 'Accordion',
        // define the folder for the conrollers/models and views
        appFolder: 'app',
        // it's an array of controllers I wonder if I can add more
        controllers: [
            'Forms'
        ],
    
    
        launch: function() {
            Ext.create('Ext.container.Viewport', {
                layout: {
                    type: 'table',
                    columns : 1,
                    width: 900
    
    
                },
                
                items: [
                    {
                        xtype: 'panel',
                        //title: 'Trigger',
                        html : '<button id="slide_button">click me!</button>',
                        id: 'trigger'
             
                    }
                ]
            });
        }
    });
    And the following code in my app/controller/Forms.js:
    Code:
    Ext.define('Accordion.controller.Forms', {
        extend: 'Ext.app.Controller',
    
    
    
    
        init: function() {
    
    
           this.control({
                'viewport > panel': {
                    //render: this.onPanelRendered,
                    // css selector to attach event
                },
                'button' : {
                    click : this.toggleSlide
                }
            });
    
    
            
        },
        // I want to call this function on click of the button element
        toggleSlide : function() {
            console.log('you clicked the button!');
        }
    });
    The question is why is my toggleSlide function not called when I click the button?

    My guess is I the following code is wrong in my controller or I am using it the wrong way.
    Code:
                'button' : {                click : this.toggleSlide           }
    Thanks for reading,


    Richard

  2. #2
    Sencha User
    Join Date
    Nov 2011
    Location
    Rotterdam, Netherlands
    Posts
    6
    Vote Rating
    0
    Richardh Rotterdam is on a distinguished road

      0  

    Default Wrong way to add button

    Wrong way to add button


    Found the solution by trial and error.

    Instead of adding the button using an html string I added a button by passing it as object in my app.js

    Button as object passed as shown below:
    Code:
    Ext.application({
        name: 'Accordion',
        appFolder: 'app',
        controllers: [
            'Forms'
        ],
    
    
        launch: function() {
            Ext.create('Ext.container.Viewport', {
                layout: {
                    type: 'table',
                    columns : 1,
                    width: 900
    
    
                },
                
                items: [
                    {
                        xtype: 'panel',
                        title: 'Icons',
                        html : 'folder icons here',
                        width: 1024,
                        height: 350,
                        id: 'folders'
          
                    },
                    {
                        xtype: 'panel',
                        // I added this thingy here now it workz
                        buttons: [
                            { text: 'Slide' }
                        ],
                        id: 'trigger'
             
                    },
    
    
                    {
                        xtype: 'panel',
                        title: 'Preview',
                        html : 'preview',
                        height: 350,
                        id: 'preview'
                    }
                ]
            });
        }
    });