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

      -1  

    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
    8,637
    Answers
    613
    Vote Rating
    400
    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
    -2
    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
    8,637
    Answers
    613
    Vote Rating
    400
    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
    8,637
    Answers
    613
    Vote Rating
    400
    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
    8,637
    Answers
    613
    Vote Rating
    400
    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).

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar