Our blazing fast Grid component built with pure JavaScript


Post by zhenchai »

Hello guys, I am new on Ext JS. I did found the Ext JS modern toolkit 7.4 did have the grid filter bar, But after do some research on the Ext JS API Docs and online, the ExtJS 7.4 filter bar didn't come with the date and time filtering which our system was having that features. And also the modern toolkit didn't come with the pagination toolbar by buttons but not the slider pagination.

So my question is can i know that the Bryntum Grid have the Date Time Column Filter bar and the buttons pagination toolbar on the modern toolkit 7.4 Ext JS.

If can someone provide me the documentation to implement Bryntum Grid to Ext JS modern toolkit will be appreciate a lot, Thanks in advance :)

*have attached the example of the date time filter bar

Attachments
Example of the date time filter bar on our current system
Example of the date time filter bar on our current system
Screenshot 2021-08-27 143812.png (28 KiB) Viewed 1493 times
Example of the date time filter bar on our current system
Example of the date time filter bar on our current system
Screenshot 2021-08-27 143338.png (22.86 KiB) Viewed 1494 times

Post by arcady »

If you are asking how to do things w/ Ext JS Grid (https://docs.sencha.com/extjs/7.4.0/modern/Ext.grid.Grid.html). Sorry we can't help ..we are not much of Ext JS experts either. :)

And if you mean using Bryntum Grid in an Ext JS app then you can change a column filtering UI by overriding https://bryntum.com/docs/grid/#Grid/feature/Filter#function-showFilterEditor method of Grid filter feature.


Post by zhenchai »

Thanks for your reply Arcady, is there any clearer documentation or blog that can show how to implement the Bryntum Grid to Ext JS except this https://www.bryntum.com/blog/integrating-the-bryntum-scheduler-in-an-ext-js-modern-application/

Thanks in advance :)


Post by saki »

The above blog post is all what we have published on the topic and it is most comprehensive article I know about. It is a good idea to read the source code of https://bryntum.com/examples/grid/extjsmodern/ that complements it and shows the complete code of a workable integration.

It is also necessary to get understanding of MVVM architecture of ExtJS that this demo uses. There are pretty good articles on that at https://docs.sencha.com/extjs/7.4.0/guides/application_architecture/application_architecture.html.


Post by zhenchai »

Thanks for the reply, I have got it to make the Bryntum Grid on Ext JS

Can I know is it possible to make the filter bar type one grid is using the date time filter? I saw the https://bryntum.com/docs/grid/#Core/widget/DateTimeField on API docs but is for the form field not the filter bar...
Is it able to use it on the filter bar and filter with the time and date?

I'm new on it, so please help me to clarify it. Thank you


Post by saki »

Yes, DateTimeField can be used in FilterBar. You can test it in Grid/examples/filterbar/app.js:

import '../_shared/shared.js'; // not required, our example styling etc.
import Grid from '../../lib/Grid/view/Grid.js';
import '../../lib/Grid/column/NumberColumn.js';
import '../../lib/Grid/column/DateColumn.js';
import '../../lib/Grid/feature/QuickFind.js';
import '../../lib/Grid/feature/Stripe.js';
import Toast from '../../lib/Core/widget/Toast.js';
import DataGenerator from '../../lib/Core/helper/util/DataGenerator.js';
import '../../lib/Core/widget/DateTimeField.js';

