My account

ExtJS Grid MultiSearch Plugin

Description…

The plugin adds a row of configurable form fields below the grid header where the filter values can be typed or selected. As user types the desired values, or on pressing enter, the grid store gets filtered to show only the matching records.

Live Demo

Main Features

[wp_eStore_saki_add_to_cart id=4]

Versions

Version 2.2.2 for Ext 5.x – 27. February 2015

Version 2.2.0 for Ext 5.x – 7. December 2014

Version 2.1.2 for Ext 5.x – 16. October 2014

Version 2.0.0 for Ext 5.x – 11. September 2014

While version 1 of MultiSearch plugin worked in Ext 5, it was actually ported version designed and written for Ext 4. That limited full leverage of new MVVM architecture that allows configuration without initComponent.

Version 2 has been designed from the ground up with Ext 5 in mind. It removes the aforementioned limitations so that the store can be bound to viewmodel. The other configuration patterns such as initComponent or direct config still work.

Furthermore, grid reconfigure is supported.

Version 1.0.0 for Ext 4.x – 12. April 2014

Product Images

Note: These images show version 1.0.0

Design Goals

Many business applications store a huge number of records (thousands, millions) in the server databases what makes it difficult to present them to users. Standard paging grids or infinite scrolling grids do not solve the problem. Users usually want to find one or a few related records to work with.

While core Ext has a filtering plugin, it is somewhat awkward to use as the user needs many clicks to enter a filtering value. Also, the effective values are not directly visible in the filtered grid.

So the main goal was to provide easy-to-use, straightforward user interface with the minimum number of user actions needed to enter and see the filtering values.

For developers, the plugin must be easy to configure, however, advanced configurations must be possible.

[wp_eStore_saki_add_to_cart id=4]

Quick Start Guide

  1. Extract the downloaded zip file anywhere in your http server accessible folder
  2. Navigate to http://localhost/where-you-unzipped/saki-grid-multisearch/docs
  3. Follow the instructions in the Getting Started Guide

Using Ext Grid MultiSearch Plugin Video

Known Problems

None.

Roadmap

[su_author_box]

