examples/grid/multiple-sorting.html

   1 <html>
   2     <head>
   3         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4         <title>Grid Multiple Sorting</title>
   5         <!-- GC -->
   6
   7         <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
   8         <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
   9         <link rel="stylesheet" type="text/css" href="multiple-sorting.css" />
  10
  11         <!-- ExtJS library: base/adapter -->
  12         <script type="text/javascript" src="../../adapter/ext/ext-base-debug.js"></script>
  13
  14         <!-- ExtJS library: all widgets -->
  15         <script type="text/javascript" src="../../ext-all-debug.js"></script>
  16     </head>
  17     <body>
  18         <script type="text/javascript" src="../ux/Reorderer.js"></script>
  19         <script type="text/javascript" src="../ux/ToolbarReorderer.js"></script>
  20         <script type="text/javascript" src="../ux/ToolbarDroppable.js"></script>
  21         <script type="text/javascript" src="multiple-sorting.js"></script>
  22         <h1>Multiple grid sorting example</h1>
  23         <p>This example shows how to sort a grid by more than a single field.</p>
  24         <p>The store is initially sorted by Rating DESC then by Salary ASC, as indicated in the toolbar.</p>
  25         <p>Click a button to change sorting direction, drag buttons to reorder them.</p>
  26         <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
  27           Name column header. Each column is only allowed one button, so Rating and Salary cannot be dropped in this example.</p>
  28         <p>Note that the js is not minified so it is readable. See <a href="multiple-sorting.js">multiple-sorting.js</a>.</p>
  29
  30         <div id="grid-example"></div>
  31     </body>
  32 </html>