docs/api/Ext.util.Sortable.html

   1 <!DOCTYPE html><html><head><title>Ext.util.Sortable | Ext JS 4.0 Documentation</title><script type="text/javascript" src="../ext-all.js"></script><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../scrollbars.css" type="text/css"><link rel="stylesheet" href="../docs.css" type="text/css"><link id="styleCss" rel="stylesheet" href="../style.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script><link rel="stylesheet" href="../prettify.css" type="text/css"><!-- link(rel: 'stylesheet', href: req.baseURL + '/css/ext4.css', type: 'text/css')--><link rel="shortcut icon" type="image/ico" href="../favicon.ico"><!--[if IE]>
   2 <style type="text/css">.head-band { display: none; }
   3 .header { border: 0; top: 0; left: 0px; background: url(../header.gif) repeat-x; }
   4 .doc-tab .members .member a.more { background-color: #efefef; }
   5 </style><link rel="stylesheet" href="/new/css/ie.css" type="text/css"><![endif]-->
   6 </head><body id="ext-body" class="iScroll"><div id="notice" class="notice">For up to date documentation and features, visit
   7 <a href="http://docs.sencha.com/ext-js/4-0">http://docs.sencha.com/ext-js/4-0</a></div><div class="wrapper"><div class="head-band"></div><div class="header"><h2><a href="../index.html">Sencha Documentation</a></h2></div><div id="search"><form><input type="text" placeholder="Search" id="search-field" autocomplete="off" name="q"></form><div id="search-box"></div></div><div id="treePanel"></div><div id="container"><script type="text/javascript">
   8
   9     req = {
  10         liveURL: '.',
  11         standAloneMode: true,
  12         origDocClass: 'Ext.util.Sortable',
  13         docClass: 'Ext.util.Sortable',
  14         docReq: 'Ext.util.Sortable',
  15         version: '4.0',
  16         baseURL: '.',
  17         baseDocURL: '.',
  18         baseProdURL: '.'
  19     };
  20
  21     clsInfo = {};
  22
  23
  24
  25 </script>
  26
  27 <script type="text/javascript" src="../search.js"></script>
  28 <!--script type="text/javascript" src="/new/javascripts/app/examples.js"></script-->
  29 <script type="text/javascript" src="../class_tree.js"></script>
  30 <script type="text/javascript" src="../class_doc.js"></script>
  31 <script type="text/javascript">
  32     req.source = 'Sortable.html#Ext-util.Sortable';
  33     clsInfo = {"methods":["getSortState","initSortable","sort"],"cfgs":[],"properties":["defaultSortDirection","isSortable","sortRoot","sorters"],"events":[],"subclasses":[]};
  34     Ext.onReady(function() {
  35         Ext.create('Docs.classPanel');
  36     });
  37 </script><div id="top-block" class="top-block"><h1 id="clsTitle" class="cls"><a href="../source/Sortable.html#Ext-util.Sortable" target="_blank">Ext.util.Sortable</a></h1></div><div id="docContent"><div id="doc-overview-content"><div class="lft"><p>A mixin which allows a data component to be sorted. This is used by e.g. <a href="Ext.data.Store.html" rel="Ext.data.Store" class="docClass">Ext.data.Store</a> and <a href="Ext.data.TreeStore.html" rel="Ext.data.TreeStore" class="docClass">Ext.data.TreeStore</a>.</p>
  38
  39 <p>*NOTE**: This mixin is mainly for internal library use and most users should not need to use it directly. It
  40 is more likely you will want to use one of the component classes that import this mixin, such as
  41 <a href="Ext.data.Store.html" rel="Ext.data.Store" class="docClass">Ext.data.Store</a> or <a href="Ext.data.TreeStore.html" rel="Ext.data.TreeStore" class="docClass">Ext.data.TreeStore</a>.</p>
  42 <div class="members"><div class="m-properties"><a name="properties"></a><div class="definedBy">Defined By</div><h3 class="prp p">Properties</h3><div id="property-defaultSortDirection" class="member f ni"><a href="Ext.util.Sortable.html#property-defaultSortDirection" rel="property-defaultSortDirection" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Sortable.html" class="definedIn docClass">Ext.util.Sortable</a><br/><a href="../source/Sortable.html#Ext-util.Sortable-property-defaultSortDirection" class="viewSource">view source</a></div><a name="defaultSortDirection"></a><a name="property-defaultSortDirection"></a><a href="Ext.util.Sortable.html#" rel="property-defaultSortDirection" class="cls expand">defaultSortDirection</a><span> : String</span></div><div class="description"><div class="short"><p>The default sort direction to use if one is not specified (defaults to "ASC")</p>
  43 </div><div class="long"><p>The default sort direction to use if one is not specified (defaults to "ASC")</p>
  44 </div></div></div><div id="property-isSortable" class="member ni"><a href="Ext.util.Sortable.html#property-isSortable" rel="property-isSortable" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Sortable.html" class="definedIn docClass">Ext.util.Sortable</a><br/><a href="../source/Sortable.html#Ext-util.Sortable-property-isSortable" class="viewSource">view source</a></div><a name="isSortable"></a><a name="property-isSortable"></a><a href="Ext.util.Sortable.html#" rel="property-isSortable" class="cls expand">isSortable</a><span> : Boolean</span></div><div class="description"><div class="short"><p>Flag denoting that this object is sortable. Always true.</p>
  45 </div><div class="long"><p>Flag denoting that this object is sortable. Always true.</p>
  46 </div></div></div><div id="property-sortRoot" class="member ni"><a href="Ext.util.Sortable.html#property-sortRoot" rel="property-sortRoot" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Sortable.html" class="definedIn docClass">Ext.util.Sortable</a><br/><a href="../source/Sortable.html#Ext-util.Sortable-property-sortRoot" class="viewSource">view source</a></div><a name="sortRoot"></a><a name="property-sortRoot"></a><a href="Ext.util.Sortable.html#" rel="property-sortRoot" class="cls expand">sortRoot</a><span> : String</span></div><div class="description"><div class="short"><p>The property in each item that contains the data to sort. (defaults to null)</p>
  47 </div><div class="long"><p>The property in each item that contains the data to sort. (defaults to null)</p>
  48 </div></div></div><div id="property-sorters" class="member ni"><a href="Ext.util.Sortable.html#property-sorters" rel="property-sorters" class="expand more"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Sortable.html" class="definedIn docClass">Ext.util.Sortable</a><br/><a href="../source/Sortable.html#Ext-util.Sortable-property-sorters" class="viewSource">view source</a></div><a name="sorters"></a><a name="property-sorters"></a><a href="Ext.util.Sortable.html#" rel="property-sorters" class="cls expand">sorters</a><span> : Ext.util.MixedCollection</span></div><div class="description"><div class="short"><p>The collection of <a href="Ext.util.Sorter.html" rel="Ext.util.Sorter" class="docClass">Sorters</a> currently applied to this Store</p>
  49 </div><div class="long"><p>The collection of <a href="Ext.util.Sorter.html" rel="Ext.util.Sorter" class="docClass">Sorters</a> currently applied to this Store</p>
  50 </div></div></div></div><div class="m-methods"><a name="methods"></a><div class="definedBy">Defined By</div><h3 class="mth p">Methods</h3><div id="method-getSortState" class="member f ni"><a href="Ext.util.Sortable.html#method-getSortState" rel="method-getSortState" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Sortable.html" class="definedIn docClass">Ext.util.Sortable</a><br/><a href="../source/Sortable.html#Ext-util.Sortable-method-getSortState" class="viewSource">view source</a></div><a name="getSortState"></a><a name="method-getSortState"></a><a href="Ext.util.Sortable.html#" rel="method-getSortState" class="cls expand">getSortState</a> : Object</div><div class="description"><div class="short"><p>Returns an object describing the current sort state of this Store.</p>
  51 </div><div class="long"><p>Returns an object describing the current sort state of this Store.</p>
  52 <h3 class="pa">Returns</h3><ul><li><span class="pre">Object</span>&nbsp; &nbsp;<p>The sort state of the Store. An object with two properties:<ul>
  53 <li><b>field</b> : String<p class="sub-desc">The name of the field by which the Records are sorted.</p></li>
  54 <li><b>direction</b> : String<p class="sub-desc">The sort order, 'ASC' or 'DESC' (case-sensitive).</p></li>
  55 </ul>
  56 See <tt><a href="Ext.util.Sortable.html#sortInfo" rel="Ext.util.Sortable#sortInfo" class="docClass">sortInfo</a></tt> for additional details.</p>
  57 </li></ul></div></div></div><div id="method-initSortable" class="member ni"><a href="Ext.util.Sortable.html#method-initSortable" rel="method-initSortable" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Sortable.html" class="definedIn docClass">Ext.util.Sortable</a><br/><a href="../source/Sortable.html#Ext-util.Sortable-method-initSortable" class="viewSource">view source</a></div><a name="initSortable"></a><a name="method-initSortable"></a><a href="Ext.util.Sortable.html#" rel="method-initSortable" class="cls expand">initSortable</a> : void</div><div class="description"><div class="short">Performs initialization of this mixin. Component classes using this mixin should call this method
  58 during their own in...</div><div class="long"><p>Performs initialization of this mixin. Component classes using this mixin should call this method
  59 during their own initialization.</p>
  60 <h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
  61 </li></ul></div></div></div><div id="method-sort" class="member ni"><a href="Ext.util.Sortable.html#method-sort" rel="method-sort" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Sortable.html" class="definedIn docClass">Ext.util.Sortable</a><br/><a href="../source/Sortable.html#Ext-util.Sortable-method-sort" class="viewSource">view source</a></div><a name="sort"></a><a name="method-sort"></a><a href="Ext.util.Sortable.html#" rel="method-sort" class="cls expand">sort</a>(
  62 <span class="pre">String|Array sorters, String direction, Object where, Object doSort</span>)
  63  : void</div><div class="description"><div class="short">Sorts the data in the Store by one or more of its properties. Example usage:
  64
  65
  66 //sort by a single field
  67 myStore.sort(...</div><div class="long"><p>Sorts the data in the Store by one or more of its properties. Example usage:</p>
  68
  69
  70 <pre><code>//sort by a single field
  71 myStore.sort('myField', 'DESC');
  72
  73 //sorting by multiple fields
  74 myStore.sort([
  75     {
  76         property : 'age',
  77         direction: 'ASC'
  78     },
  79     {
  80         property : 'name',
  81         direction: 'DESC'
  82     }
  83 ]);
  84 </code></pre>
  85
  86
  87 <p>Internally, Store converts the passed arguments into an array of <a href="Ext.util.Sorter.html" rel="Ext.util.Sorter" class="docClass">Ext.util.Sorter</a> instances, and delegates the actual
  88 sorting to its internal <a href="Ext.util.MixedCollection.html" rel="Ext.util.MixedCollection" class="docClass">Ext.util.MixedCollection</a>.</p>
  89
  90
  91 <p>When passing a single string argument to sort, Store maintains a ASC/DESC toggler per field, so this code:</p>
  92
  93
  94 <pre><code>store.sort('myField');
  95 store.sort('myField');
  96      </code></pre>
  97
  98
  99 <p>Is equivalent to this code, because Store handles the toggling automatically:</p>
 100
 101
 102 <pre><code>store.sort('myField', 'ASC');
 103 store.sort('myField', 'DESC');
 104 </code></pre>
 105
 106 <h3 class="pa">Parameters</h3><ul><li><span class="pre">sorters</span> : String|Array<div class="sub-desc"><p>Either a string name of one of the fields in this Store's configured <a href="Ext.data.Model.html" rel="Ext.data.Model" class="docClass">Model</a>,
 107 or an Array of sorter configurations.</p>
 108 </div></li><li><span class="pre">direction</span> : String<div class="sub-desc"><p>The overall direction to sort the data by. Defaults to "ASC".</p>
 109 </div></li><li><span class="pre">where</span> : Object<div class="sub-desc">
 110 </div></li><li><span class="pre">doSort</span> : Object<div class="sub-desc">
 111 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 112 </li></ul></div></div></div></div></div></div></div><div id="pageContent"></div></div></div></div></body></html>