Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Adding a Listener to a Fieldset for field changes

  1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    3
    Vote Rating
    -1
      0  

    Default 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,390
    Answers
    716
    Vote Rating
    498
      -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
      -1  

    Default

    Great, thank you. This works!

  5. #4
    Sencha User
    Join Date
    Jan 1970
    Posts
    67
    Vote Rating
    0
      0  

    Default 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,390
    Answers
    716
    Vote Rating
    498
      -1  

    Default

    Not working in Sencha 2.3.1
    Do you mean Touch 2.3.1?

    This forum is for ExtJS4.x

  7. #6
    Sencha User
    Join Date
    Jan 1970
    Posts
    67
    Vote Rating
    0
      0  

    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,390
    Answers
    716
    Vote Rating
    498
      -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
    Sencha User
    Join Date
    Jan 1970
    Posts
    67
    Vote Rating
    0
      0  

    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,390
    Answers
    716
    Vote Rating
    498
      -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
    Sencha User
    Join Date
    Jan 1970
    Posts
    67
    Vote Rating
    0
      0  

    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).

Page 1 of 2 12 LastLast

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •