1. #1
    Ext JS Premium Member ambience's Avatar
    Join Date
    Mar 2007
    Location
    Denver, CO
    Posts
    136
    Vote Rating
    0
    ambience is on a distinguished road

      0  

    Default Grid Filter (Plugin)

    Grid Filter (Plugin)


    Moderator edit: There's a 3.x version in svn now for those interested, click here.

    Example: http://ccinct.com/lab/filter-grid/

    I am excited to hear that a number of people have started using / extending the filters. If you have an extension (like some sort of panel based filter configuration) PM me with a link to the related thread and I will link it here. Thanks to every one who has helped bang out bugs and assisted newer users.

    Also, I would like to credit ControlPath, the company that pays for my time =) The filters were developed to support an ongoing effort to transition the product to a 100% Ext UI and they were kind enough to let me share the code with you guys.

    Server Side Code
    Due to copyright issues I cannot share my implementation of the server side code (written in Java), and the PHP is to entangled in a bigger framework / hacked together to share. If you have an implementation you would like to share, PM me with the files and I will link them here.

    PHP
    Ruby on Rails
    Python
    Grails
    Initial Release
    • Grid filters now function as a plugin for the grid. As a result you can use them in conjunction with custom views (like grouping).
    • List filters are now much more robust in that you can provide them with a Ext.data.Store to load their options the first time they are shown.
    • This version does not have a a dynamic loader included, read the source to find out where to put yours (documented).
    • The way filters are configured has changed ever so slightly.
    • Now 100% Ext (Prototype-free).

    Version 0.2
    • Local filtering can now be enabled by passing the 'local: true' as a config value
    • Fixed some of the filters setValue functions.
    • Stateful mode can now be enabled by passing a string value for the config option 'stateId'. This may be updated in the next Ext code push to store this information when the grid saves/restores its state. However, the events required are not part of the current beta (I think they are in SVN however)
    • Add an 'autoReload' field / config option that defaults to true. Set this to false if you wish to prevent the datastore from being reloaded when you make changes to the filters.

    Version 0.2.1 (Minor update, thanks for the feedback)
    Bug Fixes
    • Date filters will disable conflicting date ranges [Thanks hendricd]
    • Added missing super constructor line to Filter [Thanks hendricd]
    • Boolean filters now use uniqu radio group IDs (so you can have more then one!) [Thanks olive38]

    Enhancements
    • Added a 'serialize' event to the Filter class. Using this you can attach additional parameters to serialization data before it is encoded and sent to the server.
    • You can pass the GridFilters object as a plugin to the paging toolbar and it will reset the page to 1 whenever you update the filters.
    • Boolean filters take a defaultValue config parameter. Set this to null if you do not want either option to be checked by default.

    Version 0.2.2, 0.2.3, 0.2.4, 0.2.5
    Bug Fixes
    • Fixed an issue with numeric fields displaying "NaN" initially in RC1 [Thanks JeffHowden]
    • Fixed an issue with filter application in the absence of request options [Thanks JorisA]
    • Date format is now forwarded to the date selectors [Thanks hendricd]
    • Small bug fix with filters being activated before a load event on grids with the filters used as a plug in to the paging tool bar *inhale* [Thanks hendricd]
    • Fixed a global namespace leak. [Thanks hendricd]
    • Reload now cancels the deferred update. [Thanks ericwaldheim]
    • Local string filtering is now case insensitive . [Thanks robasi]

    Version 0.2.6
    Bug Fixes
    • Removed a console.log in applyState(), oops >.<

    Enhancments
    • The filter collection will now bind to the 'beforestaterestore' and 'beforestatesave' events in order to be stateful. Set your stateId on the associated grid.
    • Future versions will now include the version number in the header of GridFilters.js for your convenience

    Version 0.2.7 June 4th, 2008
    Enhancments
    • Add some localization support (post) [Thanks wm003]
    • Tweeked EditableItem to have better icon support (post) [Thanks AlxH]
    • Added green tinted column header graphics and CSS classes for filtered columns
    • Icons are now all defined as styles in the resources/style.css file. You'll need to link to this in order to have them and get the new column header style. (no more need for prototype changes)

    Version 0.2.8 August 22nd, 2008
    Enhancments
    • Refactored ListFilter.js to use a new Ext.ux.menu.ListMenu component.
    • I've included Ext.ux.menu.TreeMenu, I can't really offer allot of support for it, but it's what we use for tree filters.

    Bug Fixes
    • Fixed text selection and general carrot wonkyness in Firfox [Big Thanks to Steffen Hiller]
    • You can now use apostrophes in Firefox 3 o.O
    Attached Files

  2. #2
    Sencha User krycek's Avatar
    Join Date
    Jun 2007
    Posts
    96
    Vote Rating
    0
    krycek is on a distinguished road

      0  

    Default



    Perfect. I can't imagine a better way to do that.
    But I think I've found a bug, try to do as follow:
    1. Resize the width of one column making the last column not visible on the grid panel (a horizontal scrollbar will be shown)
    2. Go to the second page
    3. Create a filter in the "Visible" column to show just "No" visibles records

    After doing that I can't remove this filter anymore because the scrollbar is gone and the grid will no longer show any data because I'm on the second page that has no records.

    In this particulary case, going back to the first page after any filtering, solves the problem. But what if after setting a filter on the last column made the grid show no records? In this case I wouldn't be able to remove the filter anymore.

  3. #3
    Ext User ejetorix's Avatar
    Join Date
    Mar 2007
    Location
    Spain, EU
    Posts
    19
    Vote Rating
    0
    ejetorix is on a distinguished road

      0  

    Thumbs up


    Fantastic job Ambience.

    BTW, problems like krycek has noticed, are the reason for what i prefer a separate panel/region/whatever for filtering, instead of rendering it on columns menu.

    Thank you for porting it to 2.0 branch in so little time.

  4. #4
    Ext JS Premium Member Foggy's Avatar
    Join Date
    Apr 2007
    Location
    Switzerland
    Posts
    477
    Vote Rating
    0
    Foggy is on a distinguished road

      0  

    Default


    Excellent work, thanks for sharing

  5. #5
    Sencha User
    Join Date
    Jul 2007
    Location
    Moscow, Russia
    Posts
    295
    Vote Rating
    0
    6epcepk is on a distinguished road

      0  

    Default


    Waiting for beta-version =)
    Thanks!

  6. #6
    Ext JS Premium Member ambience's Avatar
    Join Date
    Mar 2007
    Location
    Denver, CO
    Posts
    136
    Vote Rating
    0
    ambience is on a distinguished road

      0  

    Default


    Quote Originally Posted by krycek View Post
    In this particulary case, going back to the first page after any filtering, solves the problem. But what if after setting a filter on the last column made the grid show no records? In this case I wouldn't be able to remove the filter anymore.
    I agree that this is a problem. However I think that it may also be a small shortcoming in the base grid widget. I believe that a scrollbar should be present if the headers exceed the current view port and there is no data. I may be able to convince the paging tool bar to go to the first page by firing the appropriate events on the store when the filter configuration has changed and will look into that.

    As a small work around, you could add a 'clear filters' button to your paging tool bar and bind its handler to filters.clearFilters(). If you wanted to get even more fancy, you could build a menu button that had items for each of the configured filters. I will add a 'filteradded' event to the GridFilters to help facilitate this.

    Thanks for the feedback.

  7. #7
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    Great work ambience. Thank you for sharing, I am sure there are many who will find this useful!
    Jack Slocum
    Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum
    jack@extjs.com

  8. #8
    Sencha User
    Join Date
    Mar 2007
    Posts
    761
    Vote Rating
    1
    franklt69 is on a distinguished road

      0  

    Default


    very cool the filter, is there any way to do filter in the side client only for instance or it is only to server side?

    regards
    Frank

  9. #9
    Ext User
    Join Date
    Sep 2007
    Posts
    1
    Vote Rating
    0
    osamaao is on a distinguished road

      0  

    Default I need help

    I need help


    Hello,

    Thanks for this nice filter feature.
    I have a question please, I am new to extjs and I am trying to make an example running, I am using your filter-grid, DWR and Spring.

    The problem is that I can't read the filter parameter on the Java side.. I am not sure of the parameter name. shouldn't it be "filters"?

    Appreciating your help.

  10. #10
    Ext JS Premium Member ambience's Avatar
    Join Date
    Mar 2007
    Location
    Denver, CO
    Posts
    136
    Vote Rating
    0
    ambience is on a distinguished road

      0  

    Default


    By default the field is 'filter', with out the 's'. But that is configurable with the 'paramPrefix' confg option. For example:
    Code:
        plugins: new Ext.ux.grid.GridFilters({paramPrefix: 'omgBearIsDriving'});
    Additionally, the filter param will be expressed as an array of objects for example:
    Code:
    filter[0][data][type]=string
    filter[0][data][value]=Geek
    filter[0][field]=name
    filter[1][data][type]=list
    filter[1][data][value]=medium,large,extra large
    filter[1][field]=size
    If you wish to change how the data is structured and sent to the server you can either extend GridFilters and overload the 'buildQuery' function or pass a new function as config option:

    Code:
        plugins: new Ext.ux.grid.GridFilters({
            buildQuery: function(filters){
                    var p = {};
    		for(var i=0, len=filters.length; i<len; i++){
                        // Custom filter serialization
    		}
    		
    		return p;
            }
        });

