1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    3
    Vote Rating
    -1
    mjew has a little shameless behaviour in the past

      0  

    Default Answered: Adding a Listener to a Fieldset for field changes

    Answered: Adding a Listener to a Fieldset for field changes


    I have a fieldset in a form panel with several fields of different types and I want to fire a function when any field is changed. The change listener event is fine for an individual field, but rather that having to put a listener on every single field, is there a listener I can put on the fieldset or the form that fires when any field changes? I tried the updatedata event for the form but that is't doing it.

  2. You can use the following:

    Code:
    Ext.create('Ext.form.Panel', {
        title: 'Simple Form',
        bodyPadding: 5,
        width: 350,
    
        layout: 'anchor',
        defaults: {
            anchor: '100%'
        },
    
        // The fields
        defaultType: 'textfield',
        items: [{
            fieldLabel: 'First Name',
            name: 'first',
            allowBlank: false
        },{
            fieldLabel: 'Last Name',
            name: 'last',
            allowBlank: false
        }],
        
        defaults: {
            listeners: {
                change: function(field, newVal, oldVal) {
                    console.log('change');
                }
            },
        },
        
        renderTo: Ext.getBody()
    });​
    Scott

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,078
    Answers
    674
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      -1  

    Default


    You can use the following:

    Code:
    Ext.create('Ext.form.Panel', {
        title: 'Simple Form',
        bodyPadding: 5,
        width: 350,
    
        layout: 'anchor',
        defaults: {
            anchor: '100%'
        },
    
        // The fields
        defaultType: 'textfield',
        items: [{
            fieldLabel: 'First Name',
            name: 'first',
            allowBlank: false
        },{
            fieldLabel: 'Last Name',
            name: 'last',
            allowBlank: false
        }],
        
        defaults: {
            listeners: {
                change: function(field, newVal, oldVal) {
                    console.log('change');
                }
            },
        },
        
        renderTo: Ext.getBody()
    });​
    Scott

  4. #3
    Sencha User
    Join Date
    Aug 2012
    Posts
    3
    Vote Rating
    -1
    mjew has a little shameless behaviour in the past

      -1  

    Default


    Great, thank you. This works!

  5. #4
    marco.marsala
    Guest

    Default Not working

    Not working


    Not working in Sencha 2.3.1

  6. #5
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,078
    Answers
    674
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      -1  

    Default


    Not working in Sencha 2.3.1
    Do you mean Touch 2.3.1?

    This forum is for ExtJS4.x

  7. #6
    marco.marsala
    Guest

    Default


    Ops, sorry. Do you know how to achieve the same thing in Touch 2.3.1?

  8. #7
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,078
    Answers
    674
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      -1  

    Default


    In touch, change fires on blur, so you could do something like this

    Code:
    Ext.application({
        name: 'Fiddle',
    
        launch: function() {
    
            Ext.create('Ext.form.Panel', {
                fullscreen: true,
                items: [{
                    xtype: 'fieldset',
                    title: 'About you',
                    items: [{
                        xtype: 'textfield',
                        label: 'First',
                        name: 'first',
                        clearIcon: true
                    }, {
                        xtype: 'textfield',
                        label: 'Last',
                        name: 'last',
                        clearIcon: true
                    }],
                    // on fieldset, or place on form if not present
                    defaults: {
                        listeners: {
                            keyup: function() {
                                console.log('change');
                            }
                        }
                    }
                }]
    
            });
        }
    });

  9. #8
    marco.marsala
    Guest

    Default


    Already tried, won't print anything to the console.
    I'm exploring many codes found on the web. Basically I want to bubble the change event on every form field to the form itself

  10. #9
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,078
    Answers
    674
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      -1  

    Default


    Paste the above code in our fiddle and check the console:
    https://fiddle.sencha.com/#home

    Did you verify that you have the listener on the correct container?

  11. #10
    marco.marsala
    Guest

    Default


    I tried many places. This is my code for the form using MVC pattern:

    View:
    Code:
    Ext.define('LaBucaDiSanMatteo.view.Prenota', {
    	extend: 'Ext.form.Panel',
    	xtype: 'prenota',
    	requires: [
            'Ext.form.FieldSet',
    		'Ext.form.DatePicker',
    		'Ext.form.Spinner'
        ],
    	config: {
            items: [
                {
                    xtype: 'fieldset',
                    title: 'Dati della prenotazione',
                    instructions: 'Per favore inserire i dati richiesti.',
                    items: [
                        {
                            xtype: 'textfield',
                            name: 'nome'
                            label: 'Il tuo nome',
    						placeHolder: 'Mario Rossi',
                            autoCapitalize: true,
                        },
                        {
                            xtype: 'selectfield',
                            name: 'data',
                            label: 'Quando?',
                            valueField: 'data',
                            displayField: 'title',
                            store: {
                                data: [
                                    { data: Ext.Date.format(new Date(), 'd/m/Y'), title: 'oggi' },
                                    { data: Ext.Date.format(Ext.Date.add(new Date(), Ext.Date.DAY, 1), 'd/m/Y'), title: 'domani'},
    								{ data: Ext.Date.format(Ext.Date.add(new Date(), Ext.Date.DAY, 2), 'd/m/Y'), title: 'dopodomani' },
    								{ data: Ext.Date.format(Ext.Date.add(new Date(), Ext.Date.DAY, 3), 'd/m/Y'), title: Ext.Date.format(Ext.Date.add(new Date(), Ext.Date.DAY, 3), 'l j') },
    								{ data: Ext.Date.format(Ext.Date.add(new Date(), Ext.Date.DAY, 4), 'd/m/Y'), title: Ext.Date.format(Ext.Date.add(new Date(), Ext.Date.DAY, 4), 'l j') },
    								{ data: Ext.Date.format(Ext.Date.add(new Date(), Ext.Date.DAY, 5), 'd/m/Y'), title: Ext.Date.format(Ext.Date.add(new Date(), Ext.Date.DAY, 5), 'l j') }
                                ]
                            }
                        },
    					{
                            xtype: 'selectfield',
                            name: 'ora',
                            label: 'A che ora?',
                            valueField: 'ora',
                            displayField: 'title',
                            store: {
                                data: [
                                    { ora: '19:30', title: '19:30'},
                                    { ora: '20:00', title: '20:00'},
    								{ ora: '20:30', title: '20:30'},
    								{ ora: '21:00', title: '21:00'},
    								{ ora: '21:30', title: '21:30'},
    								{ ora: '22:00', title: '22:00'}
                                ]
                            }
                        },
    					{
                            xtype: 'spinnerfield',
                            name: 'persone',
                            label: 'Quanti siete?',
    						minValue: 1,
    						maxValue: 10,
    						value: 2,
    						stepValue: 1
                        },
    					{
                            xtype: 'numberfield',
                            name: 'telefono',
                            label: 'Telefono',
    						placeHolder: 'Richiesto'
                        },
                        {
                            xtype: 'checkboxfield',
                            name: 'prive',
                            label: 'Privé?',
                            value: 'SI'
                        },
                        {
                            xtype: 'textareafield',
                            name: 'note',
    						placeHolder: 'Richieste specifiche, speciali esigenze alimentari, etc...',
                            label: 'Note',
                            maxRows: 10
                        }
                    ]
                }
    		]
    	}
    });
    Controller:
    Code:
    Ext.define('LaBucaDiSanMatteo.controller.Prenota', {
    	extend: 'Ext.app.Controller'
    });
    Model:
    Code:
    Ext.define('LaBucaDiSanMatteo.model.Prenotazione', {
        extend: 'Ext.data.Model',
    
        config: {
            fields: [
                { name: 'nome',     type: 'string' },
                { name: 'data', 	type: 'date' },
    			{ name: 'ora', 		type: 'string' },
                { name: 'persone', 	type: 'integer' },
                { name: 'telefono', type: 'string' },
                { name: 'note',     type: 'string' },
                { name: 'prive',    type: 'boolean' },
            ],
    		
    		validations: [
                {
                    type: 'presence',
                    field: 'nome'
                },
    			{
                    type: 'presence',
                    field: 'data'
                },
    			{
                    type: 'presence',
                    field: 'ora'
                },
    			{
                    type: 'presence',
                    field: 'persone'
                },
    			{
                    type: 'presence',
                    field: 'telefono'
                }
    		],
    		
    		proxy: {
                type: 'localstorage'
            }
        }
    });

    Main view (instantiating the form):
    Code:
    Ext.Date.dayNames = [
        'sunday',
        'lunedì',
        'martedì',
        'mercoledì',
        'giovedì',
        'venerdì',
        'sabato'
    ];
    
    Ext.define('LaBucaDiSanMatteo.view.Main', {
        extend: 'Ext.tab.Panel',
        xtype: 'tabpanel',
        requires: [
            'Ext.TitleBar'
        ],
        config: {
            tabBarPosition: 'bottom',
            items: [
                {
                    title: 'Prenota',
                    iconCls: 'team',
    				layout: 'fit',
    				items: [
    					{
    						docked: 'top',
    						xtype: 'titlebar',
    						title: 'Prenota un tavolo',
    						items: [
    							{
    								xtype: 'button',
    								align: 'right',
    								ui: 'forward',
    								text: 'Avanti',
    								handler: function() {
    									var form = Ext.getCmp('prenota');
    									var ed = Ext.create('LaBucaDiSanMatteo.model.Prenotazione', form.getValues());
    									ed.save();
    									
    									/*form.submit({
    										url: 'https://www.genovaperte.it/apps/LaBucaDiSanMatteo.php',
    										waitMsg: 'Attendere...',
    										success: function(form, result) {
    											//
    										},
    										failure: function(form, result){
    											Ext.Msg.alert('Si è verificato un errore', 'Il sistema è temporaneamente in manutenzione. Non è stato possibile inviare la prenotazione al ristorante. Si prega di contattare direttamente il locale allo 010 236 23 89. Ci scusiamo per il disagio.');
    										}
    									});*/
    								}
    							}
    						]
    					},
    					{
    						xtype: 'prenota',
    						id: 'prenota'
    					}
    				]
                },
    			{
                    title: 'Promozioni',
                    iconCls: 'bank',
                   	html: 'bb'
                },
    			{
                    title: 'Commenti',
                    iconCls: 'chat2',
    				html: 'aa'
                },
    			{
                    title: 'Contatti',
                    iconCls: 'info',
    				html: 'aa'
                }
            ]
        }
    });

    I want to bubble events from form fields to the form, so I can check in one single place if all mandatory fields are valid and thus enable the "Next" button in the titlebar (I enable them only when the form is filled).