1. #1
    Ext User
    Join Date
    Aug 2007
    Posts
    6
    Vote Rating
    0
    israelws is on a distinguished road

      0  

    Arrow [2.0b1] FormPanle fireEvent method wont buble up in drived object

    [2.0b1] FormPanle fireEvent method wont buble up in drived object


    Hi,
    1. ver Ext 2.0 Beta 1.
    2.Widjet: FormPanel object.
    3. Description:
    I need to capture an event (a button click) in an instanse of the drived object container.
    The problem is that the event is not being fiered/captured in the container.

    The event I'm trying to use is:
    Code:
        function getSearch(){
              var args='args';
              this.fireEvent('searchClicked',args); 
        };
    It is fired from a function that is assgined to a button handler:
    Code:
             buttons:[{
                text:SEARCH_FORM_BOTTON_TEXT,
                handler:getSearch
            }]
    The container object listen to the event using the following code:
    Code:
    var simpleSearchFoodForm=new FoodSimpleSearchForm();  
       ...
       ...
       simpleSearchFoodForm.on({
               'searchClicked':function(args){
                alert('event captured');      
            },
            scope:this
        });
    This is the code for the driven object:

    Code:
    FoodSimpleSearchForm=function(){
        FoodSimpleSearchForm.superclass.constructor.call(this, {
            labelWidth: 75, // label settings here cascade unless overridden
            frame:true,
            bodyStyle:'padding:5px 5px 0',
            defaultType:'textfield',
            labelAlign:'top',
            header:false,
            headerAsText:false,
            autoScroll:false,
            items: [{
                    fieldLabel: SEARCH_FORM_CRITERIA_LABEL,
                    name: 'Criteria',
                    allowBlank:false,
                    width:277             
                },{ xtype:'fieldset',
                    title: 'Search Type',
                    autoHeight:true,
                    items:[{
                        layout:'column',
                        items:[
                        new Ext.form.Radio({
                        boxLabel: SEARCH_FORM_RADIO_ID_LABEL,
                        name: 'searchType',
                        checked:true                    
                    }),
                    new Ext.form.Radio({
                        boxLabel: SEARCH_FORM_RADIO_NAME_LABEL,
                        name: 'searchType'                    
                    })]}]             
            }],
            buttons:[{
                text:SEARCH_FORM_BOTTON_TEXT,
                handler:getSearch
            }]    });//end constractor
        
        this.getItemValue=function(fieldName){
            return this.getForm().findField(fieldName).getValue();
        };
        
       function getSearch(){
              var args='args';
              this.fireEvent('searchClicked',args); 
        };       
        
     }   
    
    
    Ext.extend(FoodSimpleSearchForm, Ext.form.FormPanel, {
        
    });

    thanks.

  2. #2
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,413
    Vote Rating
    129
    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 aconran is a splendid one to behold

      0  

    Default


    israelws -

    I have refactored your code slightly by adding your additional methods in the extend statement. In addition I have used the method addEvents which comes from Ext.util.Observable directly after you call your superclass. Event names are always all lowercase in Ext. Try this out and let us know your results.

    Code:
    FoodSimpleSearchForm = function(){
        FoodSimpleSearchForm.superclass.constructor.call(this, {
            labelWidth: 75, // label settings here cascade unless overridden
            frame:true,
            bodyStyle:'padding:5px 5px 0',
            defaultType:'textfield',
            labelAlign:'top',
            header:false,
            headerAsText:false,
            autoScroll:false,
            items: [{
                    fieldLabel: SEARCH_FORM_CRITERIA_LABEL,
                    name: 'Criteria',
                    allowBlank:false,
                    width:277             
                },{ xtype:'fieldset',
                    title: 'Search Type',
                    autoHeight:true,
                    items:[{
                        layout:'column',
                        items:[
                        new Ext.form.Radio({
                        boxLabel: SEARCH_FORM_RADIO_ID_LABEL,
                        name: 'searchType',
                        checked:true                    
                    }),
                    new Ext.form.Radio({
                        boxLabel: SEARCH_FORM_RADIO_NAME_LABEL,
                        name: 'searchType'                    
                    })]}]             
            }],
            buttons:[{
                text:SEARCH_FORM_BOTTON_TEXT,
                handler: this.getSearch,
                scope: this
            }]    
    	});//end constractor   
    	this.addEvents({'searchclicked': true});
    };
    Ext.extend(FoodSimpleSearchForm, Ext.form.FormPanel, {
        getSearch: function() {
              var args='args';
              this.fireEvent('searchclicked',args);     	
        },
        getItemValue: function(fieldName){
            return this.getForm().findField(fieldName).getValue();
        }
    });

  3. #3
    Ext User
    Join Date
    Aug 2007
    Posts
    6
    Vote Rating
    0
    israelws is on a distinguished road

      0  

    Smile


    Thanks aconran, it worked.

Thread Participants: 1