SearchField.html 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js">Ext.define('Ext.ux.form.SearchField', {
  19. extend: 'Ext.form.field.Trigger',
  20. alias: 'widget.searchfield',
  21. trigger1Cls: Ext.baseCSSPrefix + 'form-clear-trigger',
  22. trigger2Cls: Ext.baseCSSPrefix + 'form-search-trigger',
  23. hasSearch : false,
  24. paramName : 'query',
  25. initComponent: function() {
  26. var me = this;
  27. me.callParent(arguments);
  28. me.on('specialkey', function(f, e){
  29. if (e.getKey() == e.ENTER) {
  30. me.onTrigger2Click();
  31. }
  32. });
  33. // We're going to use filtering
  34. me.store.remoteFilter = true;
  35. // Set up the proxy to encode the filter in the simplest way as a name/value pair
  36. // If the Store has not been *configured* with a filterParam property, then use our filter parameter name
  37. if (!me.store.proxy.hasOwnProperty('filterParam')) {
  38. me.store.proxy.filterParam = me.paramName;
  39. }
  40. me.store.proxy.encodeFilters = function(filters) {
  41. return filters[0].value;
  42. }
  43. },
  44. afterRender: function(){
  45. this.callParent();
  46. this.triggerCell.item(0).setDisplayed(false);
  47. },
  48. onTrigger1Click : function(){
  49. var me = this;
  50. if (me.hasSearch) {
  51. me.setValue('');
  52. me.store.clearFilter();
  53. me.hasSearch = false;
  54. me.triggerCell.item(0).setDisplayed(false);
  55. me.updateLayout();
  56. }
  57. },
  58. onTrigger2Click : function(){
  59. var me = this,
  60. value = me.getValue();
  61. if (value.length &gt; 0) {
  62. // Param name is ignored here since we use custom encoding in the proxy.
  63. // id is used by the Store to replace any previous filter
  64. me.store.filter({
  65. id: me.paramName,
  66. property: me.paramName,
  67. value: value
  68. });
  69. me.hasSearch = true;
  70. me.triggerCell.item(0).setDisplayed(true);
  71. me.updateLayout();
  72. }
  73. }
  74. });</pre>
  75. </body>
  76. </html>