hi,

i'm new with extjs, but i'm try to learn how to using extjs. i've question about howto fire an event from the grid to the panel and set center to the map ? below my code, and i'm stuck can't solve this problem

3 panel : client panel (grid), detail panel (tpl), tabpanel(my_map - google map)
i've succeed when a row selected, detail panel will display info about the row from grid, but i don't know how to set center to the map at tabpanel. and i don't know how to map display location from database...

sorry for my bad english

Code:
/*!
 * Ext JS Library 3.3.0
 * Copyright(c) 2006-2010 Ext JS, Inc.
 * licensing@extjs.com
 * http://www.extjs.com/license
 */


//
// This is the main layout definition.
//
Ext.onReady(function(){
    
    Ext.QuickTips.init();
    
    var map = {
        xtype: 'tabpanel',
        plain: true,  //remove the header border
        activeTab: 0,
            defaults: {
                xtype: 'gmappanel',
                zoomLevel: 6,
                gmapType: 'map',
                mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
                mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl']
            },
            items: [{
                title: 'Map Locator',
                id: 'my_map',
                setCenter: {
                    lat: -4.039618,
                    lng: 110.786133 
                },
                
                // i don't know how to get location from database :(
                markers: [
                {
                lat: [{dataIndex: 'lat'}],
                lng: [{dataIndex: 'long'}],
                marker: [{title: {dataIndex: 'client'}}]
                }
            ],
            
      buttons: [{
        text: 'Hide Markers',
        handler: function(){
          Ext.getCmp('my_map').hideMarkers();
        }
      },{
        text: 'Show Markers',
        handler: function(){
          Ext.getCmp('my_map').showMarkers();
        }
      }]
        },{
            title: 'Help',
            html  :'Just Help Page...'


        }]
};    


    var contentPanel = {
        id: 'content-panel',
        region: 'center', // this is what makes this panel into a region within the containing layout
        layout: 'card',
        margins: '2 5 5 0',
        activeItem: 0,
        border: false,
        items: map, 
        
    };
    
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());


    var url = {
        //local:  'grid-filter.json',  // static data file
        local: 'php/filter.php'
    };


    var local = true;


    store = new Ext.data.JsonStore({
        // store configs
        autoDestroy: true,
        url: (local ? url.local : url.remote),
        remoteSort: false,
        sortInfo: {
            field: 'client',
            direction: 'ASC'
        },
        storeId: 'myStore',
        
        // reader configs
        idProperty: 'id',
        root: 'results',
        totalProperty: 'total',
        fields: [{
            name: 'id'
        }, {
            name: 'client'
        }, {
            name: 'lat',
        },{
            name: 'long',
        },{
            name: 'alamat',
        },{
            name: 'kab_kota',
        },{
            name: 'provinsi',
        },{
            name: 'pic',
        },{
            name: 'status',
        },{
            name: 'serial_number',
        }]
    });




    // create the Grid
    var clientPanel = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {
                id       :'company',
                header   : 'Client', 
                width    : 160, 
                sortable : true, 
                dataIndex: 'client'
            },
            {
                header   : 'Status', 
                width    : 75, 
                sortable : true, 
                dataIndex: 'status'
            }
        ],
        bbar: new Ext.PagingToolbar
        ({
            pageSize: 20,
            store: store,
            displayInfo: true,
            items:[ {
                xtype: 'button',
                pressed: false,
                enableToggle:false,
                text: 'Search',
                //cls: 'x-btn-text-icon details',
                toggleHandler: function(btn, pressed){
                    var view = grid.getView();
                    view.showPreview = pressed;
                    view.refresh();
                }
            }]
        }),
        stripeRows: true,
        autoExpandColumn: 'company',
        height: 350,
        width: 600,
        title: 'Client Lists',
        loadMask: true,
        region:'north',
        split: true,
        minSize: 150,
        // config options for stateful behavior
        stateful: true,
        stateId: 'grid'
    });
    store.load({params:{start:0, limit:20}});
    
    var bookTplMarkup = [
        '<p class="details-info">',
        'Clients : {client}<br/>',
        'Lat / Long : {lat} / {long}<br/>',
        'Alamat : {alamat}<br/>',
        'Kab / Kota : {kab_kota}<br/>',
        'Provinsi : {provinsi}<br/>',
        'PIC : {pic}<br/>',
        'Serial Modem : {serial_number}<br/>',
        '</p>'
    ];
    var bookTpl = new Ext.Template(bookTplMarkup);


    var detailsPanel = {
        id: 'details-panel',
        title: 'Information',
        region: 'center',
        bodyStyle: 'padding-bottom:15px;background:#fff;',
        autoScroll: true,
        html: '<p class="details-info">When you select a layout from the grid, additional details will display here.</p>'
    }
    
    // i don't know the code on.rowselect bind to detailspanel & set center to map :(
    
    clientPanel.getSelectionModel().on('rowselect', function(SelectionModel, rowIndex, r) {
        var detailPanel = Ext.getCmp('details-panel');
        bookTpl.overwrite(detailPanel.body, r.data);
    });
    
    new Ext.Viewport({
        layout: 'border',
        title: 'Ext Layout Browser',
        items: [{
            xtype: 'box',
            region: 'north',
            applyTo: 'header',
            height: 30
        },{
            layout: 'border',
            id: 'layout-browser',
            region:'west',
            border: false,
            split:true,
            margins: '2 0 5 5',
            width: 400,
            minSize: 100,
            maxSize: 500,
            items: [clientPanel, detailsPanel]
        },
            contentPanel
        ],
        renderTo: Ext.getBody()
    });
});