Hello
I have two different files one which has the grid(candidates.js) and the other with form(emailform.js).

1) So,when I click on the "Send Email" button in the candidate.js ,can I pass the values in the array to the form which is in a different file??(I am not sure if this is possible)
2) If I keep the form in the same file will "win.show" display it as a pop-up??
3) Do I need to add the form to the same js file??

I have already posted both the files in previous posts.Will just add them again.

this the candidate.js file

Code:
Ext.Loader.setConfig({enabled: true});

Ext.Loader.setPath('Ext.ux', 'js/ux/');

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.tip.QuickTipManager',
    'Ext.ux.LiveSearchGridPanel'
]);

 Ext.onReady(function() {
    
    var itemsPerPage = 50;
    
                /***********************Tree panel***************************/
    var storetree = Ext.create('Ext.data.TreeStore', {
        root: {
            expanded: true
        },
        proxy: {
            type: 'ajax',
            url: 'RequirementsTree',
            actionMethods: {create: "POST", read: "POST", update: "POST", destroy: "POST"},
                 
            reader: {
                  type: 'json',
                  root: 'children'
            
              }
        }
    });    
                
     
    var treePan=Ext.create('Ext.tree.Panel', {
       id:'candTree',
       renderTo: 'tree',
       title: 'Navigation Menu',
       width: 300,
       height: 420,
       useArrows:true,
       frame: true,
       store:storetree,
         
   });

                    /***********************Handling tree Events************************************/

           Ext.define('Company', {
           extend: 'Ext.data.Model',
           fields: [
                    {name:'uname',type: 'string'},
                    {name:'fname',type: 'string'},
                    {name:'lname',type: 'string'},
                    {name:'emailid',type: 'string'},
                    {name:'statename',type: 'string'},
                    {name:'cityname',type: 'string'},
                    {name:'countryname',type: 'string'}]
       });
 
       var store_company = Ext.create('Ext.data.Store',{
          model: 'Company',
          remoteSort: true,
          pageSize:itemsPerPage,
          groupField: 'uname',
         
          proxy: {
              type: 'ajax',
              url: 'GridServlet',
              actionMethods: {create: "POST", read: "POST", update: "POST", destroy: "POST"},
                 
              reader: {
                     type: 'json',
                     root: 'device',
                     totalProperty: 'totalCount'    
                  }
             }
              
                             
       });                             
        
        //Group the candidates according to the clients

        var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{
        
                groupHeaderTpl: 'Client Name:{name}({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})'
        
        });

                          
        var grid_company = Ext.create('Ext.ux.LiveSearchGridPanel', {            
            
                store: store_company,
                features: [groupingFeature],
                id:'x-grid3-row-alt',
                
                remoteSort:false,
                columns:[                     
                {
                    text     : 'Client Name',
                    width    : 110,
                    sortable : true,
                    
                    dataIndex: 'uname'
                },
                {
                    text     : 'Requirement',
                    width    : 145,
                    sortable : true,
                    dataIndex: 'fname'
                },
                {
                    text     : 'Name',
                    width    : 110, 
                    sortable : true,
                    dataIndex: 'lname'
                },
                {
                    text     : 'Email',
                    width    : 160, 
                    sortable : true,
                    dataIndex: 'emailid'
                },
                {
                    text     : 'Phone',
                    width    : 100, 
                    sortable : true,
                    dataIndex: 'statename'
                },
                {
                    text     : 'Skills',
                    width    : 180, 
                    sortable : true,
                    dataIndex: 'cityname'
                },
                {
                    text     : 'Status',
                    width    : 90, 
                    sortable : true,
                    dataIndex: 'countryname'
                }
            ],
        
        bbar: Ext.create('Ext.PagingToolbar', {
        store: store_company,
        pageSize:50,
        displayInfo: true,
        displayMsg: 'Displaying topics {0} - {1} of {2}',
        emptyMsg: "No topics to display"
    }),    
            id:'candGrid', 
            height: 450,
            width: 900,
            title: 'Candidate List',
           
            region:'center',
            renderTo: 'grid-company',
            viewConfig: {
                            stripeRows: true
                     }        

        
        });

treePan.getSelectionModel().on('select', function(selectionModel, record, index,options) {
        
    var getid = record.getId('id');

         store_company.load({
                   params: {
                         start:0,
                         getid:getid,    
                         limit:itemsPerPage
                        }        
                 });
            
             });


                /****************************Search box for tree panel******************************/
        
    var searchfield = new Ext.form.TextField({
       id:'multisite-search-field',
       allowBlank: true,
     //  fieldLabel: 'Search',
       emptyText: 'Filter Requirements...',    
       width: 280,
       renderTo: 'search',
       listeners: {
                    
                    change: {
        
                    fn: function(p1,p2){
                           treefilter.searchTree(treePan,searchfield);  
                        }
                        
                    }
             }//listener closed 
   });
    
    
    treefilter= {
           searchTree: function (treePan, searchfield, property) {        // search if a tree component and searchfield (textfield, combo, trigger, etc) are passed as params
           if (treePan && searchfield) {
                                                                       // property is optional - will be set to the 'text' propert of the treeStore record by default
            property = property || 'text'

            var matches = []                                            // array of nodes matching the search criteria
            var rn = treePan.getRootNode()                                 // root node of the tree

            if (searchfield.getRawValue().length == 0) {                // if the search field is empty
                treePan.collapseAll();                                     // collapse the tree nodes
                return;
            }

            treePan.expandAll();                                           // expand all nodes for the the following iterative routines

            // iterate over all nodes in the tree in order to evalute them against the search criteria
            rn.cascadeBy(function (node) {
                var re = new RegExp(searchfield.getRawValue(), "ig");   // the regExp could be modified to allow for case-sensitive, starts with, etc.


                if (re.test(node.get(property)) == true && node.isLeaf()) {     // if the node matches the search criteria and is a leaf (could be modified to searh non-leaf nodes)
                    matches.push(node)                                             // add the node to the matches array
                }
            })


            var visibleNodes = []                                       // array of nodes matching the search criteria + each parent non-leaf node up to root
            Ext.each(matches, function (item, i, arr) {                 // loop through all matching leaf nodes
                rn.cascadeBy(function (node) {                          // find each parent node containing the node from the matches array
                    if (node.contains(item) == true) {                  
                        visibleNodes.push(node)                         // if it's an ancestor of the evaluated node add it to the visibleNodes array
                    }
                })
                visibleNodes.push(item)                                 // also add the evaluated node itself to the visibleNodes array
            })


            rn.cascadeBy(function (node) {                              // final loop to hide/show each node
                var viewNode = Ext.fly(treePan.getView().getNode(node));   // get the dom element assocaited with each node


                if (viewNode) {                                         // the first one is undefined ? escape it with a conditional
                    viewNode.setVisibilityMode(Ext.Element.DISPLAY);    // set the visibility mode of the dom node to display (vs offsets)
                    if (Ext.Array.contains(visibleNodes, node)) {       // if the the dom node evaluated is contained in the visibleNodes array
                        viewNode.show()                                 // then hide show it
                    } 
                    else {
                            viewNode.hide()                                 // else, hide it
                    }
                }
            })
        }
      }

    }
             
        /***********To get the Email ids from the grid**************/
        
          var emailbtn =  new Ext.Button({
                 text    : 'Send Email',
                 renderTo:'button',
                 listeners:{
                    
                        click:{
                                
                            fn:function(){
                                var emailAddress = new Array();
                            for(var i=0; i< store_company.getCount(); i++){
                                emailAddress.push(store_company.getAt(i).get('emailid'));
                                }
                            window.alert(emailAddress);  //This prints the email ids.
                            }
                        }
                 }
          });    
        
   });
