Testing Window
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * 
[email protected]
 * http://www.extjs.com/license
 */
Ext.onReady(function(){
    Ext.override( Ext.data.Store, {
        findExact: function( fld, val ) {
            var hit = null;
            this.each( function(rec) { if( 
rec.get(fld) == val ) { hit = rec; return false; }; } );
            return hit;
        }
    });
    var listAdded = 0;
    var addListBtn = {
        text: 'Add',
        handler: function() {
            Ext.getCmp('tab_list').add(getList());
            Ext.getCmp('tab_list').doLayout();  
        }
    }
    var testData = new Ext.data.SimpleStore({
    fields: ['no', 'name', 'address','phone','businessPhone'],
    data: [['68', 'Target','123 Valley Road','(345) 908-9087','(345) 908-9087'], 
           ['69', 'Walmart','456 Main Road','(345) 908-9999','(345) 908-9990']]
    }); 
    var getList = function() {
        listAdded++;
        var items = new Ext.form.FieldSet(
        {
        id:listAdded,
        title: listAdded,
        collapsible: true,
        layout: 'form',
        autoHeight: true,
        defaults: {width: 300},
        defaultType: 'textfield',
        bodyStyle: 'padding:5px',
        labelWidth: 225,                
        items: [
            {
                xtype: 'combo',
                fieldLabel: 'Customer No',
                name: 'changescustomerNo',
                hiddenName: 'changescustomerNo',                        
                store: new Ext.data.SimpleStore({
                    fields: ['id','value'],
                    data: [['68','Test1'],['69','Test2']]
                }),
                displayField: 'value',
                valueField: 'id',
                selectOnFocus: true,
                mode: 'local',
                editable: false,
                triggerAction: 'all',
                value: ' ',
                listeners:{select:{ fn:function(combo, value) {
                    var m = testData.findExact( 'no', this.value );
                    if(m) {
                        //alert(this.id);
                        Ext.getCmp('currentName').setValue(m.get('name'));
                        Ext.getCmp('currentAddress').setValue(m.get('address'));
                        Ext.getCmp('currentTelephoneNumber').setValue(m.get('phone'));
                        Ext.getCmp('currentBusTelephoneNumber').setValue(m.get('businessPhone'));
                    }
                   }//function
                  }//select
                }//listeners                        
            },{
                id: 'currentName',
                fieldLabel: 'Current Name',
                name: 'currentName',
                value: ''
            },{
                id: 'currentAddress',
                width: 298,
                xtype: 'textarea',
                fieldLabel: 'Current Address',
                name: 'currentAddress',
                value: ''
            },{
                id:'currentTelephoneNumber',
                fieldLabel: 'Current Telephone Number',
                name: 'currentTelephoneNumber',
                value: ''
            },{
                id: 'currentBusTelephoneNumber',
                fieldLabel: 'Current Business Telephone Number',
                name: 'currentBusTelephoneNumber',
                value: ''
            }
            ]
        }
        );      
        return items;
    }
    var pnlMain = new Ext.Panel({
        id: 'theForm',
        title: 'Sample List',
        bodyStyle:'padding:5px',
        autoWidth: true,
        frame: true,
        items: [{
            xtype: 'tabpanel',
            id: 'tabpanel',
            activeTab: 0,
            height: 540,
            width: '100%',
            resizeTabs: true,           
            tabWidth: 125,
            minTabWidth: 125,
            layoutOnTabChange: true,
            deferredRender: false, // Create all form elements on load
            defaults: {
                bodyStyle: 'padding:10px', 
                autoScroll: true, 
                layout: 'form',
                defaultType: 'textfield',
                labelWidth: 160
            },
            items:[{
                id: 'tab_list',
                title: 'List',
                items: getList(),
                buttons: [
                    addListBtn
                ]
            }]
        }]
    });
    pnlMain.render('main');
});