<!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css"> <script type="text/javascript" src="ExtJs/ext-all.js"></script> <script type="text/javascript" src="ExtJs/bootstrap.js"></script> <script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script> <script type="text/javascript"> Ext.onReady(function() { Ext.create('Ext.panel.Panel', { title: 'Local', height: 550, width: 250, Frame: true, collapsible: true, autoScroll: true, renderTo: Ext.getBody(), bodyPadding: 5, bodyStyle: 'background-color: #FFFFFF', layout: 'vbox', items: [{ title: 'localElement', contentEl: 'localElement' },{ xtype: 'datepicker', minDate: new Date() },{ xtype: 'datepicker', minDate: new Date() }] }); }); </script> </head> <body> <table border=1 id='localElement'> <tr><th colspan="2">Staff List</th></tr> <tr> <th width="60">Number</th> <th width="60">Value</th> </tr> <tr><td>1</td><td>One</td></tr> <tr><td>2</td><td>One</td></tr> <tr><td>3</td><td>One</td></tr> <tr><td>4</td><td>One</td></tr> <tr><td>5</td><td>One</td></tr> <tr><td>6</td><td>One</td></tr> <tr><td>7</td><td>One</td></tr> <tr><td>8</td><td>One</td></tr> <tr><td>9</td><td>One</td></tr> </table> </body> </html>