API tools faq
paste
Advertisement
Guest User

WTJ1

a guest
Jan 19th, 2012
131
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 14.73 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.         <meta name="viewport" content=" initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
  6.         <link rel="stylesheet" href="sencha-touch.css" type="text/css">
  7.          <link rel="stylesheet" href="app.css" type="text/css">
  8.         <title>Waterloo Tech Jobs</title>
  9.         <script type="text/javascript" src="sencha-touch.js">
  10.         </script>
  11.         <script type="text/javascript">
  12.                      
  13.             Ext.ns('SearchJobsForm'); // register our namespace
  14.  
  15.             var serverAdd = 'localhost';
  16.             var port = '3000';
  17.             var dataReceivedFromServer=' ';
  18.  
  19.            
  20.                     /* BUTTON HANDLERS */
  21.            
  22.            
  23.             var resetButtonHandler = function (btn, evt) {
  24.                 this.getComponent('keywords').reset();
  25.                 this.getComponent('dposted').reset();
  26.                 this.getComponent('jtitle').reset();
  27.                 this.getComponent('jcategory').reset();
  28.                 this.getComponent('salaryf').reset();
  29.                 this.getComponent('salaryt').reset();
  30.                 this.getComponent('jscategory').reset();
  31.                 this.getComponent('ptype').reset();
  32.                                     }
  33.  
  34.             /*This function takes the search criteria and sends it to the server to receive filtered search results
  35.             */
  36.            
  37.             var submitButtonHandler = function(btn,evt) {
  38.            
  39.              var form = this.el.up('.x-panel');
  40.            
  41.             var searchCriteria = {
  42.                             'keywords':form.down('.x-input-text[name=keywords]').getValue(),
  43.                             'job_title': form.down('.x-input-text[name=jtitle]').getValue(),
  44.                             'job_category':form.down('.x-input-text[name=jcategory]').getValue(),
  45.                             'job_subcategory':form.down('.x-input-text[name=jscategory]').getValue(),                                
  46.                             'position_type':form.down('.x-input-text[name=ptype]').getValue(),
  47.                             'salary_from': form.down('.x-input-text[name=salaryf]').getValue(),
  48.                             'salary_to': form.down('.x-input-text[name=salaryto]').getValue(),
  49.                             'posting_age':form.down('.x-input-text[name=dposted]').getValue()
  50.                             };
  51.  
  52.             globalvar = searchCriteria;
  53.  
  54.             connect(searchCriteria);
  55.            
  56.             }
  57.            
  58.             //connection to the server
  59.             var connect = function(searchCriteria){
  60.             Ext.util.JSONP.request({
  61.                                     url: "http://"+serverAdd+":"+ port+"/users/searchresults.json",
  62.                                     format: 'json',
  63.                                     callbackKey: 'callback',
  64.                                     params : searchCriteria,
  65.                                     callback: function(data) {
  66.                                     //Do something with the results. Construct another interface for showing the results.
  67.                                     //alert(data);
  68.                                     dataReceivedFromServer = data;
  69.                                     //Ext.apply(this, {jobsList: new SearchJobsForm.jobsList()});
  70.                                     var jobsList = new SearchJobsForm.jobsList();
  71.                                                                        },
  72.                                     failure: function ( result) {
  73.                                         alert('Failed');
  74.                                     }
  75.                                 });
  76.            
  77.             }//end of connect function
  78.  
  79.                                     /* THE LIST OF JOBS */
  80.  
  81.                                     SearchJobsForm.jobsList = Ext.extend(Ext.Panel, {
  82.                                     dockedItems : [ {
  83.                                     xtype : 'toolbar',
  84.                                     title : 'WTJ',
  85.                                     dock : 'top',
  86.                                     items : [ {
  87.                                     xtype : 'button',
  88.                                     text : 'Back',
  89.                                     ui : 'back',
  90.                                     handler : function() {
  91.                                     //back button controller
  92.                                     },
  93.                                     scope : this
  94.                                     } ]
  95.                                     } ],
  96.                                     items : [ {
  97.                                     xtype : 'list',
  98.                                     emptyText : 'No data available.',
  99.                                     store : 'jobStore',
  100.                                     itemTpl : '<div class="list-item-title">{title}</div>'
  101.                                                 +
  102.                                               '<div class="list-item-narrative">{narrative}</div>',
  103.                                     onItemDisclosure : function(record) {
  104.                                     },
  105.                                     grouped : false,
  106.                                     scroll : 'vertical',
  107.                                     fullscreen : true
  108.                                     } ],
  109.                                     initComponent : function() {
  110.                                     SearchJobsForm.jobsList.superclass.initComponent.apply(this, arguments);
  111.                                     }
  112.                                 });
  113.  
  114.                     /*    ****** MODEL ******  */
  115.  
  116.    
  117.             Ext.regModel('jobSummary', {
  118.             fields: [
  119.       {name: 'title',           type: 'string'}
  120.       /*
  121.       ,
  122.       {name: 'brief_description', type: 'string'},
  123.       {name: 'company',         type: 'string'},
  124.       {name: 'category',        type: 'string'},
  125.       {name: 'posting_date',    type: 'string' },
  126.       {name: 'sub_category',    type: 'string'},
  127.       {name: 'department',      type: 'string'},
  128.       {name: 'reference_num',   type: 'string'},
  129.       {name: 'province',        type: 'string'},
  130.       {name: 'country',         type: 'string'},
  131.       {name: 'full_description', type: 'string'},
  132.       {name: 'requirements',    type: 'string'},
  133.       {name: 'relocation_covered', type: 'string'},
  134.       {name: 'salary',          type: 'string'},
  135.       {name: 'travel_req',      type: 'string'},
  136.       {name: 'call_allowed',    type: 'string'},
  137.       {name: 'term',            type: 'string'},
  138.       {name: 'experience',      type: 'string'},
  139.       {name: 'call_allowed',    type: 'string'}
  140.       */
  141.     ]
  142. });
  143.  
  144.  
  145.                     /* ****** STORE ****** */
  146.  
  147.             var store = new Ext.data.Store({
  148.                         model: 'jobSummary',
  149.                         storeId: 'jobStore',
  150.                         /*
  151.                         proxy: {
  152.                                 type:'scripttag',
  153.                                 url:'temp.json',
  154.                                 reader: {
  155.                                 type: 'json'
  156.                                 }
  157.                         },
  158.                     */
  159.                       data : [{title: 'This is test'},
  160.                       {title: 'This is test2'},
  161.                       {title: 'This is test3'}]
  162.                         });
  163. /*
  164.                 *******SEARCH FORM******
  165.    
  166. */
  167.             SearchJobsForm.form = Ext.extend(Ext.Panel,{
  168.            
  169.                 initComponent: function(){
  170.                    
  171.                     Ext.apply(this, {
  172.                         floating: true,
  173.                         width: 250,
  174.                         height: 370,
  175.                         scroll: 'vertical',
  176.                         centered: true,
  177.                         modal: true,
  178.                         hideOnMaskTap: false,
  179.                         items: [{  
  180.                         xtype: 'textfield',
  181.                         itemId: 'keywords',
  182.                         label: 'Keywords',
  183.                         labelAlign: 'top',
  184.                         labelWidth: '100%',
  185.                         name: 'keywords'
  186.                         },{  
  187.                         xtype: 'textfield',
  188.                         label: 'Job Title',
  189.                         itemId: 'jtitle',
  190.                         labelAlign: 'top',
  191.                         labelWidth: '100%',
  192.                         name: 'jtitle'
  193.                         },{
  194.                         xtype: 'selectfield',
  195.                         label: 'Job Category',
  196.                          itemId: 'jcategory',
  197.                         labelAlign: 'top',
  198.                         labelWidth: '100%',
  199.                         name: 'jcategory',
  200.                             options: [{
  201.                                 text: 'Any', value: 'ANY'
  202.                             }, {
  203.                                 text: 'Technical', value: 'Technical'
  204.                             }, {
  205.                                 text: 'Non-Technical', value: 'Non-Technical'
  206.                             }, {
  207.                                 text: 'Tech Start-up', value: 'Tech Start-up'
  208.                             }, {
  209.                                 text: 'Life Science', value: 'Life Science'
  210.                             }, {
  211.                                 text: 'Digital Media', value: 'Digital Media'
  212.                             }, {
  213.                                 text: 'Accelerator Centre', value: 'Accelerator Centre'
  214.                             }
  215.                             ]
  216.                         },{
  217.                         xtype: 'selectfield',
  218.                         label: 'Job Sub-Category',
  219.                          itemId: 'jscategory',
  220.                         labelAlign: 'top',
  221.                         labelWidth: '100%',
  222.                         name: 'jscategory',
  223.                             options: [{
  224.                                 text: 'Any', value: 'ANY'
  225.                             }, {
  226.                                 text: 'Developer', value: 'Developer'
  227.                             }, {
  228.                                 text: 'Quality Assurance', value: 'Quality Assurance'
  229.                             }, {
  230.                                 text: 'Project Manager', value: 'Project Manager'
  231.                             }, {
  232.                                 text: 'Tester', value: 'Tester'
  233.                             }, {
  234.                                 text: 'IT Help Desk', value: 'IT Help Desk'
  235.                             }, {
  236.                                 text: 'Health Care', value: 'Health Care'
  237.                             }, {
  238.                                 text: 'Transportation and Logistics', value: 'Transportation and Logistics'
  239.                             }, {
  240.                                 text: 'Management', value: 'Management'
  241.                             }, {
  242.                                 text: 'Network', value: 'Network'
  243.                             }, {
  244.                                 text: 'Administration', value: 'Administration'
  245.                             }, {
  246.                                 text: 'General', value: 'General'
  247.                             }
  248.                             ]
  249.                         },{
  250.                         xtype: 'selectfield',
  251.                         label: 'Position Type',
  252.                          itemId: 'ptype',
  253.                         labelAlign: 'top',
  254.                         labelWidth: '100%',
  255.                         name: 'ptype',
  256.                             options: [{
  257.                                 text: 'Any', value: 'ANY'
  258.                             }, {
  259.                                 text: 'Part Time', value: 'Part Time'
  260.                             }, {
  261.                                 text: 'Part Time Contract', value: 'Part Time Contract'
  262.                             }, {
  263.                                 text: 'Full Time', value: 'Full Time'
  264.                             }, {
  265.                                 text: 'Full Time Contract', value: 'Full Time Contract'
  266.                             }
  267.                             ]
  268.                         },{
  269.                         xtype: 'selectfield',
  270.                         label: 'Salary (CAD$): From',
  271.                          itemId: 'salaryf',
  272.                         labelAlign: 'top',
  273.                         labelWidth: '100%',
  274.                         name:'salaryf',
  275.                             options: [{
  276.                                 text: 'Any', value: 'ANY'
  277.                             }, {
  278.                                 text: '20000', value: '20000'
  279.                             }, {
  280.                                 text: '30000', value: '30000'
  281.                             }, {
  282.                                 text: '40000', value: '40000'
  283.                             },{
  284.                                 text: '50000', value: '50000'
  285.                             }, {
  286.                                 text: '60000', value: '60000'
  287.                             }, {
  288.                                 text: '70000', value: '70000'
  289.                             }, {
  290.                                 text: '80000', value: '80000'
  291.                             }, {
  292.                                 text: '90000', value: '90000'
  293.                             }, {
  294.                                 text: '100000', value: '100000'
  295.                             }, {
  296.                                 text: '100000+', value: '100000+'
  297.                             }
  298.                            
  299.                             ]
  300.                         },{
  301.                         xtype: 'selectfield',
  302.                         label: 'to',
  303.                          itemId: 'salaryt',
  304.                         labelAlign: 'top',
  305.                         labelWidth: '100%',
  306.                         name: 'salaryto',
  307.                             options: [{
  308.                                 text: 'Any', value: 'ANY'
  309.                             }, {
  310.                                 text: '20000', value: '20000'
  311.                             }, {
  312.                                 text: '30000', value: '30000'
  313.                             }, {
  314.                                 text: '40000', value: '40000'
  315.                             },{
  316.                                 text: '50000', value: '50000'
  317.                             }, {
  318.                                 text: '60000', value: '60000'
  319.                             }, {
  320.                                 text: '70000', value: '70000'
  321.                             }, {
  322.                                 text: '80000', value: '80000'
  323.                             }, {
  324.                                 text: '90000', value: '90000'
  325.                             }, {
  326.                                 text: '100000', value: '100000'
  327.                             }, {
  328.                                 text: '100000+', value: '100000+'
  329.                             }
  330.                             ]
  331.                         },{
  332.                         xtype: 'selectfield',
  333.                         label: 'Posted in last (Days):',
  334.                          itemId: 'dposted',
  335.                         labelAlign: 'top',
  336.                         labelWidth: '100%',
  337.                         name:'dposted',
  338.                             options: [{
  339.                                 text: '30', value: '30'
  340.                             }, {
  341.                                 text: '60', value: '60'
  342.                             }, {
  343.                                 text: '90', value: '90'
  344.                             }
  345.                             ]
  346.                         }
  347.                             ],
  348.                             dockedItems: [{
  349.                                             xtype: 'toolbar',
  350.                                             itemId: 'toolbar',
  351.                                             dock: 'bottom',
  352.                                             height: '36',
  353.                                             items: [
  354.                                                     { xtype: 'button', text: 'Reset',itemId: 'reset',scope: this,
  355.                                                     handler:  resetButtonHandler  },
  356.                                                     { xtype: 'spacer'},
  357.                                                     { xtype: 'button', text: 'Submit',
  358.                                                     handler: submitButtonHandler }                                                  
  359.                                                     ]
  360.                                         }]
  361.                     });
  362.                     SearchJobsForm.form.superclass.initComponent.call(this);
  363.                 },
  364.             });
  365.              
  366.             Ext.setup({
  367.                 tabletStartupScreen: 'tablet_startup.png',
  368.                 phoneStartupScreen: 'phone_startup.png',
  369.                 icon: 'icon.png',
  370.                 glossOnIcon: false,
  371.                 onReady: function(){
  372.                     var form = new SearchJobsForm.form();
  373.                     form.show();                
  374.                
  375.                 }
  376.             });
  377.         </script>
  378.     </head>
  379.     <body>
  380.     </body>
  381. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!