Hybrid View

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

Thread Participants: 2

Tags for this Thread