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

      0  

    Default


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

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

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

    this the candidate.js file

    Code:
    Ext.Loader.setConfig({enabled: true});
    
    Ext.Loader.setPath('Ext.ux', 'js/ux/');
    
    Ext.require([
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.util.*',
        'Ext.tip.QuickTipManager',
        'Ext.ux.LiveSearchGridPanel'
    ]);
    
     Ext.onReady(function() {
        
        var itemsPerPage = 50;
        
                    /***********************Tree panel***************************/
        var storetree = Ext.create('Ext.data.TreeStore', {
            root: {
                expanded: true
            },
            proxy: {
                type: 'ajax',
                url: 'RequirementsTree',
                actionMethods: {create: "POST", read: "POST", update: "POST", destroy: "POST"},
                     
                reader: {
                      type: 'json',
                      root: 'children'
                
                  }
            }
        });    
                    
         
        var treePan=Ext.create('Ext.tree.Panel', {
           id:'candTree',
           renderTo: 'tree',
           title: 'Navigation Menu',
           width: 300,
           height: 420,
           useArrows:true,
           frame: true,
           store:storetree,
             
       });
    
                        /***********************Handling tree Events************************************/
    
               Ext.define('Company', {
               extend: 'Ext.data.Model',
               fields: [
                        {name:'uname',type: 'string'},
                        {name:'fname',type: 'string'},
                        {name:'lname',type: 'string'},
                        {name:'emailid',type: 'string'},
                        {name:'statename',type: 'string'},
                        {name:'cityname',type: 'string'},
                        {name:'countryname',type: 'string'}]
           });
     
           var store_company = Ext.create('Ext.data.Store',{
              model: 'Company',
              remoteSort: true,
              pageSize:itemsPerPage,
              groupField: 'uname',
             
              proxy: {
                  type: 'ajax',
                  url: 'GridServlet',
                  actionMethods: {create: "POST", read: "POST", update: "POST", destroy: "POST"},
                     
                  reader: {
                         type: 'json',
                         root: 'device',
                         totalProperty: 'totalCount'    
                      }
                 }
                  
                                 
           });                             
            
            //Group the candidates according to the clients
    
            var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{
            
                    groupHeaderTpl: 'Client Name:{name}({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})'
            
            });
    
                              
            var grid_company = Ext.create('Ext.ux.LiveSearchGridPanel', {            
                
                    store: store_company,
                    features: [groupingFeature],
                    id:'x-grid3-row-alt',
                    
                    remoteSort:false,
                    columns:[                     
                    {
                        text     : 'Client Name',
                        width    : 110,
                        sortable : true,
                        
                        dataIndex: 'uname'
                    },
                    {
                        text     : 'Requirement',
                        width    : 145,
                        sortable : true,
                        dataIndex: 'fname'
                    },
                    {
                        text     : 'Name',
                        width    : 110, 
                        sortable : true,
                        dataIndex: 'lname'
                    },
                    {
                        text     : 'Email',
                        width    : 160, 
                        sortable : true,
                        dataIndex: 'emailid'
                    },
                    {
                        text     : 'Phone',
                        width    : 100, 
                        sortable : true,
                        dataIndex: 'statename'
                    },
                    {
                        text     : 'Skills',
                        width    : 180, 
                        sortable : true,
                        dataIndex: 'cityname'
                    },
                    {
                        text     : 'Status',
                        width    : 90, 
                        sortable : true,
                        dataIndex: 'countryname'
                    }
                ],
            
            bbar: Ext.create('Ext.PagingToolbar', {
            store: store_company,
            pageSize:50,
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display"
        }),    
                id:'candGrid', 
                height: 450,
                width: 900,
                title: 'Candidate List',
               
                region:'center',
                renderTo: 'grid-company',
                viewConfig: {
                                stripeRows: true
                         }        
    
            
            });
    
    treePan.getSelectionModel().on('select', function(selectionModel, record, index,options) {
            
        var getid = record.getId('id');
    
             store_company.load({
                       params: {
                             start:0,
                             getid:getid,    
                             limit:itemsPerPage
                            }        
                     });
                
                 });
    
    
                    /****************************Search box for tree panel******************************/
            
        var searchfield = new Ext.form.TextField({
           id:'multisite-search-field',
           allowBlank: true,
         //  fieldLabel: 'Search',
           emptyText: 'Filter Requirements...',    
           width: 280,
           renderTo: 'search',
           listeners: {
                        
                        change: {
            
                        fn: function(p1,p2){
                               treefilter.searchTree(treePan,searchfield);  
                            }
                            
                        }
                 }//listener closed 
       });
        
        
        treefilter= {
               searchTree: function (treePan, searchfield, property) {        // search if a tree component and searchfield (textfield, combo, trigger, etc) are passed as params
               if (treePan && searchfield) {
                                                                           // property is optional - will be set to the 'text' propert of the treeStore record by default
                property = property || 'text'
    
                var matches = []                                            // array of nodes matching the search criteria
                var rn = treePan.getRootNode()                                 // root node of the tree
    
                if (searchfield.getRawValue().length == 0) {                // if the search field is empty
                    treePan.collapseAll();                                     // collapse the tree nodes
                    return;
                }
    
                treePan.expandAll();                                           // expand all nodes for the the following iterative routines
    
                // iterate over all nodes in the tree in order to evalute them against the search criteria
                rn.cascadeBy(function (node) {
                    var re = new RegExp(searchfield.getRawValue(), "ig");   // the regExp could be modified to allow for case-sensitive, starts with, etc.
    
    
                    if (re.test(node.get(property)) == true && node.isLeaf()) {     // if the node matches the search criteria and is a leaf (could be modified to searh non-leaf nodes)
                        matches.push(node)                                             // add the node to the matches array
                    }
                })
    
    
                var visibleNodes = []                                       // array of nodes matching the search criteria + each parent non-leaf node up to root
                Ext.each(matches, function (item, i, arr) {                 // loop through all matching leaf nodes
                    rn.cascadeBy(function (node) {                          // find each parent node containing the node from the matches array
                        if (node.contains(item) == true) {                  
                            visibleNodes.push(node)                         // if it's an ancestor of the evaluated node add it to the visibleNodes array
                        }
                    })
                    visibleNodes.push(item)                                 // also add the evaluated node itself to the visibleNodes array
                })
    
    
                rn.cascadeBy(function (node) {                              // final loop to hide/show each node
                    var viewNode = Ext.fly(treePan.getView().getNode(node));   // get the dom element assocaited with each node
    
    
                    if (viewNode) {                                         // the first one is undefined ? escape it with a conditional
                        viewNode.setVisibilityMode(Ext.Element.DISPLAY);    // set the visibility mode of the dom node to display (vs offsets)
                        if (Ext.Array.contains(visibleNodes, node)) {       // if the the dom node evaluated is contained in the visibleNodes array
                            viewNode.show()                                 // then hide show it
                        } 
                        else {
                                viewNode.hide()                                 // else, hide it
                        }
                    }
                })
            }
          }
    
        }
                 
            /***********To get the Email ids from the grid**************/
            
              var emailbtn =  new Ext.Button({
                     text    : 'Send Email',
                     renderTo:'button',
                     listeners:{
                        
                            click:{
                                    
                                fn:function(){
                                    var emailAddress = new Array();
                                for(var i=0; i< store_company.getCount(); i++){
                                    emailAddress.push(store_company.getAt(i).get('emailid'));
                                    }
                                window.alert(emailAddress);  //This prints the email ids.
                                }
                            }
                     }
              });    
            
       });
    emailform.js file

    Code:
       Ext.require([
        'Ext.form.*',
        'Ext.layout.container.Absolute',
        'Ext.window.Window'
    ]);
    
    Ext.onReady(function() {
        var sendEmailForm = Ext.create('Ext.form.Panel', {
            layout: 'absolute',
            url: 'EmailServlet',
            defaultType: 'textfield',
            border: false,
    
            items: [{
                fieldLabel: 'Send To',
                fieldWidth: 60,
                msgTarget: 'side',
                allowBlank: false,
                x: 5,
                y: 5,
                name: 'to',
                anchor: '-5'  // anchor width by percentage
            }, {
                fieldLabel: 'Subject',
                fieldWidth: 60,
                x: 5,
                y: 35,
                name: 'subject',
                anchor: '-5'  // anchor width by percentage
            }, {
                x:5,
                y: 65,
                xtype: 'textarea',
                style: 'margin:0',
                hideLabel: true,
                name: 'msg',
                anchor: '-5 -5'  // anchor width and height
            }]
        });
    
        var win = Ext.create('Ext.window.Window', {
            title: 'Resize Me',
            width: 500,
            height: 300,
            minWidth: 300,
            minHeight: 200,
            layout: 'fit',
            plain:true,
            items: form,
    
            buttons: [{
                text: 'Send'
            },{
                text: 'Cancel'
            }]
        });
    
        win.show();
    });
    Hope i am clear this time...

    Regards
    Sach

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

      0  

    Default


    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. #13
    Sencha User
    Join Date
    Nov 2011
    Posts
    149
    Vote Rating
    1
    Answers
    2
    sachintaware is on a distinguished road

      0  

    Default


    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:
    HTML Code:
    Ext.getCmp("send-to") is undefined
    http://localhost:9090/Search/js/candidates.js
    Line 88
    Please go through the comments and highlighted code!!!!

    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

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

      0  

    Default


    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.


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

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

      0  

    Default


    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

  6. #16
    Sencha User
    Join Date
    Jun 2012
    Posts
    16
    Vote Rating
    0
    sarz is on a distinguished road

      0  

    Default How to send a email

    How to send a email


    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

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

      0  

    Default


    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.

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

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

Thread Participants: 2

Tags for this Thread