Thread Participants: 312

  1. jack.slocum (1 Post)
  2. JeffHowden (8 Posts)
  3. VinylFox (1 Post)
  4. ericwaldheim (1 Post)
  5. franklt69 (2 Posts)
  6. galdaka (5 Posts)
  7. jay@moduscreate.com (1 Post)
  8. ejetorix (1 Post)
  9. Wolfgang (1 Post)
  10. alien3d (1 Post)
  11. tobi (1 Post)
  12. HarryC (1 Post)
  13. vmorale4 (3 Posts)
  14. gmoney (1 Post)
  15. ReyBango (1 Post)
  16. mystix (5 Posts)
  17. fangzhouxing (1 Post)
  18. cobnet (7 Posts)
  19. mike1993 (1 Post)
  20. JorisA (9 Posts)
  21. krdavis (1 Post)
  22. tarnawska (3 Posts)
  23. simonellistonball (1 Post)
  24. Foggy (1 Post)
  25. Illiarian (3 Posts)
  26. cocorossello (4 Posts)
  27. rlieving (2 Posts)
  28. violinista (1 Post)
  29. Fabyo (1 Post)
  30. efiebba (2 Posts)
  31. notjoshing (5 Posts)
  32. akannu (2 Posts)
  33. Troy Wolf (7 Posts)
  34. AlxH (8 Posts)
  35. pantarhei (1 Post)
  36. tobiu (5 Posts)
  37. kesteb (5 Posts)
  38. ajaxE (11 Posts)
  39. robasi (2 Posts)
  40. dandfra (1 Post)
  41. ethan (1 Post)
  42. krycek (1 Post)
  43. ronnin (1 Post)
  44. Twain (2 Posts)
  45. Phunky (2 Posts)
  46. ostghost (2 Posts)
  47. tdikarim (2 Posts)
  48. chernomorez (6 Posts)
  49. 6epcepk (6 Posts)
  50. marceloprietos (1 Post)
  51. mjlecomte (55 Posts)
  52. andrei.neculau (2 Posts)
  53. catof (3 Posts)
  54. rednix (1 Post)
  55. george.antoniadis (1 Post)
  56. MatjazH (1 Post)
  57. Zyclops (5 Posts)
  58. gfernandez (2 Posts)
  59. boyjunqiang (2 Posts)
  60. hendricd (106 Posts)
  61. jelt (5 Posts)
  62. nonamebrand (1 Post)
  63. sidaliextjs (1 Post)
  64. watrboy00 (2 Posts)
  65. hermeslm (1 Post)
  66. pic_Nick (3 Posts)
  67. cherbert (1 Post)
  68. elrems (1 Post)
  69. Clever Cutter (4 Posts)
  70. kfuglsang (1 Post)
  71. aresot (1 Post)
  72. stradej (1 Post)
  73. Shmoo (4 Posts)
  74. evilized (1 Post)
  75. reaper.br (9 Posts)
  76. froamer (3 Posts)
  77. GraemeBryce (2 Posts)
  78. osamaao (1 Post)
  79. burned (1 Post)
  80. hb562100 (1 Post)
  81. lyardson (1 Post)
  82. lupin85.luca (5 Posts)
  83. thatcoder (4 Posts)
  84. bhomass (1 Post)
  85. jojo_i (3 Posts)
  86. wm003 (10 Posts)
  87. debutant (2 Posts)
  88. peio72 (4 Posts)
  89. b0c1 (1 Post)
  90. highmemory (1 Post)
  91. nedkopenev (1 Post)
  92. durlabh (1 Post)
  93. deependhulla (1 Post)
  94. elDub (2 Posts)
  95. fendrikat (1 Post)
  96. olive38 (5 Posts)
  97. Morris (1 Post)
  98. nnextjs (1 Post)
  99. smartlit (1 Post)
  100. paliwalg (2 Posts)
  101. maureend (1 Post)
  102. crxtech (4 Posts)
  103. alexi (1 Post)
  104. Sesshomurai (4 Posts)
  105. oldroy (1 Post)
  106. sjerry (1 Post)
  107. KGL (2 Posts)
  108. cbandes (1 Post)
  109. vertigoMX (2 Posts)
  110. tfrugia (2 Posts)
  111. stevets (1 Post)
  112. DevNullBinary (1 Post)
  113. rfjacobsen (1 Post)
  114. gameshints (1 Post)
  115. arya009 (2 Posts)
  116. adinata (4 Posts)
  117. sanjshah (2 Posts)
  118. jlagedo (1 Post)
  119. 1900 (1 Post)
  120. eliasp (4 Posts)
  121. sethladd (2 Posts)
  122. mariposil (4 Posts)
  123. dearsina (6 Posts)
  124. plima (1 Post)
  125. edweb (1 Post)
  126. caturstudio (1 Post)
  127. RacingTomcat (1 Post)
  128. larowlan (2 Posts)
  129. marco76 (1 Post)
  130. dterle (1 Post)
  131. julienp (2 Posts)
  132. franck34 (1 Post)
  133. calavera (6 Posts)
  134. markshih (1 Post)
  135. dmhost (1 Post)
  136. LeonardoAP (7 Posts)
  137. mikeasi (5 Posts)
  138. ybshyz (1 Post)
  139. basshcm (1 Post)
  140. mrollins (5 Posts)
  141. Ant1105 (1 Post)
  142. sinma (1 Post)
  143. mfrancey (7 Posts)
  144. zonereseau (1 Post)
  145. mjhaston (12 Posts)
  146. enterco (2 Posts)
  147. mattb (1 Post)
  148. nunziofiore (6 Posts)
  149. denkoo (1 Post)
  150. rafeekphp (1 Post)
  151. luv2hike (3 Posts)
  152. drieraf (2 Posts)
  153. tmartinez (3 Posts)
  154. techwolf (1 Post)
  155. sabiola (2 Posts)
  156. marmots (1 Post)
  157. jarofclay (2 Posts)
  158. snow (1 Post)
  159. spectrus (1 Post)
  160. razvanioan (5 Posts)
  161. johnsbrn (5 Posts)
  162. xp743 (1 Post)
  163. jbd007 (3 Posts)
  164. mikemc (1 Post)
  165. technicaltitch (1 Post)
  166. steppinrazor (4 Posts)
  167. alconeijr (3 Posts)
  168. Steffen Hiller (5 Posts)
  169. keckeroo (1 Post)
  170. jineshkunnath (1 Post)
  171. reminder (3 Posts)
  172. Arthur.Blake (1 Post)
  173. manilodisan (1 Post)
  174. Chemist (1 Post)
  175. tuxz0r (1 Post)
  176. azbok (5 Posts)
  177. pil0t (1 Post)
  178. Treefrog (1 Post)
  179. polgara (1 Post)
  180. Remy (8 Posts)
  181. nizarsm (2 Posts)
  182. cesarwbr (1 Post)
  183. m0nu (1 Post)
  184. FireGlow (1 Post)
  185. jrh (1 Post)
  186. vladok (1 Post)
  187. el_dark (1 Post)
  188. Canard64 (1 Post)
  189. radustefan (1 Post)
  190. cgs1999 (1 Post)
  191. joshjdevl (1 Post)
  192. eleseint (1 Post)
  193. Efex (2 Posts)
  194. Rotomaul (1 Post)
  195. renoye (3 Posts)
  196. mahendragayatri (1 Post)
  197. SoreGums (3 Posts)
  198. chrisevans123 (1 Post)
  199. businessman332211 (37 Posts)
  200. Michael Reach (1 Post)
  201. kristalgic (1 Post)
  202. wiznia (1 Post)
  203. imnphd (1 Post)
  204. gido.carper (1 Post)
  205. gxt (2 Posts)
  206. sami_user (5 Posts)
  207. martinorth (1 Post)
  208. benmclendon (1 Post)
  209. crackrock (1 Post)
  210. Bodom78 (3 Posts)
  211. shahram (2 Posts)
  212. jjshoe (7 Posts)
  213. robertp42 (2 Posts)
  214. nicola_java (1 Post)
  215. paulwang727 (1 Post)
  216. mcantrell (1 Post)
  217. Huuuze (1 Post)
  218. irwanex (1 Post)
  219. ddouden (1 Post)
  220. skaue (3 Posts)
  221. Bucs (1 Post)
  222. kinchyle (1 Post)
  223. foxmarco (1 Post)
  224. ralfhammer (1 Post)
  225. Finity (1 Post)
  226. dmolesky (1 Post)
  227. dreas (1 Post)
  228. oliverseitz (1 Post)
  229. Wohlrajh (1 Post)
  230. phola (2 Posts)
  231. cvasilak (1 Post)
  232. quen567 (2 Posts)
  233. youdie (1 Post)
  234. cmschick (3 Posts)
  235. SunWuKung (1 Post)
  236. rickystra (2 Posts)
  237. inptisto (1 Post)
  238. extjs_new (1 Post)
  239. igor_vlad (1 Post)
  240. jeanvincent (1 Post)
  241. ScottLoney (1 Post)
  242. axpa (1 Post)
  243. rondinos (1 Post)
  244. dgubber (1 Post)
  245. schturdark (1 Post)
  246. MehdiSZ (2 Posts)
  247. Datagenn (1 Post)
  248. Mr. Hibernate (1 Post)
  249. geo_cris_ro (1 Post)
  250. freepopo (1 Post)
  251. leopku (1 Post)
  252. zyon (2 Posts)
  253. azaqero (2 Posts)
  254. spiderweb (2 Posts)
  255. LeviOu (1 Post)
  256. zkhalid (3 Posts)
  257. puyngke (1 Post)
  258. IrishSitar (1 Post)
  259. Daina (1 Post)
  260. heho2495 (1 Post)
  261. Andreas B. (2 Posts)
  262. chaoszcat (3 Posts)
  263. a.ti (2 Posts)
  264. coriolis (4 Posts)
  265. Thomas Triplet (3 Posts)
  266. thiner (1 Post)
  267. arkrohne (3 Posts)
  268. The Transporter (2 Posts)
  269. msinn (8 Posts)
  270. euphORIA (4 Posts)
  271. maznaz (1 Post)
  272. jankshtt (1 Post)
  273. small dragon (1 Post)
  274. msubbareddy (1 Post)
  275. djarquin (3 Posts)
  276. untwist (1 Post)
  277. xrx215 (1 Post)
  278. scblue (1 Post)
  279. jmilton59 (2 Posts)
  280. pbuser (1 Post)
  281. pmdarrow (1 Post)
  282. zozzi (1 Post)
  283. fabsen2102 (1 Post)
  284. Ebpo (1 Post)
  285. alexpotemkin (1 Post)
  286. Reimius (5 Posts)
  287. ebinfo (2 Posts)
  288. kellyjohn.carney (1 Post)
  289. abed_216 (1 Post)
  290. warmi01 (1 Post)
  291. Dmoney (1 Post)
  292. jago7372 (1 Post)
  293. softwareengineer (1 Post)
  294. DBorrega (1 Post)
  295. luisoswaldo (2 Posts)
  296. vrakesh_20 (1 Post)
  297. Skelv (2 Posts)
  298. israel.galan (5 Posts)
  299. pamelablalock (1 Post)
  300. pramodkhare (1 Post)
  301. EDFGRENOBLE (2 Posts)
  302. norbe (1 Post)
  303. Shobhit Rastogi (1 Post)
  304. hachie (1 Post)
  305. budaxlingga (2 Posts)
  306. ing.amdangelo (4 Posts)
  307. donremigio (1 Post)
  308. vbreader (1 Post)
  309. ecko (1 Post)
  310. tksko (1 Post)
  311. avorobjovs (1 Post)
  312. cleydsonjr (1 Post)
Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi