examples/grid/multiple-sorting.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html>
   3     <head>
   4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5         <title>Grid Multiple Sorting</title>
   6         <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
   7         <link rel="stylesheet" type="text/css" href="../shared/example.css" />
   8         <script type="text/javascript" src="../../bootstrap.js"></script>
   9         <link rel="stylesheet" type="text/css" href="multiple-sorting.css" />
  10
  11         <script type="text/javascript" src="multiple-sorting.js"></script>
  12     </head>
  13     <body>
  14         <h1>Multiple grid sorting example</h1>
  15         <p>This example shows how to sort a grid by more than a single field.</p>
  16         <p>The store is initially sorted by Rating DESC then by Salary ASC, as indicated in the toolbar.</p>
  17         <p>Click a button to change sorting direction, drag buttons to reorder them.</p>
  18         <p>This example also uses the <a href="../ux/ToolbarDroppable.js">Ext.ux.ToolbarDroppable</a> plugin to allow column headers to be dropped onto the toolbar. Try it with
  19           Name column header. Each column is only allowed one button, so Rating and Salary cannot be dropped in this example.</p>
  20         <p>Note that the js is not minified so it is readable. See <a href="multiple-sorting.js">multiple-sorting.js</a>.</p>
  21
  22         <div id="grid-example"></div>
  23     </body>
  24 </html>