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

[sachintaware]

Hello

Use Case:
This is the sample use case of my application.I have a grid which displays a candidate list fetched from database,with personal details like name,phone,email etc.

Now, I want to click on a button(Say "Send an Email") below the grid and submit the entire "email" grid column to a form with send mail functionality, with all email address in comma separated format.
How can I get the column values in the required format and pass it to the next form??

The email form will have :

To:(Pre-configured to some id)
FromComma separated values from grid column.)
Email Subject :
Body of email.

Any help appreciated.

Regards
Sach

[tavinashb]

Try this

var emailAddress = new Array();
for(var i=0; i< store.getCount(); i++){
emailAddress.push(store.getAt(i).get('emailAddress'));
}
textArea.setValue(emailAddress);

[sachintaware]

Thanks tavinashb for the prompt reply.

If i am not wrong I will have to write this on the handler of the button,on click of which the email addresses have to be picked.

Please correct if I am wrong.

I will try this and get back.

Regards
Sach

[tavinashb]

It depends, how and when you want to set value in "Email Address" text area.
You can set it on click of "Send Email" button or on "render"/"afterrender" event of of "Send Email" form.

[sachintaware]

Well,I have not worked on handlers or similar functionality. Any example if you can point me too would be beneficial.
A new user of extjs.But I will surely give it a try and revert back on the post,with the results.

Thank you

Regards
Sach

[tavinashb]

Can you post your JS code?
It will make me easier to understand how you are calling "Send Email" form.

or


you can try like this,

handler: function(){

textArea.setValue(emailAddress);

}

[sachintaware]

Hello tavinashb

Adding my js code for your reference.
This is the file where I have the gird and tree panel.On clicking a tree item I populate some records in the grid.
Now,I want to get the grid's email column for the displayed records on click of a "send email" button and pass it to a form which has To, From and Email Message as fields and a send button.

Please go through:

    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 client
        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
                    }
                }
            })
        }
      }

    }
                
   });

Regards
Sach

[tavinashb]

Hi,
Thanks for posting your code. In your code i didn't see how are you calling "Send Email" Form on click of "Send Email" button.

So, you can try like this

sendEmailForm.on('afterrender', function(){

var emailAddress = new Array();
var store = Ext.getCmp("candGrid").store; for(var i=0; i< store.getCount(); i++){
emailAddress.push(store.getAt(i).get('emailAddress')); 
} Ext.getCmp('textArea').setValue(emailAddress);
});

[sachintaware]

Hello

Well i hadn't added that code for button then,but I am not able to do it yet.This is what i did.
Added a listener for click on the button and tried to get the email values.
How can I do it??

          var emailbtn =  new Ext.Button({
                 text    : 'Send Email',
                 renderTo:'button',
                 listener:{
                        click:function(){
                            var emailArray= new Array();
                            for(var i=0; i< store_company.getCount(); i++){
                                emailAddress.push(store_company.getAt(i).get('emailid'));
                                }
                        }
                 }
          });

The values above in the emailAddress array have to be passed to the below form,in the Send to text feild,and on send it will go to my EmailServlet at back end to process the email logic.

But,I am not sure how I can achieve it??

This is the email form js.

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

Ext.onReady(function() {
    var form = 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();
});

Please help on it.

Regards
Sach

[tavinashb]

Are you going to apply "id" property to "Send To" field?
If yes then -

listener:{
     click:function(){                var emailArray= new Array();                for(var i=0; i< store_company.getCount(); i++){                  emailAddress.push(store_company.getAt(i).get('emailid'));                }
               Ext.getCmp("send-to").setValue(emailArray);
           win.show();       }  }

Call "win.show()" in click event function only.
If you are still not able to do it, post your complete code related to this application.