1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    149
    Vote Rating
    1
    Answers
    2
    sachintaware is on a distinguished road

      0  

    Default Answered: Extracting all values from a grid "email" column and send email

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


    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

  2. I have modified your code.
    Try This,
    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;
        
        /***************************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
                        }
                    }
                })
            }
          }
    
        }
                 
            
            
       });

  3. #2
    Sencha User
    Join Date
    Oct 2009
    Posts
    27
    Vote Rating
    0
    Answers
    1
    tavinashb is on a distinguished road

      0  

    Default


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

  4. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    149
    Vote Rating
    1
    Answers
    2
    sachintaware is on a distinguished road

      0  

    Default


    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

  5. #4
    Sencha User
    Join Date
    Oct 2009
    Posts
    27
    Vote Rating
    0
    Answers
    1
    tavinashb is on a distinguished road

      0  

    Default


    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.

  6. #5
    Sencha User
    Join Date
    Nov 2011
    Posts
    149
    Vote Rating
    1
    Answers
    2
    sachintaware is on a distinguished road

      0  

    Default


    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

  7. #6
    Sencha User
    Join Date
    Oct 2009
    Posts
    27
    Vote Rating
    0
    Answers
    1
    tavinashb is on a distinguished road

      0  

    Wink


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

  8. #7
    Sencha User
    Join Date
    Nov 2011
    Posts
    149
    Vote Rating
    1
    Answers
    2
    sachintaware is on a distinguished road

      0  

    Default


    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:

    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 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

  9. #8
    Sencha User
    Join Date
    Oct 2009
    Posts
    27
    Vote Rating
    0
    Answers
    1
    tavinashb is on a distinguished road

      0  

    Default


    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
    Code:
    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);
    });

  10. #9
    Sencha User
    Join Date
    Nov 2011
    Posts
    149
    Vote Rating
    1
    Answers
    2
    sachintaware is on a distinguished road

      0  

    Default


    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??

    Code:
              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.
    Code:
    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

  11. #10
    Sencha User
    Join Date
    Oct 2009
    Posts
    27
    Vote Rating
    0
    Answers
    1
    tavinashb is on a distinguished road

      0  

    Default


    Are you going to apply "id" property to "Send To" field?
    If yes then -
    Code:
    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.

Thread Participants: 2

Tags for this Thread