Extracting all values from a grid "email" column and send email

[sachintaware]

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

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

   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

[tavinashb]

I have modified your code.
Try This,

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;
    
    /***************************Form Panel******************/
    var sendEmailForm = Ext.create('Ext.form.Panel', {
               layout: 'absolute',
               url: 'EmailServlet',
               defaultType: 'textfield',
               border: false,
       
               items: [{
                   fieldLabel: 'Send To',
                   fieldWidth: 60,
                   id: 'send-to',
                   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',
               id: 'send-email-window',
               width: 500,
               height: 300,
               minWidth: 300,
               minHeight: 200,
               layout: 'fit',
               plain:true,
               items: form,
       
               buttons: [{
                   text: 'Send'
               },{
                   text: 'Cancel'
               }]
           });
   
    
    
                /***********************Tree panel***************************/

/***********To get the Email ids from the grid**************/
        
          var emailbtn =  new Ext.Button({
                 text    : 'Send Email',
                 renderTo:'button',
                handler:  :function(){      
                                                     
                            
                                var emailAddress = new Array();
                            for(var i=0; i< store_company.getCount(); i++){
                                emailAddress.push(store_company.getAt(i).get('emailid'));
                                }
                             Ext.getCmp('send-to').setValue(emailAddress);
                             Ext.getCmp('send-email-window').show();
                 }
                   
          });    

    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'
                }
            ],
        tbar: {
         items:[emailbtn ]
}
        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
                    }
                }
            })
        }
      }

    }
             
        
        
   });

[sachintaware]

Hello
Hey that worked ....made a few changes(typos actually).
Thank you for your help,need some more.Probably the final frontier now..

Error:
Thefirst time every thing works fine.But when I click on the send mail button for the second time,it gives error as below:

Ext.getCmp("send-to") is undefined
http://localhost:9090/Search/js/candidates.js
Line 88

Please go through the comments and highlighted 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.layout.container.Absolute',
    'Ext.window.Window',
    'Ext.ux.LiveSearchGridPanel'
]);

 Ext.onReady(function() {
    
    var itemsPerPage = 50;
    
    /***************************Form Panel******************/
    var sendEmailForm = Ext.create('Ext.form.Panel', {
               layout: 'absolute',
               url: 'EmailServlet',                    // Will this work ??This is the Url to my servlet which has //the mail code I want on submit to go here and mail to be sent to the desired candidates
       
        defaultType: 'textfield',
               border: false,
       
               items: [{
                   fieldLabel: 'Send To',
                   fieldWidth: 60,
                   id: 'send-to',
                   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',
               id: 'send-email-window',
               width: 500,
               height: 300,
               minWidth: 300,
               minHeight: 200,
               layout: 'fit',
               plain:true,
               items:sendEmailForm,  //was set to form
       
               buttons: [{
                   text: 'Send'
               },{
                   text: 'Cancel'
               }]
           });
   
    
    
                /***********************Tree panel***************************/

/***********To get the Email ids from the grid**************/
        
          var emailbtn =  new Ext.Button({
                 text    : 'Send Email',
                 renderTo:'button',
                handler  : function(){      
                                                     
                               var emailAddress = new Array();
                            for(var i=0; i< store_company.getCount(); i++){
                                emailAddress.push(store_company.getAt(i).get('emailid'));
                                }
                             Ext.getCmp('send-to').setValue(emailAddress);
                             Ext.getCmp('send-email-window').show();
                 }
                   
          });    

    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'
                }
            ],
     //   tbar: {
  //       items:[emailbtn ]      commented this as i rendered it to the html.it gave an error
//}
        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
                    }
                }
            })
        }
      }

    }
             
        
        
   });

Regards
Sach

[sachintaware]

Hello tavinashb

Thank you very much for the responses till now.It really helped me a lot to get it working.
I have completed that part and started with the next.The earlier was a mail application and this is a sms one.
So,like email id's I have to extract the phone numbers from the grid(Achieved this in the similar way.)
But,the problem is in the Validation.I have to validate the numbers before sending them to the senders list.
i.e the list has mobile no and fixed line numbers(which cant receive sms).So I have to eliminate the bad data.

This is the code(below) to get the numbers but before setting the values i need to validate them in the required format.

