Sencha Touch 2: How to automatically pre-populate form values in Tab Panel Component

As requested by one of my reader, today we are going to see how to automatically pre-populate form element values from one Tab to another Tab in Tab Panel component. If you are still not sure, please refer to the below Tab Panel snapshot images.

Tab1 :

Tab2 :

Explanation:

In above Tab Panel Component, we are having two Tabs. Each Tab will have Form Panel component with a text field. By entering the value in text field on Tab1 and by clicking Tab2, the entered values in Tab1 will be automatically pre-populated on text field in Tab2 and vice versa.

Also, by modifying text field value in Tab2 and by clicking Tab1, the modified values in Tab2 will be automatically pre-populated on text field in Tab1.

Source Code:

Ext.define('MyApp.view.MyTabPanel', {
    extend: 'Ext.tab.Panel',
    alias: 'widget.mytabpanel',

    config: {
        items: [{
            xtype: 'formpanel',
            title: 'Tab 1',
            itemId: 'formpanel1',
            items: [{
                xtype: 'textfield',
                itemId: 'text1',
                label: 'Name1'
            }]
        }, {
            xtype: 'formpanel',
            title: 'Tab 2',
            itemId: 'formpanel2',
            items: [{
                xtype: 'textfield',
                itemId: 'text2',
                label: 'Name2'
            }]
        }],

        listeners: [{
            fn: 'onTabpanelActiveItemChange',
            event: 'activeitemchange'
        }]
    },

    onTabpanelActiveItemChange: function (container, value, oldValue, eOpts) {

        var me = this;
        var activeItem = me.getActiveItem();
        var text2 = me.down('#formpanel2').down('#text2');
        var text1 = me.down('#formpanel1').down('#text1');

        if (activeItem.getItemId() == 'formpanel1') {
            text1.setValue(text2.getValue());

        } else if (activeItem.getItemId() == 'formpanel2') {
            text2.setValue(text1.getValue());

        }
    }
});

Hope, you enjoyed this Post.