1. #1
    Sencha User
    Join Date
    Apr 2010
    Location
    Switzerland
    Posts
    37
    Vote Rating
    3
    Roman Töngi is on a distinguished road

      0  

    Default A filterbar plugin for grid panels.

    A filterbar plugin for grid panels.


    **A filterbar plugin for grid panels.**


    See http://homepage.hispeed.ch/filterbar for a live demo.


    **How to get it**


    To get the source code to include in your ExtJS 4.2 projects you can buy it using PayPal.


    **PayPal:** Amount: Euro 49.00 to: roman.toengi@hispeed.ch


    As soon as the payment has been obtained, the source code and API documentation will be sent to your email address. If you wish to receive the code to an email address other than the PayPal address, please leave a note in the PayPal message.


    **Licence information**


    - License does not expire for minor releases.
    - Can be used on unlimited sites
    - Source-code or binary products cannot be resold or distributed
    - Commercial use allowed
    - Can modify source-code but cannot distribute modifications (derivative works)


    A Sencha Architect Extension will be provided soon.


    **Description**

    The filterbar plugin is provided with a API documentation. The filterbar has locales for English, German and Italien. You can, however, easily add your own locale.


    A filter can be defined for each column header. The filters get rendered in a separate bar. Being implemented as a docked item,
    the filterbar can be displayed at the top above or below the grid's column headers as well as at the bottom of the grid's panel.

    By default, the filters are created automatically based on the column headers' types. A column header's config is extended by an
    attribute `filter` by means of which the column's filter can be customized.

    A context menu is provided for each filter which is configurable.

    The filterbar can be used locally or remotely. If used remotely, an array of filter objects is included in the operation params object.
    A filter object contains the following attributes:

    - `anyMatch` : `Boolean`
    - `caseSensitive` : `Boolean`
    - `comparison` : `String`
    - `condition` : `String`
    - `exactMatch` : `Boolean`
    - `field` : `String`
    - `format` : `String`
    - `type` : `String`
    - `value` : `Object`

    With such detailed information on each filter, a general routine for processing the filter data can be implemented on the server side.

    The filterbar is stateful, trying to store its filter values and corresponding menu options.

    The related grid gets a property *filterbar* for direct access to its filterbar.

    **Basic filterbar**


    {
    xtype: 'gridpanel',
    plugins: [
    {
    ptype: 'filterbar'
    }
    ]
    }

    **Filterbar above column headers**


    {
    xtype: 'gridpanel',
    plugins: [
    {
    ptype: 'filterbar',
    containerConfig: {
    weight: 0
    }
    }
    ]
    }

    **Filterbar at the bottom of the grid's panel**


    {
    xtype: 'gridpanel',
    plugins: [
    {
    ptype: 'filterbar',
    containerConfig: {
    dock: 'bottom'
    }
    }
    ]
    }

    **Configured filter (takes precedence over auto-generated filter)**


    {
    xtype: 'gridpanel',
    columns: [
    {
    xtype: 'gridcolumn',
    text: 'Sex',
    dataIndex: 'SEX',
    filter: {
    xtype: 'listfilter',
    store: [
    ['M', 'Male'],
    ['F', 'Female']
    ]
    }
    }
    ],
    plugins: [
    {
    ptype: 'filterbar'
    }
    ]
    }

    **Auto-filters disabled in general but enabled for individual columns**


    {
    xtype: 'gridpanel',
    columns: [
    {
    xtype: 'gridcolumn',
    text: 'Firstname',
    dataIndex: 'FIRSTNAME'
    },{
    xtype: 'gridcolumn',
    text: 'Name',
    dataIndex: 'NAME',
    filter: true // Enabling auto-filter for this column ('auto' would also do)
    }
    ],
    plugins: [
    {
    ptype: 'filterbar',
    autoFilters: false // Disabling auto-filters in general
    }
    ]
    }

    **Auto-filters enabled in general but disabled for individual columns**


    {
    xtype: 'gridpanel',
    columns: [
    {
    xtype: 'gridcolumn',
    text: 'Firstname',
    dataIndex: 'FIRSTNAME',
    filter: false // Disabling auto-filter for this column ('none' would also do)
    },{
    xtype: 'gridcolumn',
    text: 'Name',
    dataIndex: 'NAME'
    }
    ],
    plugins: [
    {
    ptype: 'filterbar'
    }
    ]
    }

    **Condition configuration**


    The value of the condition attribute, which is generally sent to the server, can be used in SQL queries for example.
    In this example, a database column `RETIRED` with stored values of 'Y', 'N' and `null` is supposed. Retired employees
    are represented with a value of 'Y', whereas still employed staff is stored as 'N' or `null`.

    {
    xtype: 'gridpanel',
    columns: [
    {
    xtype: 'checkcolumn',
    text: 'Retired',
    dataIndex: 'RETIRED',
    filter: {
    condition: function(filterbar, filterCfg) {
    if (filterCfg.value)
    return filterCfg.field + " = 'Y'";
    else
    return '(' + filterCfg.field + " <> 'Y' or " + filterCfg.field + ' is null)';
    }
    }
    }
    ],
    plugins: [
    {
    ptype: 'filterbar'
    }
    ]
    }

    **Writer configuration**


    In this example, a database column `DOB` is supposed, in which birth dates are stored as strings in the format 'YYYYMMDD'.
    Being a date filter, the filter object sent to the server can be adapted as is shown below:

    {
    xtype: 'gridpanel',
    columns: [
    {
    xtype: 'datecolumn',
    text: 'Date of birth',
    dataIndex: 'DOB',
    filter: {
    writer: function(filterbar, filterCfg) {
    filterCfg.type = 'string';
    filterCfg.value = Ext.Date.format(filterCfg.value, 'Ymd');
    return filterCfg;
    }
    }
    }
    ],
    plugins: [
    {
    ptype: 'filterbar'
    }
    ]
    }

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Nice work. Good luck on your returns.

  3. #3
    Sencha Premium Member
    Join Date
    Feb 2013
    Posts
    5
    Vote Rating
    -3
    cow_boy can only hope to improve

      0  

    Default


    49 Euro? You must be kidding man. Only one penny does that plugin deserve.

  4. #4
    Sencha Premium Member
    Join Date
    Feb 2013
    Posts
    5
    Vote Rating
    -3
    cow_boy can only hope to improve

      0  

    Default


    By the way, why do you sell your plugin? This is an open source community. Is money everything ?

Thread Participants: 2