40 Responses

  2. there are problems with version 6 when moving columns or during a horizontal scroll of the grid.

    When will the upgrade to version 6 ext?
    Thanks a lot.

    2. I plan to port it to Ext 6, the only problem is that I’m now up to my ears in a project that takes 120% time from me. Hopefully I find some time for fixing the Ext 6 compatibility issues within 2-3 weeks.

      3. Dear Saki,

        Please be honest and tell us to find another way to go if you don’t think to deal with Ext6 update. We are in a desperate situation since we are facing with incompatibilities and losing our reputation against our customers. :-(((((

        Regards,
        Rozan

  3. Hello Saki,

    I have been using it without any problem in ExtJs 5 but I am noticing some problem while using it with ExtJs 6. I know you clearly stated the compatibility. Are you planing to release a new version for ExtJs 6?

    Thanks.

  4. Hi there,

    Congratulations on all your hard work.
    I played a little bit with the example and I noticed a small behavior glitch. These are the steps to reproduce it :
    – set it to grouped headers so the vertical scroll appears
    – scroll down
    At this point if you scroll to the right you will notice that the grid automatically scrolls to the top.

    Danny

    1. Danny, I cannot reproduce it in Chrome 43@Mac OS X 10.10.4. No scrollbar appears in this combination. Anyway, I do not think it’s a problem of the plugin. Normally I would set the height of the grid taller than necessary for one page to avoid any mis-alignment/mis-sizing problems.

      1. Hi Saki,

        It’s not an issue with the grid within the page, the issue seems to be with the grid view. When the view has scrollbars then you can see it happen. I’m on Windows 7 and it seems to be present on every browser : Chrome, IE, Safari, Firefox.

        Danny

        1. Yes, horizontal scrolling causes the vertical scrolling to reset to the top. Do you think/test if it is the problem of MultiSearch plugin or the Ext grid itself?

          Still, in real life, I would make the grid higher to prevent the vertical scrollbar from appearing.

          2. It should also work with buffered grids but it was invented to get fast to only a few records so paging or buffered, both give user too many records.

            Thanks for the info on scrolling, I’ll test/fix it when porting to Ext 6.

  5. I have bought plugin and I’m trying to use it in ExtJS 5.1.1 but plugin isn’t sending operator param to server. I tried to use parseOperator but it doesn’t help. The same is with type params, when sing standard ExtJS filter it is sending operator=”like” type=”string”.

    1. Ext 5.1.1 cannot be the sole reason of the problem because GMS runs fine against it – see this example that runs against 5.1.1.451.

      There must be something else wrong. Do you use some overrides? Does the packed example work with 5.1.1?

      1. Example works, I studied this example and I noticed one difference – filterField is put in Model column, where I put filterField in Grid Column (our old plugin for Ext 4 had filter config n grid column).

    2. Even if I set parseOperator to false Ext.saki.grid.MultiSearch in package source and build whole package with sencha package build multisearch is acting like parseOperator was set to true. More over in Sencha Architect parseOperator is not available, where other plugin optoins are present.

        1. Ok, but I think I know where was my mistake. It was old habits from Ext.ux.grid.FilterBar which only needed setting filter field in each grid column. Even store filters wasn’t needed – they were created automatically by plugin. I think this is missing and it cause grid plugin not sending operator field in POST. I will add filters to store tomorrow and let you know.

  6. Hi Saki,

    i just bought your MultiSearch plugin and i am using for extjs 4.2.3. the download link provided is version 2.2.2. does it work with extjs 4.2.3? if so, how do i use your plugin into my simple grid/store page as per the stock examples and i am not using sencha architect or any MVC model.

        1. The plugin extends Ext.container.Container so hide and show methods should work, however, I haven’t tested it. I any case, I’ll test and implement it if necessary in the next release.

          2. I need to be able to show and hide the multisearch filter bar in order to maximize grid listing real estate when not filtering is not needed, which is most of the time.

          5. I’ve just tried grid.getFilter().setVisible(false/true) and it seems to work. Only border between header and grid body is missing – that can be easily fixed by an appropriate css.

  7. If i use filterField like

    filterField: {
    {xtype: ‘combobox’,
    store: ‘mystore’,
    valueField: ‘value’,
    forceSelection: true,
    queryMode: ‘local’,
    typeAhead: true}
    } than in Sencha Architect i get the error:

    Framework Error: Cannot call method ‘on’ of undefined

    if i comment out the store every is fine.

    It seems that this is cause Ext.widget(cfg) is called and this
    call Ext.StoreManager.lookup(‘mystore’), at Designtime in Sencha Architect
    the StoreManager seems to be empty.

    Any hints?

    1. Most likely you need the store to be defined and included in stores:[] array of Application. Also check that storeId matches. If you add a store to stores like “MyApp.Store.MyStore” then the storeId will be exactly “MyApp.Store.MyStore” (without quotes) so your combo should be configured with store:”MyApp.Store.MyStore”.

      I do not use Architect (only to design complex layouts, then copy&paste into a file in IDE) so I haven’t tested it.

  8. Is there any changelog available for the MultiSearch Plugin Version 2.2.2?

    Also the extension file for the MultiSearch Plugin in Sencha Architect 3.1 doesn´t work anymore after a upgrade from the Library 5.0 to 5.1.

    1. Michael,

      did you really download version 2.2.2? Because that Architect package version supports also, Ext 5.1. If you’ve upgraded Architect to 3.2, you have to re-install the *.aux packages.

      If you still have troubles, email us to learn @ extjs . eu

      Best,
      Saki

  9. Hi Saki,

    I know that I can use other field types than the default textfield one. However, can I also use those other field types, like number or date, with the parseOperator feature ?

    For example, can I input “>= 01/01/2015” in a date field to filter dates of year 2015 ?

  10. Hello Saki,
    we bought the plugin a couple of days ago and i have some questions about configuration of the filterfields. We filter our stores remote. The problem is, that i don’t get the operator (like, in) in the request. Do i have to configure it. As i see, it works in your example here.

    1. André,

      from the documentation:

      parseOperator : String

      Set it to false to not parse operator from the user-typed value. Normally, operator is sent to the server separate from the value, however, if you use the plugin with Ext 4.x, or if your server parses operators itself, set parseOperator to false.

      Defaults to: true

      and

      operatorRe : RegExp

      Regular expression of recognized operators

      Defaults to: /^(=|!=|<=|>=|<|>|in |like )/

      That says, in essence: If the operator parsing is not disabled then the user value is matched against the above regular expression and if an operator matches then it is set as a part of filters.

      Hence, if the user does not type anything of the above at the beginning of the filter value then no operator is sent. If you need something really special, then override parseUserValue method.

      Hope it helps,
      Saki

      1. Thanks Saki,

        that helped a lot to solve my problem. I didn’t get that parseOperator set to false was needed to turn off the “normal” behavior of your extended operator functionality.

        Bye and thank you for your quick response,
        André

  11. You can bind store, actually, the example packaged in the download zip uses store defined in viewmodel and bound to the view – the grid itself.

    Or you mean other kind of binding?

  13. Hi.
    I use ExtJs Grid MultiSearch Plugin with extjs 5 whitch has powerfull bind features.
    I try to bind strone to combobox from ViewModem without success with error: “Cannot modify ext-empty-store”.

    My filterField config:
    filterField:{
    xtype:’combobox’,
    editable:false,
    displayField:’name’,
    valueField:’value’,
    publishes:[‘value’],
    value: ‘Active’,
    bind:{
    store:'{statuses}’
    }
    }
    The same code work perfect in tbar section.

  14. Saki,
    I just bought your ExtJs Grid MultiSearch Plugin. I am using it with Ext 4.2x. I am using Sencha Architect. I loaded the .aux file via the Extensions tool in the toolbox. The plugin loads fine. When I drag the grid multisearch plugin to the grid panel, it loads. I can see it in the grid. But all of the columns are disabled. I don’t see where I can set the configs to enable or disable a column. Can you help me? I have a deadline I am trying to meet and using your multisearch plugin will save me a ton of time. Thanks.

    1. Hello Johnny,
      briefly: use filterField config option to configure the form fields to be displayed in the filter row. The comprehensive answer as to the other config options lies in the documentation that you can access after you unpack the normal, non-architect version into your http-server accessible directory.

      1. Thanks Saki,

        In Architect you add the filterField as a custom Property. I thought I was looking for a filterField property. I had to add it. It was simple. But in Architect sometimes simple is hard to see. MultiSearchworks great!
        I have one additional problem that I hope you can help me correct. If I choose the CheckBox Selection Model in the grid panel, a checkbox is placed in the first column. This confuses the multiSearch plug in. MultiSearch filter fields don’t shift when the Selection Model is added. So the 1st MultiSearch column now affects the second column, the second affects the third and so on. Could you take a look at this? Thanks

  15. Hi Saki:

    I just buy your add-ons ExtJS Grid MultiSearch Plugin. It works with Ext 5.0.1, but with last nightly build (ext-5.0.2.1451) the filter row is frozen when the grid is scrolled horizontally. I know that is not Ext stable version, just wondering if you know something about that (if is a Extjs bug or if you have to make some change).

    Thanks

    1. I believe I’ve already answered your e-mail question on this, nevertheless, I’ll answer it here for all. It is not feasible to keep track with nightly builds of potentially unfinished and buggy library with fixing, packaging and distributing these plugins and extensions.

      Once a stable version of Ext will be released, we’ll do our homework and, if the plugin won’t optimally work, we fix it and will release new version.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2024 LearnfromSaki

Terms and conditions

Licensing

PRIVACY POLICY

Aariadne Solutions, s.r.o.

Enter your username and password to log into your account. Don't have an account? Sign up.

Want to collaborate on an upcoming project?