`
easonfans
  • 浏览: 251468 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Extjs之客户端查询

EXTvim 
阅读更多

  和大家分享一个我在www.extjs.com上找的插件，该插件可以执行客户端查询，说白了就是只能在本页做查询动作，没有和服务器交互.代码如下

Jscript代码 复制代码
  1. // vim: ts=4:sw=4:nu:fdc=4:nospell   
  2.   
  3. /**  
  4.  
  5.  * Search plugin for Ext.grid.GridPanel, Ext.grid.EditorGrid ver. 2.x or subclasses of them  
  6.  
  7.  *  
  8.  
  9.  * @author    Ing. Jozef Sakalos  
  10.  
  11.  * @copyright (c) 2008, by Ing. Jozef Sakalos  
  12.  
  13.  * @date      17. January 2008  
  14.  
  15.  * @version   $Id: Ext.ux.grid.Search.js 120 2008-03-31 00:09:05Z jozo $  
  16.  
  17.  *  
  18.  
  19.  * @license Ext.ux.grid.Search is licensed under the terms of  
  20.  
  21.  * the Open Source LGPL 3.0 license.  Commercial use is permitted to the extent  
  22.  
  23.  * that the code/component(s) do NOT become part of another Open Source or Commercially  
  24.  
  25.  * licensed development library or toolkit without explicit permission.  
  26.  
  27.  *   
  28.  
  29.  * License details: http://www.gnu.org/licenses/lgpl.html  
  30.  
  31.  */  
  32.   
  33.   
  34.   
  35. /*global Ext */  
  36.   
  37.   
  38.   
  39. Ext.ns('Ext.ux.grid');   
  40.   
  41.   
  42.   
  43. /**  
  44.  
  45.  * @class Ext.ux.grid.Search  
  46.  
  47.  * @extends Ext.util.Observable  
  48.  
  49.  * @param {Object} config configuration object  
  50.  
  51.  * @constructor  
  52.  
  53.  */  
  54.   
  55. Ext.ux.grid.Search = function(config) {   
  56.   
  57.     Ext.apply(this, config);   
  58.   
  59.     Ext.ux.grid.Search.superclass.constructor.call(this);   
  60.   
  61. }; // eo constructor   
  62.   
  63.   
  64.   
  65. Ext.extend(Ext.ux.grid.Search, Ext.util.Observable, {   
  66.   
  67.     /**  
  68.  
  69.      * @cfg {String} searchText Text to display on menu button  
  70.  
  71.      */  
  72.   
  73.      searchText:'Search'  
  74.   
  75.   
  76.   
  77.     /**  
  78.  
  79.      * @cfg {String} searchTipText Text to display as input tooltip. Set to '' for no tooltip  
  80.  
  81.      */    
  82.   
  83.     ,searchTipText:'Type a text to search and press Enter'  
  84.   
  85.   
  86.   
  87.     /**  
  88.  
  89.      * @cfg {String} selectAllText Text to display on menu item that selects all fields  
  90.  
  91.      */  
  92.   
  93.     ,selectAllText:'Select All'  
  94.   
  95.   
  96.   
  97.     /**  
  98.  
  99.      * @cfg {String} position Where to display the search controls. Valid values are top and bottom (defaults to bottom)  
  100.  
  101.      * Corresponding toolbar has to exist at least with mimimum configuration tbar:[] for position:top or bbar:[]  
  102.  
  103.      * for position bottom. Plugin does NOT create any toolbar.  
  104.  
  105.      */  
  106.   
  107.     ,position:'bottom'  
  108.   
  109.   
  110.   
  111.     /**  
  112.  
  113.      * @cfg {String} iconCls Icon class for menu button (defaults to icon-magnifier)  
  114.  
  115.      */  
  116.   
  117.     ,iconCls:'icon-magnifier'  
  118.   
  119.   
  120.   
  121.     /**  
  122.  
  123.      * @cfg {String/Array} checkIndexes Which indexes to check by default. Can be either 'all' for all indexes  
  124.  
  125.      * or array of dataIndex names, e.g. ['persFirstName', 'persLastName']  
  126.  
  127.      */  
  128.   
  129.     ,checkIndexes:'all'  
  130.   
  131.   
  132.   
  133.     /**  
  134.  
  135.      * @cfg {Array} disableIndexes Array of index names to disable (not show in the menu), e.g. ['persTitle', 'persTitle2']  
  136.  
  137.      */  
  138.   
  139.     ,disableIndexes:[]   
  140.   
  141.   
  142.   
  143.     /**  
  144.  
  145.      * @cfg {String} dateFormat how to format date values. If undefined (the default)   
  146.  
  147.      * date is formatted as configured in colummn model  
  148.  
  149.      */  
  150.   
  151.     ,dateFormat:undefined   
  152.   
  153.   
  154.   
  155.     /**  
  156.  
  157.      * @cfg {Boolean} showSelectAll Select All item is shown in menu if true (defaults to true)  
  158.  
  159.      */  
  160.   
  161.     ,showSelectAll:true  
  162.   
  163.   
  164.   
  165.     /**  
  166.  
  167.      * @cfg {String} mode Use 'remote' for remote stores or 'local' for local stores. If mode is local  
  168.  
  169.      * no data requests are sent to server the grid's store is filtered instead (defaults to 'remote')  
  170.  
  171.      */  
  172.   
  173.     ,mode:'remote'  
  174.   
  175.   
  176.   
  177.     /**  
  178.  
  179.      * @cfg {Number} width Width of input field in pixels (defaults to 100)  
  180.  
  181.      */  
  182.   
  183.     ,width:100   
  184.   
  185.   
  186.   
  187.     /**  
  188.  
  189.      * @cfg {String} xtype xtype is usually not used to instantiate this plugin but you have a chance to identify it  
  190.  
  191.      */  
  192.   
  193.     ,xtype:'gridsearch'  
  194.   
  195.   
  196.   
  197.     /**  
  198.  
  199.      * @cfg {Object} paramNames Params name map (defaults to {fields:'fields', query:'query'}  
  200.  
  201.      */  
  202.   
  203.     ,paramNames: {   
  204.   
  205.          fields:'fields'  
  206.   
  207.         ,query:'query'  
  208.   
  209.     }   
  210.   
  211.   
  212.   
  213.     /**  
  214.  
  215.      * @cfg {String} shortcutKey Key to fucus the input field (defaults to r = Sea_r_ch). Empty string disables shortcut  
  216.  
  217.      */  
  218.   
  219.     ,shortcutKey:'r'  
  220.   
  221.   
  222.   
  223.     /**  
  224.  
  225.      * @cfg {String} shortcutModifier Modifier for shortcutKey. Valid values: alt, ctrl, shift (defaults to alt)  
  226.  
  227.      */  
  228.   
  229.     ,shortcutModifier:'alt'  
  230.   
  231.   
  232.   
  233.     /**  
  234.  
  235.      * @cfg {String} align 'left' or 'right' (defaults to 'left')  
  236.  
  237.      */  
  238.   
  239.   
  240.   
  241.     /**  
  242.  
  243.      * @cfg {Number} minLength force user to type this many character before he can make a search  
  244.  
  245.      */  
  246.   
  247.   
  248.   
  249.     /**  
  250.  
  251.      * @cfg {Ext.Panel/String} toolbarContainer Panel (or id of the panel) which contains toolbar we want to render  
  252.  
  253.      * search controls to (defaults to this.grid, the grid this plugin is plugged-in into)  
  254.  
  255.      */  
  256.   
  257.        
  258.   
  259.     // {{{   
  260.   
  261.     /**  
  262.  
  263.      * private  
  264.  
  265.      * @param {Ext.grid.GridPanel/Ext.grid.EditorGrid} grid reference to grid this plugin is used for  
  266.  
  267.      */  
  268.   
  269.     ,init:function(grid) {   
  270.   
  271.         this.grid = grid;   
  272.   
  273.   
  274.   
  275.         // setup toolbar container if id was given   
  276.   
  277.         if('string' === typeof this.toolbarContainer) {   
  278.   
  279.             this.toolbarContainer = Ext.getCmp(this.toolbarContainer);   
  280.   
  281.         }   
  282.   
  283.   
  284.   
  285.         // do our processing after grid render and reconfigure   
  286.   
  287.         grid.onRender = grid.onRender.createSequence(this.onRender, this);   
  288.   
  289.         grid.reconfigure = grid.reconfigure.createSequence(this.reconfigure, this);   
  290.   
  291.     } // eo function init   
  292.   
  293.     // }}}   
  294.   
  295.     // {{{   
  296.   
  297.     /**  
  298.  
  299.      * private add plugin controls to <b>existing</b> toolbar and calls reconfigure  
  300.  
  301.      */  
  302.   
  303.     ,onRender:function() {   
  304.   
  305.         var panel = this.toolbarContainer || this.grid;   
  306.   
  307.         var tb = 'bottom' === this.position ? panel.bottomToolbar : panel.topToolbar;   
  308.   
  309.   
  310.   
  311.         // add menu   
  312.   
  313.         this.menu = new Ext.menu.Menu();   
  314.   
  315.   
  316.   
  317.         // handle position   
  318.   
  319.         if('right' === this.align) {   
  320.   
  321.             tb.addFill();   
  322.   
  323.         }   
  324.   
  325.         else {   
  326.   
  327.             tb.addSeparator();   
  328.   
  329.         }   
  330.   
  331.   
  332.   
  333.         // add menu button   
  334.   
  335.         tb.add({   
  336.   
  337.              text:this.searchText   
  338.   
  339.             ,menu:this.menu   
  340.   
  341.             ,iconCls:this.iconCls   
  342.   
  343.         });   
  344.   
  345.   
  346.   
  347.         // add input field (TwinTriggerField in fact)   
  348.   
  349.         this.field = new Ext.form.TwinTriggerField({   
  350.   
  351.              width:this.width   
  352.   
  353.             ,selectOnFocus:undefined === this.selectOnFocus ? true : this.selectOnFocus   
  354.   
  355.             ,trigger1Class:'x-form-clear-trigger'  
  356.   
  357.             ,trigger2Class:'x-form-search-trigger'  
  358.   
  359.             ,onTrigger1Click:this.onTriggerClear.createDelegate(this)   
  360.   
  361.             ,onTrigger2Click:this.onTriggerSearch.createDelegate(this)   
  362.   
  363.             ,minLength:this.minLength   
  364.   
  365.         });   
  366.   
  367.   
  368.   
  369.         // install event handlers on input field   
  370.   
  371.         this.field.on('render', function() {   
  372.   
  373.             this.field.el.dom.qtip = this.searchTipText;   
  374.   
  375.   
  376.   
  377.             // install key map   
  378.   
  379.             var map = new Ext.KeyMap(this.field.el, [{   
  380.   
  381.                  key:Ext.EventObject.ENTER   
  382.   
  383.                 ,scope:this  
  384.   
  385.                 ,fn:this.onTriggerSearch   
  386.   
  387.             },{   
  388.   
  389.                  key:Ext.EventObject.ESC   
  390.   
  391.                 ,scope:this  
  392.   
  393.                 ,fn:this.onTriggerClear   
  394.   
  395.             }]);   
  396.   
  397.             map.stopEvent = true;   
  398.   
  399.         }, this, {single:true});   
  400.   
  401.   
  402.   
  403.         tb.add(this.field);   
  404.   
  405.   
  406.   
  407.         // reconfigure   
  408.   
  409.         this.reconfigure();   
  410.   
  411.   
  412.   
  413.         // keyMap   
  414.   
  415.         if(this.shortcutKey && this.shortcutModifier) {   
  416.   
  417.             var shortcutEl = this.grid.getEl();   
  418.   
  419.             var shortcutCfg = [{   
  420.   
  421.                  key:this.shortcutKey   
  422.   
  423.                 ,scope:this  
  424.   
  425.                 ,stopEvent:true  
  426.   
  427.                 ,fn:function() {   
  428.   
  429.                     this.field.focus();   
  430.   
  431.                 }   
  432.   
  433.             }];   
  434.   
  435.             shortcutCfg[0][this.shortcutModifier] = true;   
  436.   
  437.             this.keymap = new Ext.KeyMap(shortcutEl, shortcutCfg);   
  438.   
  439.         }   
  440.   
  441.     } // eo function onRender   
  442.   
  443.     // }}}   
  444.   
  445.     // {{{   
  446.   
  447.     /**  
  448.  
  449.      * private Clear Trigger click handler  
  450.  
  451.      */  
  452.   
  453.     ,onTriggerClear:function() {   
  454.   
  455.         this.field.setValue('');   
  456.   
  457.         this.field.focus();   
  458.   
  459.         this.onTriggerSearch();   
  460.   
  461.     } // eo function onTriggerClear   
  462.   
  463.     // }}}   
  464.   
  465.     // {{{   
  466.   
  467.     /**  
  468.  
  469.      * private Search Trigger click handler (executes the search, local or remote)  
  470.  
  471.      */  
  472.   
  473.     ,onTriggerSearch:function() {   
  474.   
  475.         if(!this.field.isValid()) {   
  476.   
  477.             return;   
  478.   
  479.         }   
  480.   
  481.         var val = this.field.getValue();   
  482.   
  483.         var store = this.grid.store;   
  484.   
  485.   
  486.   
  487.         // grid's store filter   
  488.   
  489.         if('local' === this.mode) {   
  490.   
  491.             store.clearFilter();   
  492.   
  493.             if(val) {   
  494.   
  495.                 store.filterBy(function(r) {   
  496.   
  497.                     var retval = false;   
  498.   
  499.                     this.menu.items.each(function(item) {   
  500.   
  501.                         if(!item.checked || retval) {   
  502.   
  503.                             return;   
  504.   
  505.                         }   
  506.   
  507.                         var rv = r.get(item.dataIndex);   
  508.   
  509.                         rv = rv instanceof Date ? rv.format(this.dateFormat || r.fields.get(item.dataIndex).dateFormat) : rv;   
  510.   
  511.                         var re = new RegExp(val, 'gi');   
  512.   
  513.                         retval = re.test(rv);   
  514.   
  515.                     }, this);   
  516.   
  517.                     if(retval) {   
  518.   
  519.                         return true;   
  520.   
  521.                     }   
  522.   
  523.                     return retval;   
  524.   
  525.                 }, this);   
  526.   
  527.             }   
  528.   
  529.             else {   
  530.   
  531.             }   
  532.   
  533.         }   
  534.   
  535.         // ask server to filter records   
  536.   
  537.         else {   
  538.   
  539.             // clear start (necessary if we have paging)   
  540.   
  541.             if(store.lastOptions && store.lastOptions.params) {   
  542.   
  543.                 store.lastOptions.params[store.paramNames.start] = 0;   
  544.   
  545.             }   
  546.   
  547.   
  548.   
  549.             // get fields to search array   
  550.   
  551.             var fields = [];   
  552.   
  553.             this.menu.items.each(function(item) {   
  554.   
  555.                 if(item.checked) {   
  556.   
  557.                     fields.push(item.dataIndex);   
  558.   
  559.                 }   
  560.   
  561.             });   
  562.   
  563.   
  564.   
  565.             // add fields and query to baseParams of store   
  566.   
  567.             delete(store.baseParams[this.paramNames.fields]);   
  568.   
  569.             delete(store.baseParams[this.paramNames.query]);   
  570.   
  571.             if (store.lastOptions && store.lastOptions.params) {   
  572.   
  573.                 delete(store.lastOptions.params[this.paramNames.fields]);   
  574.   
  575.                 delete(store.lastOptions.params[this.paramNames.query]);   
  576.   
  577.             }   
  578.   
  579.             if(fields.length) {   
  580.   
  581.                 store.baseParams[this.paramNames.fields] = Ext.encode(fields);   
  582.   
  583.                 store.baseParams[this.paramNames.query] = val;   
  584.   
  585.             }   
  586.   
  587.   
  588.   
  589.             // reload store   
  590.   
  591.             store.reload();   
  592.   
  593.         }   
  594.   
  595.   
  596.   
  597.     } // eo function onTriggerSearch   
  598.   
  599.     // }}}   
  600.   
  601.     // {{{   
  602.   
  603.     /**  
  604.  
  605.      * @param {Boolean} true to disable search (TwinTriggerField), false to enable  
  606.  
  607.      */  
  608.   
  609.     ,setDisabled:function() {   
  610.   
  611.         this.field.setDisabled.apply(this.field, arguments);   
  612.   
  613.     } // eo function setDisabled   
  614.   
  615.     // }}}   
  616.   
  617.     // {{{   
  618.   
  619.     /**  
  620.  
  621.      * Enable search (TwinTriggerField)  
  622.  
  623.      */  
  624.   
  625.     ,enable:function() {   
  626.   
  627.         this.setDisabled(false);   
  628.   
  629.     } // eo function enable   
  630.   
  631.     // }}}   
  632.   
  633.     // {{{   
  634.   
  635.     /**  
  636.  
  637.      * Enable search (TwinTriggerField)  
  638.  
  639.      */  
  640.   
  641.     ,disable:function() {   
  642.   
  643.         this.setDisabled(true);   
  644.   
  645.     } // eo function disable   
  646.   
  647.     // }}}   
  648.   
  649.     // {{{   
  650.   
  651.     /**  
  652.  
  653.      * private (re)configures the plugin, creates menu items from column model  
  654.  
  655.      */  
  656.   
  657.     ,reconfigure:function() {   
  658.   
  659.   
  660.   
  661.         // {{{   
  662.   
  663.         // remove old items   
  664.   
  665.         var menu = this.menu;   
  666.   
  667.         menu.removeAll();   
  668.   
  669.   
  670.   
  671.         // add Select All item plus separator   
  672.   
  673.         if(this.showSelectAll) {   
  674.   
  675.             menu.add(new Ext.menu.CheckItem({   
  676.   
  677.                  text:this.selectAllText   
  678.   
  679.                 ,checked:!(this.checkIndexes instanceof Array)   
  680.   
  681.                 ,hideOnClick:false  
  682.   
  683.                 ,handler:function(item) {   
  684.   
  685.                     var checked = ! item.checked;   
  686.   
  687.                     item.parentMenu.items.each(function(i) {   
  688.   
  689.                         if(item !== i && i.setChecked) {   
  690.   
  691.                             i.setChecked(checked);   
  692.   
  693.                         }   
  694.   
  695.                     });   
  696.   
  697.                 }   
  698.   
  699.             }),'-');   
  700.   
  701.         }   
  702.   
  703.   
  704.   
  705.         // }}}   
  706.   
  707.         // {{{   
  708.   
  709.         // add new items   
  710.   
  711.         var cm = this.grid.colModel;   
  712.   
  713.         Ext.each(cm.config, function(config) {   
  714.   
  715.             var disable = false;   
  716.   
  717.             if(config.header && config.dataIndex) {   
  718.   
  719.                 Ext.each(this.disableIndexes, function(item) {   
  720.   
  721.                     disable = disable ? disable : item === config.dataIndex;   
  722.   
  723.                 });   
  724.   
  725.                 if(!disable) {   
  726.   
  727.                     menu.add(new Ext.menu.CheckItem({   
  728.   
  729.                          text:config.header   
  730.   
  731.                         ,hideOnClick:false  
  732.   
  733.                         ,checked:'all' === this.checkIndexes   
  734.   
  735.                         ,dataIndex:config.dataIndex   
  736.   
  737.                     }));   
  738.   
  739.                 }   
  740.   
  741.             }   
  742.   
  743.         }, this);   
  744.   
  745.         // }}}   
  746.   
  747.         // {{{   
  748.   
  749.         <span
    分享到：
    | ExtJS实战(8)-CRUD+分页+复杂查询+排序
    评论
    发表评论

    您还没有登录,请您登录后再发表评论

相关推荐

    Extjs 富客户端技术

    这是一个关于ajax的框架， 是一个富客户端的技术，希望对大家有用！

    ExtJs实例，富客户端技术经典

    ExtJS初学者，学习的一个不错的例子，一看就懂，很不错的； ExtJS初学者，学习的一个不错的例子，一看就懂，很不错的； ExtJS初学者，学习的一个不错的例子，一看就懂，很不错的

    ExtJs3.0,客户端技术，与后台无关，界面美观

    ExtJs,客户端开发技术，以后可能会发展为主流客户端框架，界面非常美观，希望大家能够深入学习

    extJS ext 自学 富客户端

    extJS ext 自学 富客户端，掏钱自学extjs。

    extjs学习 分页后台处理

    extjs 富客户端界面设计 grid分页后台处理

    EXTJS4自学手册

    EXTJS4自学手册——EXT数据结构组件（proxy代理类之客户端代理） EXTJS4自学手册——EXT数据结构组件（proxy代理类之服务器端代理） EXTJS4自学手册——EXT数据结构组件（store） 三、Extjs布局 EXTJS4自学手册——...

    ExtJS2.0简明教程

    ExtJS 是一个很不错的Ajax 框架，可以用来开发带有华丽外观的富客户端应用，ExtJS 是一个用javascript 编写，与后台技术无关的前端ajax 框架。可以把ExtJS 用在.Net、Java、Php 等各种开发语言开发的应用中。教程...

    ExtJS快速入门指南

    javascript 写的 用于在客户端创建丰富多彩的 web 应用程序界面 ExtJS 可以用来开发 RIA Rich Internet Application 富互联网应用系统 的 开源 AJAX 应用框架 使用的开源协 议是 GPL ExtJS 是一个用 javascript 写...

    ExtJS布局之border实例

    资源名称：ExtJS布局之border实例内容简介：border布局是常见的布局样式，本文档中一个实际项目的示例，比较简单，仅供初学者参考。感兴趣的朋友可以过来看看。自动生成行号，支持checkbox全选，动态选择显示哪些列...

    掏钱学ExtJs完全版

    extjs是一套完整的富客户端解决方案，也因为功能完整，造成ext-all.js有400多k，请注意，这还是压缩后的大小，而且因为是基于js和css的功能实现，对客户端机器性能也有一定的要求，比如不支持ie6以下的版本。...

    基于Extjs 4.2的通用权限管理系统,通用后台模板,EF+MVC+Extjs 4.2

    您刚刚下载EnterpriseExtjs.rar中，包含WMC2.0-Client.zip文件，... 并且WMC2.0-Client.zip作为客户端开发框架，您是不需要写任何代码的，我们提供代码生成器帮助你实现基于EntityFramework+Extjs+MVC架构的快速开发。

    EXTJS案例源代码

    Extjs是一个富客户端的JS脚本Extjs是一个富客户端的JS脚本

    Extjs3.2可视化编辑器

    ExtJS是一个很不错的Ajax框架,可以用来开发带有华丽外观的富客户端应用,使得我们的b/s应用更加具有活力及生命力.ExtJS是一个用javascript编写,与后台技术无关的前端ajax框架.因此,可以把ExtJS用在.Net、Java、Php等...

    ExtJS2.0实用简明教程

    ExtJS是一个很不错的Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力。ExtJS是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、...

    extjs使用教程

    ExtJS 是一个很不错的Ajax 框架，可以用来开发带有华丽外观的富客户端应用，使得我 们的b/s 应用更加具有活力及生命力。ExtJS 是一个用javascript 编写，与后台技术无关的前 端ajax 框架。因此，可以把ExtJS 用在...

    extjs4.2.1

    extjs是个很好的js框架。里面含有好多的例子。你能绘制好多不同种类的图形。

    ExtJS 2.02版本

    ExtJS可以用来开发RIA也即富客户端的AJAX应用，是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端 ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs...

    RIA富客户端EXTJS4框架包

    最前版本的extjs4框架,包含大量示例以及框架源代码，方便学习掌握EXTJS最新精髓和架构思想。

    extjs3.1.1源代码

    extjs源代码用于开发客户端，并时界面更加的友好，此源代码是extjs3.1.1版本的，用户可以更好的学习

    extjs—chart柱形图 例子

    支持富客户端extjs技术 绚丽的报表图形

Magicbox
Global site tag (gtag.js) - Google Analytics