Grid filtering using Sencha Architect

[iplanit]

Hi,

As many other people I am trying to implement the grid filtering using this plugin:

http://www.sencha.com/blog/extended-...n#comment_form

That comes in the examples of ExtJS4.1 inside "ux".

There is an example of that working:

http://dev.sencha.com/deploy/ext-4.0...ter-local.html

But as most of the examples it doesn't use MVC or Sencha Architect.

I tried to use it in Sencha Architect in the last version, that is: 2.1.0 build 637.

I found some problems:

1. I am using groupingfeature and summaryfeature so I already have a "features" configuration for the grid, plus it is read-only, I just can add the components that are available. Filtering is none of them.
2. After adding the
   

   requires: [
           'Ext.ux.grid.FiltersFeature'
       ],

I had to copy the ux folder in my application so now the application finds the javascript required and loads the application.
appstructure.png

According to the example, the way to add the filtering to a grid is like the following:

var filters = {
        ftype: 'filters',
        // encode and local configuration options defined previously for easier reuse
        encode: encode, // json encode the filter query
        local: local,   // defaults to false (remote filtering)
        filters: [{
            type: 'numeric',
            dataIndex: 'id'
        }, {
            type: 'string',
            dataIndex: 'company',
            disabled: true
        }, {
            type: 'numeric',
            dataIndex: 'price'
        }, {
            type: 'date',
            dataIndex: 'date'
        }, {
            type: 'list',
            dataIndex: 'size',
            options: ['small', 'medium', 'large', 'extra large'],
            phpMode: true
        }, {
            type: 'boolean',
            dataIndex: 'visible'
        }]
    };

Then in the grid we can add the feature:

var grid = Ext.create('Ext.grid.Panel', {
        border: false,
        store: store,
        columns: createHeaders(4),
        loadMask: true,
        features: [filters],
        bbar: Ext.create('Ext.toolbar.Paging', {
            store: store
        })
    });

But using Sencha Architect, you cannot add the filtering feature in the code (unless you override) without creating your own "property" then you will have a duplicated property if you use groupingfeature or summaryfeature,etc.

gridproblem.png

Moreover, you cannot add the feature from Sencha Architect:

gridproblem1.png

So, what should I do to make the filtering feature to work using Sencha Architect, how can you use any UX component from Sencha Architect ?

A tutorial in the "learn" section (sencha.com) would be nice.

Any comment about this will be welcome.

Thanks in advance.

[aconran]

So, what should I do to make the filtering feature to work using Sencha Architect, how can you use any UX component from Sencha Architect ?

Use an override to add the additional feature. Anytime that there is a custom thing/user extension that is not included out of the box with Architect you can always add it by adding the appropriate JS Resources and adding it via an override and/or event handler.

[iplanit]

Hi aconran,

Thanks for your prompt reply.

Would you be able to provide me with an example for this specific case? As a rule I would not need to ask. However I think it is something common that people are encountering.

Also, I think that it should be something that you can achieve with Sencha Architect without needing to override. Or am I missing something?

saoverride.png

By adding the appropiate JS Resource you mean adding a new resource or adding the "requires" to the Application in Sencha Architect ?

If I override I get the following code:

Ext.define('MyApp.view.override.gridscreen', {
    override: 'MyApp.view.gridscreen'
    
});

Your suggestion is to add the code like in the example -see the code above-,
then put my features property using the filters ?

Sencha Architect is for developers, not advanced users... imho, and as a developer, I can say that if it is supposed to be so easy I think should documentation should exist to add all this ux features that are very nice and widely used (as you do in your examples without using Sencha Architect).

Maybe there is some documentation on the topic that I am missing that illustrates how to solve it. Point me to it if that is the case.

I will appreciate additional information, as I am new to Sencha Architect and ExtJS4, and if some tutorial is made and put online other users will definitively find it very useful.

Thanks for your support.

Use an override to add the additional feature. Anytime that there is a custom thing/user extension that is not included out of the box with Architect you can always add it by adding the appropriate JS Resources and adding it via an override and/or event handler.

[aconran]

If you are only using standard Ext JS/Sencha Touch components (no overrides), you will be able to create everything without dipping into overrides. We are working on 3rd party component support, but its not quite there yet.

I've created a ticket for us to create an example of grid and filter feature being used within Architect.

By adding a JS Resource I mean go to the top right of the inspector, click + then go to JS Resource and then configure the url appropriately.

[iplanit]

Hi aconrad,

I understand, but filtering is a feature that should be built-in. And there is lot of important components that anyone should be able to integrate in Sencha Architect as something "usual".

I appreciate the ticket and your support, according to your previous reply seems it should be really easy stuff. For me, a zip in this thread will work, or a brief explanation, code.

The only thing I don't understand is why do I need to add the JS Resource (never used the overrides from Sencha Architect, sorry). What I expect is just:

1. In Application edit the requires property.
2. Put the ux code in the folder so the application can get the code for the ux in the requires property.
3. Create override (panel grid).
4. Put additional code in the override.
5. Works with the grid.

But I see that I have to do something else.

Thanks again.

If you are only using standard Ext JS/Sencha Touch components (no overrides), you will be able to create everything without dipping into overrides. We are working on 3rd party component support, but its not quite there yet.

I've created a ticket for us to create an example of grid and filter feature being used within Architect.

By adding a JS Resource I mean go to the top right of the inspector, click + then go to JS Resource and then configure the url appropriately.

[aconran]

The only thing I don't understand is why do I need to add the JS Resource (never used the overrides from Sencha Architect, sorry). What I expect is just:

1. In Application edit the requires property.
2. Put the ux code in the folder so the application can get the code for the ux in the requires property.
3. Create override (panel grid).
4. Put additional code in the override.
5. Works with the grid.

But I see that I have to do something else.

If you do the above, this will work fine. Using the requires property is simply an alternative to directly including a JS Resource.

When you include a JS Resource it will generate an additional script tag linking the file.

When you use requires, it will dynamically load the resource. Note you will probably have to additional configure the loader to tell it where Ext.ux should be loaded from.

[iplanit]

Hi,

What I did to make it work was editing the code generated instead of the override. But it is not the correct way (even if it is working), and I had problems trying to put the code in the override (probably a javascript error).

Regarding the JS Resource, I did nothing, just copy the ux folder. With the requires the javascript loads.

I look forward to have the example or some javascript code of the override in the right way.

Thank you.

If you do the above, this will work fine. Using the requires property is simply an alternative to directly including a JS Resource.

When you include a JS Resource it will generate an additional script tag linking the file.

When you use requires, it will dynamically load the resource. Note you will probably have to additional configure the loader to tell it where Ext.ux should be loaded from.

[d.velev]

Hi iplanit,

Can you hook us up with some quick tutorial or live example for sencha architect 2

[iplanit]

Hi,

It is not perfect, but I created an example of an override to enable filters in a grid.

TUTORIAL: Google file illustrating how to use the grid filter feature in Sencha Architect.

Regards

[aconran]

Thanks for putting together this presentation.