1) Get the length of the number and if it is greater or less then 10.(Valid mobile number)
2) After checking length,eliminating irrelevant nos and prepend each number with the country code i.e 91.

After these checks the numbers will be in the required format and can be used.

 var smsbtn =  new Ext.Button({
                     text    :'Send SMS',
                     scale   :'large',  
                     enableToggle:true, 
                     renderTo:'buttonSms',
                     handler : function(){      
                                                     
                                var phnNo = new Array();
                                for(var j=0; j< store_company.getCount(); j++)
                                            {   
                                                
                                               phnNo.push(store_company.getAt(j).get('statename'));                
                                              
                                              
                                                Ext.getCmp('sms-to').setValue(phnNo);
                                                Ext.getCmp('send-sms-window').show();
                                             }
                                         }
                   
                          });

Hoping your comments

Regards
Sach

[tavinashb]

For number input use "Number Field" instead of "Text Field". You can apply validations to number field by using it's properties.
You will find different number field proprieties on -

http://docs.sencha.com/ext-js/4-0/#!...m.field.Number

[sarz]

Can anyone show a sample code how email is sent on button event, above thread speaks about collecting data from a grid and showing in a window there is no event for send button which will send a email . I am confused how this email works and will it reach the mail id which we enter ... Thanks in advance

[sachintaware]

Hello,
I had written this class to send an email.This class is called when an email button is clicked and the required parameters are passed to the sendMail method.

    @RequestMapping(value = "/email/view.action", method = RequestMethod.POST)
    public Object emailView(HttpServletRequest req,HttpServletResponse res) throws AddressException{
        
        /*********************Mail function****************/                  
        
        String from="sachitaware21@gmail.com";
        String[] toAddress = (req.getParameter("to").split(","));
        
        InternetAddress[] addressTo = new InternetAddress[toAddress.length];
        for (int i = 0; i < toAddress.length; i++)
        {
            addressTo[i] = new javax.mail.internet.InternetAddress(toAddress[i]);        
        }
        String subject = req.getParameter("subject");
        String mailBody =req.getParameter("body");
        String firstName = (req.getParameter("firstName"));
        
        //ApplicationContext context = new FileSystemXmlApplicationContext("WEB-INF/applicationContext.xml");
        //MailService mailService = (MailService) context.getBean("mailService");
        
        MailService mailService = new MailService();
        mailService.sendMail(from,toAddress,subject,mailBody);
        //mailService.sendAlertMail("Exception occurred");  
              
        return null;    
        
    }

@Service("mailService")
public class MailService {
    
    @Autowired
    private MailSender mailSender;
    @Autowired
    private SimpleMailMessage alertMailMessage;
    
      
    public void sendMail(String from, String[] toAddress, String subject, String mailBody)throws MailException {
        
                    /*************Get the username from session***************/
        
        Authentication auth = SecurityContextHolder.getContext().getAuthentication();
        String username = auth.getName(); //get logged in username   
        
        System.out.println("----Username is-------"+username+"--------------");
    
        SimpleMailMessage message = new SimpleMailMessage();         
        message.setFrom(from);
        message.setTo(toAddress);
        message.setSubject(subject);
        message.setText(mailBody);
        
        Properties props = new Properties();
        JavaMailSenderImpl sender = new JavaMailSenderImpl();
        
        props.setProperty("mail.smtp.auth", "true");
        props.setProperty("mail.smtp.starttls.enable", "true");
        props.setProperty("mail.transport.protocol", "smtp");
        props.setProperty("mail.debug", "true");
        
        sender.setHost("smtp.gmail.com");
        sender.setPort(587);
                 
        if(username.equals("options")){
             sender.setUsername("sachitaware21");
             sender.setPassword("password");
             sender.setJavaMailProperties(props);
             
        }
        else if (username.equals("options1")){
            sender.setUsername("newastronsolutions");
            sender.setPassword("optionsconsultancy");
            sender.setJavaMailProperties(props);          
        }     
        
        try {
              sender.send(message);
              // mailSender.send(message);
            }catch(MailException exception)
            {
                //log the message and go on
                System.err.println(exception.getMessage());
            }
            
        }  
     
}

Hope it helps.