emailform.js file

Code:
   Ext.require([
    'Ext.form.*',
    'Ext.layout.container.Absolute',
    'Ext.window.Window'
]);

Ext.onReady(function() {
    var sendEmailForm = Ext.create('Ext.form.Panel', {
        layout: 'absolute',
        url: 'EmailServlet',
        defaultType: 'textfield',
        border: false,

        items: [{
            fieldLabel: 'Send To',
            fieldWidth: 60,
            msgTarget: 'side',
            allowBlank: false,
            x: 5,
            y: 5,
            name: 'to',
            anchor: '-5'  // anchor width by percentage
        }, {
            fieldLabel: 'Subject',
            fieldWidth: 60,
            x: 5,
            y: 35,
            name: 'subject',
            anchor: '-5'  // anchor width by percentage
        }, {
            x:5,
            y: 65,
            xtype: 'textarea',
            style: 'margin:0',
            hideLabel: true,
            name: 'msg',
            anchor: '-5 -5'  // anchor width and height
        }]
    });

    var win = Ext.create('Ext.window.Window', {
        title: 'Resize Me',
        width: 500,
        height: 300,
        minWidth: 300,
        minHeight: 200,
        layout: 'fit',
        plain:true,
        items: form,

        buttons: [{
            text: 'Send'
        },{
            text: 'Cancel'
        }]
    });

    win.show();
});
Hope i am clear this time...

Regards
Sach