const cityCombo = {
    type         : 'combo',
    multiSelect  : true,
    valueField   : 'name',
    displayField : 'name',
    cls          : 'city-combo',
    chipView     : {
        iconTpl : () => '<i class="b-icon b-fa-city"></i>'
    },
    listItemTpl : ({ name }) => `<i class="b-icon b-fa-city"></i>${name}`,
    picker      : {
        cls              : 'city-list',
        allowGroupSelect : false
    },
    store : {
        idField  : 'name',
        groupers : [
            { field : 'region', ascending : true }
        ],
        data : [
            { name : 'Stockholm', region : 'Europe' },
            { name : 'Barcelona', region : 'Europe' },
            { name : 'Paris', region : 'Europe' },
            { name : 'Dubai', region : 'Middle East' },
            { name : 'Istanbul', region : 'Middle East' },
            { name : 'Riyadh', region : 'Middle East' },
            { name : 'New York', region : 'US' },
            { name : 'San Francisco', region : 'US' },
            { name : 'Washington', region : 'US' },
            { name : 'Moscow', region : 'Russia' },
            { name : 'St Petersburg', region : 'Russia' }
        ]
    }
};

const grid = new Grid({
    appendTo : 'container',

    features : {
        filterBar : {
            compactMode : false,
            filter      : { property : 'city', value : 'Paris' }
        },
        stripe    : true,
        quickFind : true
    },

    columns : [
        {
            text  : 'Name (custom)',
            field : 'name',
            width : 150,
            // This column has a custom filtering function that matches the first letter in each word (JBA -> John B Adams)
            filterable({ value, record }) {
                const matches = record.name.match(/\b(\w)/g);
                return matches ? matches.join('').startsWith(value) : false;
            }
        },
        { text : 'Age', field : 'age', width : 100, type : 'number' },
        {
            text       : 'City',
            field      : 'city',
            flex       : 1,
            editor     : cityCombo,
            filterable : {
                filterField : cityCombo,
                filterFn    : ({ record, value }) => !value.length || value.includes(record.city)
            }
        },
        {
            text       : 'When',
            field      : 'start',
            flex       : 1,
            type       : 'date',
            filterable : {
                filterField : {
                    type : 'datetimefield'
                }
            }
        },
        // This column has filtering turned off
        { text : 'Team (not filterable)', field : 'team', flex : 1, filterable : false }
    ],

    data : DataGenerator.generateData(100),

    tbar : [
        {
            type        : 'button',
            ref         : 'useCompact',
            text        : 'Use compact mode',
            icon        : 'b-fa-square',
            pressedIcon : 'b-fa-check-square',
            toggleable  : true,
            onToggle    : ({ pressed }) => {
                if (pressed) {
                    Toast.show({
                        html    : 'Compact mode - Click a column header and type to filter',
                        timeout : 5000
                    });
                }
                grid.features.filterBar.compactMode = pressed;
            }
        },
        {
            type     : 'button',
            ref      : 'removeAll',
            text     : 'Remove all filters',
            icon     : 'b-fa-times',
            onAction : () => grid.store.clearFilters()
        }
    ]
});

Post by zhenchai »

Thanks for your reply Saki,

After I have tested to implement the https://bryntum.com/docs/grid/#Core/widget/DateTimeField to the https://bryntum.com/docs/grid/#Grid/feature/FilterBar it was able to display on there but my use case it to filter it with date range and time range.

I have found some issue ticket on your https://github.com/bryntum/support/issues?q=range+filter but it still not yet be solve.

My question is can it be date time field on filter bar, filter it with date time range?


Post by saki »

I have added comment with your request to this ticket: https://github.com/bryntum/support/issues/2289

If you want to expedite its implementation, you may want to consider Feature Sponsorship.


Post by zhenchai »

Thanks for your help Saki, hope to get some good news, if it workable will ask my team to consider it, Thanks :)


Post by zhenchai »

Hi, I have some doubt on the https://www.bryntum.com/docs/grid/#Core/widget/PagingToolbar,
is there any ways to make the AjaxStore loaded in Ext JS, like documentations to refer? I have saw the example of the https://www.bryntum.com/examples/grid/paged/ and https://www.bryntum.com/examples/grid/php-paged/. They are used different ways to make the paging toolbar works

May I know how to implement the AjaxStore with the Ext JS? I wanted to have the paging toolbar on the Bryntum Grid in Ext JS.


Post Reply