setting listeners for buttons in different class

[infernoz]

Hello,

I have a grid panel and a few buttons. What I want to happen is a particular action when the button is pressed related to the panels store.

I got this working just fine when I defined the buttons inside the panel itself:

  initComponent: function(submitButton) {
        currentView = this;
        
        orgStatisticsStore = Ext.data.StoreManager.lookup('OrgStatisticsStore');
        orgStatisticsProxy = orgStatisticsStore.getProxy();
......
......
items: [
                    { xtype: 'component', flex: 1 },
                    new DMT.view.OrgStatisticsSearchForm(),
                    
                    { xtype: 'button', text: 'Submit', width: 80,
                        initComponent: function() {
                            submitButton = this;
                        },
                        listeners: {
                            'click': function() {
                                orgStatisticsStore.on({
                                    scope: currentView,
                                    beforesync: currentView.disableButtons,
                                    write: currentView.submitFinished
                                });
                                orgStatisticsProxy.on({
                                    scope: currentView,
                                    exception: currentView.showSubmitError
                                });
                                
                                orgStatisticsStore.sync();
                        }}},
                    { xtype: 'button', text: 'Clear', width: 80, 
                        initComponent: function() {
                            clearButton = this;
                        },
                        listeners: {
                        'click': function() {
                            currentView.disableButtons();
                            orgStatisticsStore.removeAll(false);
                            currentView.enableButtons();
                        }
                    }}

 disableButtons: function(){
        submitButton.disable(true);
        clearButton.disable(true);
       },
       
       enableButtons: function(){
           submitButton.enable(true);
           clearButton.enable(true);
       },
       
       submitFinished: function() {
           var messageBox = Ext.Msg.show({
               title:'DMT Response from',
               msg: 'Changes have been successfully sent to',
               animateTarget: submitButton,
               icon: Ext.Msg.INFO,
               closable: false
           });

           setTimeout(function(){
               messageBox.close();
           }, 2700);

           currentView.enableButtons();
       },
       
       showSubmitError: function() {
           var errorMessageBox = Ext.Msg.show({
               title:'DMT Response from',
               msg: 'An error has occured while sending changes.',
               animateTarget: submitButton,
               icon: Ext.Msg.ERROR,
               closable: false
           });

           setTimeout(function(){
               errorMessageBox.close();
           }, 2700);
           
           currentView.enableButtons();
       },

However, I dont think it is good practice to define these buttons in the grid panel itself, but rather the panel housing the grid panel. I sooner or later want to add a form and additional items and don't want to add it to the grid panel itself.

When I try doing this, I can add the items just fine but am having a very difficult time registering the buttons click listener to do anything to the panels store..... here a combinations of a few ways I tried to get this working, where none of them work...how should this be set up?

//Panel housing grid panel and other components: doesnt work

        
               var submitButton = mainContentPanel.add(Ext.create('Ext.button.Button', {text: 'Submit', width: 80}));
                        currentComponentArray[0] = submitButton;
                        
                        var clearButton = new DMT.view.button.ClearButton()
                        mainContentPanel.add(clearButton);
                        currentComponentArray[1] = clearButton;
      
                        currentComponent = mainContentPanel.add(Ext.create('DMT.view.OrgStatisticsView', submitButton));
                        currentComponentArray[2] = currentComponent;
                        
                        mainContentPanel.setTitle('Organization Statistics Update');
                                        
                        var orgStatisticsStore = Ext.data.StoreManager.lookup('OrgStatisticsStore');
                        var orgStatisticsProxy = orgStatisticsStore.getProxy();
                        
                        Ext.apply(submitButton, {
                             listeners: {
                                     'click': function() {
                                         orgStatisticsStore.on({
                                             scope: currentComponent,
                                             beforesync: currentComponent.disableButtons,
                                             write: currentComponent.submitFinished
                                         });
                                         orgStatisticsProxy.on({
                                             scope: currentComponent,
                                             exception: currentComponent.showSubmitError
                                         });
                                         
                                         orgStatisticsStore.sync();
                             }}
                         });

//Pass button into panel for reference -- doesnt work tried with initiComponent too....

  constructor: function(submitButton)
    {    
        orgStatisticsStore = Ext.data.StoreManager.lookup('OrgStatisticsStore');
        orgStatisticsProxy = orgStatisticsStore.getProxy();
        orgStatsSubmitButton = submitButton;

 Ext.apply(orgStatsSubmitButton, {
            listeners: {
                    'click': function() {
                        orgStatisticsStore.on({
                            scope: currentView,
                            beforesync: currentView.disableButtons,
                            write: currentView.submitFinished
                        });
                        orgStatisticsProxy.on({
                            scope: currentView,
                            exception: currentView.showSubmitError
                        });
                        
                        orgStatisticsStore.sync();
            }}
        });
        
        this.callParent(arguments);
    },

[troseberry]

I see in the above code that you are using a namespace view. Is this application using the MVC style architecture? If so then why not just put the code for the button's click even in the controller that is attached and loads the view. Then you can have reference to all the view's items and stores and all the logic for the click event is in one place. Since you only gave us some brief snippets of code and not full class files then its hard to give you an example that fits your stuff. But if you follow the example's MVC App examples you can see what I'm talking about.

[infernoz]

Hmmm, I can see where you are going with the logic going in the controller, but I have one panel where I want to add/remove more than one set of buttons and grids on the fly depending on what the user wants to see. Does that mean I have to create a specific button associated with each grid and render them both/delete them both each time a user wants to see something different?

I was planning on creating the buttons the same time the grid gets rendered and associagting the buttons with the grid. If this can be done in the controlller (and thats the right thing to do), great. It just seems that it should be easier for objects to reference each other.

Is there a specific MVC App example with code that I can view that does this? I looked at a lot of the examples but cant see the code, just the end result. A link or a code snippet of this example would be helpful.

Cheers,

inernoz